Display vs Text Fonts
- - Display fonts (Abril Fatface, Bebas Neue, Lobster) are for headings 24px+ only—using them for body text destroys readability
- If a font looks decorative or has extreme thick/thin contrast, it's display—not for paragraphs
- Text fonts (Inter, Roboto, Georgia) are designed for 12-18px—use these for body copy
Pairing Traps
- - Two fonts too similar look like a mistake—if you can't tell them apart instantly, use one font
- Contrast in category works: serif heading + sans-serif body, or different weights of same family
- Two decorative fonts clash—never pair Lobster with Pacifico
- Safe pairs: same superfamily (Roboto + Roboto Slab) or proven combos (Playfair Display + Source Sans Pro)
Weight and Rendering
- - Thin weights (100-300) render poorly on Windows—avoid for body text, use 400+ for cross-platform
- Light fonts on dark backgrounds look thinner—bump weight up one level for dark mode
- Faux bold (browser-generated) looks wrong—only use weights the font actually includes
- Check font has italic—faux italic (slanted roman) is noticeably worse than true italic
Line Height and Length
- - Body text needs 1.4-1.6 line-height—1.0 or 1.2 makes paragraphs unreadable walls
- Headings need tighter line-height (1.1-1.3)—large text with 1.5 line-height has awkward gaps
- Line length 45-75 characters max—wider than 75 chars causes readers to lose their place
- Set
max-width on text containers in ch units: INLINECODE1
All Caps
- - ALL CAPS needs increased letter-spacing—without it, letters collide and look cramped
- INLINECODE2 +
letter-spacing: 0.05em minimum - Never use all caps for more than a few words—extended caps text is significantly harder to read
- Small caps (
font-variant: small-caps) only if font supports it—faux small caps look amateurish
Widows and Orphans
- - Single word alone on last line of paragraph looks broken—adjust text or container width
- INLINECODE5 (CSS) distributes lines more evenly in headings
- INLINECODE6 for body text—prevents orphans in browsers that support it
- Manual fix: non-breaking space (
) between last two words
Loading and Performance
- -
font-display: swap prevents invisible text—without it, text is blank until font loads - Subset fonts to characters you need—Latin-only saves 60%+ over full Unicode
- WOFF2 is the only format you need—universal support, best compression
- Preload critical fonts: INLINECODE9
System Font Stack
CODEBLOCK0
- - Zero load time, native look per platform—use for UI-heavy apps
- INLINECODE10 is now widely supported—simpler than listing all fallbacks
- Always end with generic fallback (
sans-serif, serif, monospace)
Hierarchy Mistakes
- - Using too many font sizes—stick to a type scale (1.25 or 1.333 ratio), not random sizes
- Headings not distinct enough from body—skip at least one scale step between h1 and body
- Overusing bold—if everything is emphasized, nothing is emphasized
- Color as only differentiator—size and weight should establish hierarchy before color
显示字体与正文字体
- - 显示字体(Abril Fatface、Bebas Neue、Lobster)仅适用于24px及以上的标题——用于正文会破坏可读性
- 如果字体具有装饰性,或存在极端的粗细对比,则属于显示字体——不适用于段落
- 正文字体(Inter、Roboto、Georgia)专为12-18px设计——用于正文内容
字体搭配陷阱
- - 两种过于相似的字体看起来像是个错误——如果无法立即区分,请使用一种字体
- 类别对比有效:衬线标题 + 无衬线正文,或同一字族的不同字重
- 两种装饰性字体冲突——切勿将Lobster与Pacifico搭配使用
- 安全搭配:同一超字族(Roboto + Roboto Slab)或经过验证的组合(Playfair Display + Source Sans Pro)
字重与渲染
- - 细字重(100-300)在Windows上渲染效果差——避免用于正文,跨平台使用400+
- 深色背景上的浅色字体看起来更细——深色模式下将字重提升一级
- 伪粗体(浏览器生成)看起来不对——仅使用字体实际包含的字重
- 检查字体是否有斜体——伪斜体(倾斜的罗马体)明显比真正的斜体差
行高与行长
- - 正文需要1.4-1.6的行高——1.0或1.2会使段落变成难以阅读的文字墙
- 标题需要更紧凑的行高(1.1-1.3)——大号文字搭配1.5的行高会产生尴尬的间距
- 行长最大45-75个字符——超过75个字符会导致读者迷失位置
- 在文本容器上使用ch单位设置max-width:max-width: 65ch
全大写
- - 全大写需要增加字间距——没有字间距,字母会碰撞并显得拥挤
- text-transform: uppercase + 至少letter-spacing: 0.05em
- 全大写不要超过几个单词——过长的全大写文本阅读难度显著增加
- 仅当字体支持时才使用小型大写(font-variant: small-caps)——伪小型大写显得业余
孤行与寡行
- - 段落最后一行只有一个单词看起来不完整——调整文本或容器宽度
- text-wrap: balance(CSS)在标题中更均匀地分布行
- 正文使用text-wrap: pretty——在支持的浏览器中防止寡行
- 手动修复:最后两个单词之间使用不间断空格( )
加载与性能
- - font-display: swap防止不可见文本——没有它,文本在字体加载前会空白
- 将字体子集化为所需的字符——仅拉丁字符比完整Unicode节省60%以上
- WOFF2是你唯一需要的格式——普遍支持,最佳压缩
- 预加载关键字体:
系统字体栈
css
font-family: system-ui, -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, sans-serif;
- - 零加载时间,每个平台的原生外观——适用于UI密集型应用
- system-ui现已广泛支持——比列出所有后备字体更简单
- 始终以通用后备字体结尾(sans-serif、serif、monospace)
层级错误
- - 使用过多字号——坚持使用字体比例(1.25或1.333比率),而非随机大小
- 标题与正文区分不够——在h1和正文之间至少跳过一个比例层级
- 过度使用粗体——如果所有内容都被强调,则没有内容被强调
- 仅用颜色作为区分——大小和字重应在颜色之前建立层级