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