font-recommendations

Font Recommendations

System Font Stack (Safe Default)

font-family: -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;

Recommended Sans-Serif Fonts

Proxima Nova (Mark Simonson)

• Type: Sans-serif, geometric
• Best for: Headlines, body text, UI elements
• Weights: Thin, Light, Regular, Medium, Semibold, Bold, Extrabold, Black (+ italics)
• Character: Modern, clean, versatile
• License: Commercial (Adobe Fonts, font distributors)
• CSS: font-family: 'Proxima Nova', sans-serif;

Graphik (Commercial Type)

• Type: Sans-serif, neo-grotesque
• Best for: Headlines, UI text, body copy
• Weights: Thin, Extralight, Light, Regular, Medium, Semibold, Bold, Super (+ italics)
• Character: Clean, contemporary, professional
• License: Commercial
• CSS: font-family: 'Graphik', sans-serif;

Roboto (Google)

• Type: Sans-serif, neo-grotesque
• Best for: UI elements, body text, Android default
• Weights: Thin (100), Light (300), Regular (400), Medium (500), Bold (700), Black (900) (+ italics)
• Character: Friendly, open, modern
• License: Free (Google Fonts)
• CSS: font-family: 'Roboto', sans-serif;

Open Sans (Google)

• Type: Sans-serif, humanist
• Best for: Body text, UI elements, high legibility
• Weights: Light (300), Regular (400), Semibold (600), Bold (700), Extrabold (800) (+ italics)
• Character: Friendly, neutral, highly readable
• License: Free (Google Fonts)
• CSS: font-family: 'Open Sans', sans-serif;

Inter (Rasmus Andersson)

• Type: Sans-serif, designed specifically for screens
• Best for: UI elements, body text, any screen application
• Weights: Thin (100) through Black (900) in all increments
• Character: Clean, highly readable at small sizes, technical
• License: Free (Google Fonts)
• CSS: font-family: 'Inter', sans-serif;

Futura (Paul Renner)

• Type: Sans-serif, geometric
• Best for: Headlines, display text, branding
• Weights: Light, Book, Medium, Bold, Extra Bold, Heavy (+ oblique)
• Character: Geometric, iconic, forward-looking
• License: Commercial
• CSS: font-family: 'Futura', sans-serif;

Freight Sans (Garage Fonts)

• Type: Sans-serif, humanist
• Best for: Headlines and body text for editorial/marketing
• Weights: Light, Book, Medium, Semibold, Bold, Black (+ italics)
• Character: Warm, approachable, editorial
• License: Commercial
• CSS: font-family: 'Freight Sans', sans-serif;

Lato (Google)

• Type: Sans-serif, humanist
• Best for: Body text, UI elements
• Weights: Thin (100), Light (300), Regular (400), Bold (700), Black (900) (+ italics)
• Character: Warm, stable, professional
• License: Free (Google Fonts)
• CSS: font-family: 'Lato', sans-serif;

Source Sans Pro / Source Sans 3 (Adobe)

• Type: Sans-serif, designed for UI
• Best for: Body text, UI elements, code documentation
• Weights: Extra Light, Light, Regular, Semibold, Bold, Black (+ italics)
• Character: Clean, professional, highly readable
• License: Free (Google Fonts)
• CSS: font-family: 'Source Sans 3', sans-serif;

IBM Plex Sans (IBM)

• Type: Sans-serif, neo-grotesque
• Best for: UI elements, body text, technical documentation
• Weights: Thin (100), ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700)
• Character: Technical, approachable, modern
• License: Free (Google Fonts)
• CSS: font-family: 'IBM Plex Sans', sans-serif;

Recommended Serif Fonts

Merriweather (Google)

• Type: Serif, designed for screens
• Best for: Body text, articles, blogs
• Weights: Light (300), Regular (400), Bold (700), Black (900) (+ italics)
• Character: Readable on screen, classic, trustworthy
• License: Free (Google Fonts)
• CSS: font-family: 'Merriweather', serif;

EB Garamond (Google)

• Type: Serif, old-style
• Best for: Long-form reading, editorial, literary
• Weights: Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800) (+ italics)
• Character: Elegant, classical, literary
• License: Free (Google Fonts)
• CSS: font-family: 'EB Garamond', serif;

Crimson Pro (Google)

• Type: Serif, old-style
• Best for: Articles, body text, editorial
• Weights: ExtraLight (200) through Black (900) (+ italics)
• Character: Contemporary take on classic serif, readable
• License: Free (Google Fonts)
• CSS: font-family: 'Crimson Pro', serif;

Alegreya (Google)

• Type: Serif, old-style
• Best for: Long-form reading, books, editorial
• Weights: Regular (400), Medium (500), Bold (700), ExtraBold (800), Black (900) (+ italics)
• Character: Dynamic, varied rhythm, good for extended reading
• License: Free (Google Fonts)
• CSS: font-family: 'Alegreya', serif;

Freight Text (Garage Fonts)

• Type: Serif
• Best for: Body text, editorial, long-form content
• Weights: Book, Medium, Bold, Black (+ italics)
• Character: Warm, highly readable, editorial
• License: Commercial
• CSS: font-family: 'Freight Text', serif;

Font Selection Guidelines

For UI / Application Design

1. Primary choice: Inter, Roboto, Open Sans, or system font stack
2. Alternative: IBM Plex Sans, Source Sans 3, Lato
3. Premium: Proxima Nova, Graphik

For Marketing / Landing Pages

1. Headlines: Futura, Proxima Nova (bold weights), or a serif like Freight Text
2. Body: Open Sans, Inter, or a serif like Merriweather
3. Mix a sans-serif headline with serif body for contrast

For Blogs / Articles

1. Body text: Merriweather, EB Garamond, Crimson Pro, or Georgia
2. Headlines: Pair with a contrasting sans-serif (e.g., Merriweather body + Proxima Nova headlines)

Key Rules

• Filter by weight count: Only consider typefaces with 5+ weights (10+ styles including italics)
• Test at target size: Fonts designed for headlines may not work at 14px body text
• Legibility first: For body text, prefer fonts with taller x-height and wider letter-spacing
• Tighten headline letter-spacing: When using a wide-spaced font for headlines, reduce letter-spacing (letter-spacing: -0.02em)
• Increase ALL CAPS letter-spacing: Add letter-spacing: 0.05em for uppercase text
• Avoid more than 2 font families per project: One for headings, one for body is usually enough
• Use font-display: swap: For web fonts to avoid FOIT (flash of invisible text)

Font Pairing Examples

Headlines	Body	Style
Proxima Nova Bold	Freight Text Book	Modern + Editorial
Futura Bold	Open Sans Regular	Geometric + Humanist
Inter Bold	Inter Regular	Unified + Clean
Graphik Semibold	Merriweather Regular	Contemporary + Classic
Roboto Bold	Roboto Regular	Unified + Approachable
IBM Plex Sans Bold	IBM Plex Serif Regular	Technical + Readable