font-recommendations

What this skill does

# Font Recommendations

## System Font Stack (Safe Default)
```css
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 |