Skill: Fonts

Reference for selecting distinctive typography. Avoid overused fonts (Helvetica, Arial, Roboto, Open Sans, Montserrat, Playfair Display, Poppins, Lato).

All fonts below are free via Google Fonts and work with next/font/google.

---

By Vibe

Vibe	Fonts
Editorial/Literary	Newsreader, Lora, EB Garamond, Cormorant, Spectral
Luxury/Fashion	Cormorant Garamond, Bodoni Moda, Libre Bodoni, Fraunces
Modern Clean	Space Grotesk, DM Sans, Plus Jakarta Sans, Manrope
Bold/Impact	Bricolage Grotesque, League Spartan, Syne, Outfit
Playful	Rubik, Nunito, Comfortaa, Quicksand
Technical/Future	Space Mono, JetBrains Mono, Fira Code, IBM Plex Mono
Understated	Mulish, Chivo, Proza Libre, Work Sans

---

Serif

Font	Use Case
Cormorant	High-contrast elegance, editorial headers, luxury feel
Cormorant Garamond	Sophisticated authority, refined editorial
Lora	Elegant body text, blog content, readable at small sizes
EB Garamond	Classic book typography, long-form reading
Newsreader	Magazine/editorial layouts, journalistic feel
Spectral	Balanced body text with character
Fraunces	Modern variable serif with personality, 9 weights
Bodoni Moda	Didone-style headlines, fashion/luxury
Libre Bodoni	Clean Bodoni alternative, display use
Libre Baskerville	Literary feel (Mrs Eaves alternative)
Young Serif	Contemporary headlines with warmth
Instrument Serif	Modern refined serif, editorial
Alegreya	Distinctive letterforms, sophisticated portfolios
BioRhyme	Slab serif for editorial layouts, 7 weights

---

Sans Serif

Font	Use Case
Space Grotesk	Contemporary branding, geometric personality
DM Sans	Humanist design, Futura alternative, distinctive "G"
Plus Jakarta Sans	Modern UI, distinctive character
Manrope	Clean geometric sans, 7 weights
Outfit	Geometric humanist, modern portfolios
Bricolage Grotesque	Bold headlines, expressive with personality
Syne	Tactile uniqueness, creative portfolios
Chivo	Versatile workhorse, 9 weights
Work Sans	Screen-optimized, friendly professional
Mulish	Humanist-geometric hybrid, variable font
Epilogue	Geometric with warmth
Proza Libre	Understated sophistication, editorial
League Spartan	Condensed geometric, impactful headers
Inter	UI-focused, excellent legibility (use sparingly - becoming common)

---

Display

Font	Use Case
Bricolage Grotesque	Expressive headlines, bold personality
Fraunces	Variable serif with dramatic weight range
Instrument Serif	Modern editorial headlines
Young Serif	Warm contemporary headers
Abril Fatface	Bold Didone-style display
Rubik Glitch	Experimental/tech aesthetic
Silkscreen	Retro pixel/terminal aesthetic
Aboreto	Distinctive display style
Red Rose	Expressive headlines

---

Monospace

Font	Use Case
Space Mono	Developer portfolios, distinctive style
JetBrains Mono	Code display, excellent legibility
Fira Code	Programming with ligatures
IBM Plex Mono	Technical documentation, professional
Inconsolata	Classic code aesthetic
Source Code Pro	Clean, versatile monospace

---

By Archetype

Person	Direction
Writer/Editor	Newsreader, Lora, EB Garamond, Spectral
Designer	Space Grotesk, Bricolage Grotesque, Fraunces
Developer	Space Mono, JetBrains Mono, IBM Plex Mono
Strategist	Cormorant Garamond, Chivo, DM Sans
Artist	Syne, Rubik, Instrument Serif
Luxury/Fashion	Bodoni Moda, Cormorant, Libre Bodoni

---

Recommended Pairings

Style	Display + Body
Editorial	Instrument Serif + DM Sans
Modern	Bricolage Grotesque + Space Grotesk
Literary	Cormorant + Spectral
Tech	Space Mono + Inter
Luxury	Bodoni Moda + Manrope
Creative	Fraunces + Work Sans
Minimal	Young Serif + Plus Jakarta Sans

---

Usage in Next.js

import { Space_Grotesk, Newsreader } from 'next/font/google';

const heading = Space_Grotesk({
  subsets: ['latin'],
  variable: '--font-heading'
});

const body = Newsreader({
  subsets: ['latin'],
  variable: '--font-body'
});

---

Pairing Rules

• Contrast categories: serif display + sans body (or reverse)
• One dominant, one supporting (never compete for attention)
• Match x-heights when possible for visual harmony
• Limit to 3 fonts maximum per site