font-recommendations

name: font-recommendations description: > Curated typeface catalog with weights, licensing, and CSS snippets for sans-serif fonts (Inter, Roboto, Open Sans, Proxima Nova, Graphik, Futura, Lato, IBM Plex Sans) and serif fonts (Merriweather, EB Garamond, Crimson Pro, Alegreya). Includes font pairing tables and the system font stack. Apply whenever choosing a font-family, setting up CSS font stacks, pairing headline and body typefaces, or deciding between free and commercial fonts for a project.

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