fonts
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSkill: Fonts
Skill：字体
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独特排版选择参考。避免使用过度泛滥的字体（Helvetica、Arial、Roboto、Open Sans、Montserrat、Playfair Display、Poppins、Lato）。
以下所有字体均可通过Google Fonts免费获取，且兼容。
next/font/googleBy 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 |
| 风格 | 字体 |
|---|---|
| 编辑/文学风 | Newsreader、Lora、EB Garamond、Cormorant、Spectral |
| 奢华/时尚风 | Cormorant Garamond、Bodoni Moda、Libre Bodoni、Fraunces |
| 现代简约风 | Space Grotesk、DM Sans、Plus Jakarta Sans、Manrope |
| 醒目/冲击力风 | Bricolage Grotesque、League Spartan、Syne、Outfit |
| 活泼趣味风 | Rubik、Nunito、Comfortaa、Quicksand |
| 科技/未来风 | Space Mono、JetBrains Mono、Fira Code、IBM Plex Mono |
| 低调内敛风 | 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 |
| 字体 | 使用场景 |
|---|---|
| Cormorant | 高对比度优雅风格，适用于编辑类标题、奢华感设计 |
| Cormorant Garamond | 精致权威感，适用于高端编辑内容 |
| Lora | 优雅正文字体，适用于博客内容、小尺寸文字阅读 |
| EB Garamond | 经典书籍排版风格，适用于长篇阅读内容 |
| Newsreader | 杂志/编辑类排版，具有新闻感 |
| Spectral | 兼具个性与可读性的正文字体 |
| Fraunces | 具有个性的现代可变衬线字体，包含9种字重 |
| Bodoni Moda | Didone风格标题字体，适用于时尚/奢华设计 |
| Libre Bodoni | 简洁版Bodoni替代字体，适用于标题展示 |
| Libre Baskerville | 文学感风格（Mrs Eaves替代字体） |
| Young Serif | 温暖感现代标题字体 |
| Instrument Serif | 现代精致衬线字体，适用于编辑内容 |
| Alegreya | 独特字形，适用于高端作品集 |
| BioRhyme | Slab衬线字体，适用于编辑类排版，包含7种字重 |
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) |
| 字体 | 使用场景 |
|---|---|
| Space Grotesk | 现代品牌设计，具有几何个性 |
| DM Sans | 人文主义设计，Futura替代字体，字形独特的"G" |
| Plus Jakarta Sans | 现代UI设计，具有独特辨识度 |
| Manrope | 简洁几何无衬线字体，包含7种字重 |
| Outfit | 几何人文主义风格，适用于现代作品集 |
| Bricolage Grotesque | 醒目标题字体，富有表现力与个性 |
| Syne | 独特触感风格，适用于创意作品集 |
| Chivo | 多用途实用字体，包含9种字重 |
| Work Sans | 屏幕优化字体，友好且专业 |
| Mulish | 人文主义-几何混合风格，可变字体 |
| Epilogue | 带温暖感的几何字体 |
| Proza Libre | 低调精致风格，适用于编辑内容 |
| League Spartan | 窄体几何字体，适用于冲击力标题 |
| Inter | 专注UI设计，可读性极佳（谨慎使用 - 已逐渐普及） |
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 |
| 字体 | 使用场景 |
|---|---|
| Bricolage Grotesque | 富有表现力的标题字体，个性鲜明 |
| Fraunces | 具有大幅字重变化的可变衬线字体 |
| Instrument Serif | 现代编辑类标题字体 |
| Young Serif | 温暖感现代标题字体 |
| Abril Fatface | 粗体Didone风格展示字体 |
| Rubik Glitch | 实验性/科技感美学 |
| Silkscreen | 复古像素/终端风格 |
| Aboreto | 独特展示风格 |
| Red Rose | 富有表现力的标题字体 |
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 |
| 职业 | 推荐字体方向 |
|---|---|
| 作家/编辑 | Newsreader、Lora、EB Garamond、Spectral |
| 设计师 | Space Grotesk、Bricolage Grotesque、Fraunces |
| 开发者 | Space Mono、JetBrains Mono、IBM Plex Mono |
| 策略师 | Cormorant Garamond、Chivo、DM Sans |
| 艺术家 | Syne、Rubik、Instrument Serif |
| 奢华/时尚从业者 | Bodoni Moda、Cormorant、Libre Bodoni |
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 |
| 风格 | 标题字体 + 正文字体 |
|---|---|
| 编辑风 | Instrument Serif + DM Sans |
| 现代风 | Bricolage Grotesque + Space Grotesk |
| 文学风 | Cormorant + Spectral |
| 科技风 | Space Mono + Inter |
| 奢华风 | Bodoni Moda + Manrope |
| 创意风 | Fraunces + Work Sans |
| 极简风 | Young Serif + Plus Jakarta Sans |
Recommended Pairings
在Next.js中的使用示例
| 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 |
tsx
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'
});Usage in Next.js
字体搭配规则
tsx
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'
});- 对比字体类别：衬线标题字体 + 无衬线正文字体（反之亦然）
- 突出主次：一种主导字体，一种辅助字体（避免两者争夺注意力）
- 尽可能匹配x高度以实现视觉和谐
- 每个网站最多使用3种字体
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
—