1---2name: fonts3description: Reference for selecting distinctive typography. Includes font recommendations by vibe, category, archetype, and pairing guidelines for Next.js projects.4---5
6# Skill: Fonts
7
8Reference for selecting distinctive typography. Avoid overused fonts (Helvetica, Arial, Roboto, Open Sans, Montserrat, Playfair Display, Poppins, Lato).
9
10All fonts below are **free via Google Fonts** and work with `next/font/google`.
11
12---
13
14## By Vibe
15
16| Vibe | Fonts |
17|------|-------|
18| Editorial/Literary | Newsreader, Lora, EB Garamond, Cormorant, Spectral |
19| Luxury/Fashion | Cormorant Garamond, Bodoni Moda, Libre Bodoni, Fraunces |
20| Modern Clean | Space Grotesk, DM Sans, Plus Jakarta Sans, Manrope |
21| Bold/Impact | Bricolage Grotesque, League Spartan, Syne, Outfit |
22| Playful | Rubik, Nunito, Comfortaa, Quicksand |
23| Technical/Future | Space Mono, JetBrains Mono, Fira Code, IBM Plex Mono |
24| Understated | Mulish, Chivo, Proza Libre, Work Sans |
25
26---
27
28## Serif
29
30| Font | Use Case |
31|------|----------|
32| Cormorant | High-contrast elegance, editorial headers, luxury feel |
33| Cormorant Garamond | Sophisticated authority, refined editorial |
34| Lora | Elegant body text, blog content, readable at small sizes |
35| EB Garamond | Classic book typography, long-form reading |
36| Newsreader | Magazine/editorial layouts, journalistic feel |
37| Spectral | Balanced body text with character |
38| Fraunces | Modern variable serif with personality, 9 weights |
39| Bodoni Moda | Didone-style headlines, fashion/luxury |
40| Libre Bodoni | Clean Bodoni alternative, display use |
41| Libre Baskerville | Literary feel (Mrs Eaves alternative) |
42| Young Serif | Contemporary headlines with warmth |
43| Instrument Serif | Modern refined serif, editorial |
44| Alegreya | Distinctive letterforms, sophisticated portfolios |
45| BioRhyme | Slab serif for editorial layouts, 7 weights |
46
47---
48
49## Sans Serif
50
51| Font | Use Case |
52|------|----------|
53| Space Grotesk | Contemporary branding, geometric personality |
54| DM Sans | Humanist design, Futura alternative, distinctive "G" |
55| Plus Jakarta Sans | Modern UI, distinctive character |
56| Manrope | Clean geometric sans, 7 weights |
57| Outfit | Geometric humanist, modern portfolios |
58| Bricolage Grotesque | Bold headlines, expressive with personality |
59| Syne | Tactile uniqueness, creative portfolios |
60| Chivo | Versatile workhorse, 9 weights |
61| Work Sans | Screen-optimized, friendly professional |
62| Mulish | Humanist-geometric hybrid, variable font |
63| Epilogue | Geometric with warmth |
64| Proza Libre | Understated sophistication, editorial |
65| League Spartan | Condensed geometric, impactful headers |
66| Inter | UI-focused, excellent legibility (use sparingly - becoming common) |
67
68---
69
70## Display
71
72| Font | Use Case |
73|------|----------|
74| Bricolage Grotesque | Expressive headlines, bold personality |
75| Fraunces | Variable serif with dramatic weight range |
76| Instrument Serif | Modern editorial headlines |
77| Young Serif | Warm contemporary headers |
78| Abril Fatface | Bold Didone-style display |
79| Rubik Glitch | Experimental/tech aesthetic |
80| Silkscreen | Retro pixel/terminal aesthetic |
81| Aboreto | Distinctive display style |
82| Red Rose | Expressive headlines |
83
84---
85
86## Monospace
87
88| Font | Use Case |
89|------|----------|
90| Space Mono | Developer portfolios, distinctive style |
91| JetBrains Mono | Code display, excellent legibility |
92| Fira Code | Programming with ligatures |
93| IBM Plex Mono | Technical documentation, professional |
94| Inconsolata | Classic code aesthetic |
95| Source Code Pro | Clean, versatile monospace |
96
97---
98
99## By Archetype
100
101| Person | Direction |
102|--------|-----------|
103| Writer/Editor | Newsreader, Lora, EB Garamond, Spectral |
104| Designer | Space Grotesk, Bricolage Grotesque, Fraunces |
105| Developer | Space Mono, JetBrains Mono, IBM Plex Mono |
106| Strategist | Cormorant Garamond, Chivo, DM Sans |
107| Artist | Syne, Rubik, Instrument Serif |
108| Luxury/Fashion | Bodoni Moda, Cormorant, Libre Bodoni |
109
110---
111
112## Recommended Pairings
113
114| Style | Display + Body |
115|-------|----------------|
116| Editorial | Instrument Serif + DM Sans |
117| Modern | Bricolage Grotesque + Space Grotesk |
118| Literary | Cormorant + Spectral |
119| Tech | Space Mono + Inter |
120| Luxury | Bodoni Moda + Manrope |
121| Creative | Fraunces + Work Sans |
122| Minimal | Young Serif + Plus Jakarta Sans |
123
124---
125
126## Usage in Next.js
127
128```tsx
129import { Space_Grotesk, Newsreader } from 'next/font/google';
130
131const heading = Space_Grotesk({
132 subsets: ['latin'],
133 variable: '--font-heading'
134});
135
136const body = Newsreader({
137 subsets: ['latin'],
138 variable: '--font-body'
139});
140```
141
142---
143
144## Pairing Rules
145
146- Contrast categories: serif display + sans body (or reverse)
147- One dominant, one supporting (never compete for attention)
148- Match x-heights when possible for visual harmony
149- Limit to 3 fonts maximum per site
majiayu000