Developer Tools
Font Preview & Pairing Sandbox - System & Web-Safe Font Tester
Preview system fonts and web-safe font stacks with custom text. Filter by category (serif, sans-serif, monospace, cursive, fantasy), adjust size and weight, and copy the font-family stack.
The quick brown fox jumps over the lazy dog
Georgia, "Times New Roman", serif
The quick brown fox jumps over the lazy dog
"Times New Roman", Times, serif
The quick brown fox jumps over the lazy dog
"Palatino Linotype", Palatino, "Book Antiqua", serif
The quick brown fox jumps over the lazy dog
Garamond, "Adobe Garamond", "Cormorant Garamond", serif
The quick brown fox jumps over the lazy dog
"Book Antiqua", Palatino, serif
The quick brown fox jumps over the lazy dog
Didot, "Bodoni MT", "Didot LT STD", serif
The quick brown fox jumps over the lazy dog
Arial, Helvetica, sans-serif
The quick brown fox jumps over the lazy dog
Helvetica, Arial, sans-serif
The quick brown fox jumps over the lazy dog
Verdana, Geneva, sans-serif
The quick brown fox jumps over the lazy dog
"Trebuchet MS", Helvetica, sans-serif
The quick brown fox jumps over the lazy dog
Tahoma, Geneva, sans-serif
The quick brown fox jumps over the lazy dog
"Gill Sans", "Gill Sans MT", Calibri, sans-serif
The quick brown fox jumps over the lazy dog
Optima, Candara, Calibri, sans-serif
The quick brown fox jumps over the lazy dog
Futura, "Century Gothic", sans-serif
The quick brown fox jumps over the lazy dog
"Century Gothic", Futura, sans-serif
The quick brown fox jumps over the lazy dog
"Courier New", Courier, monospace
The quick brown fox jumps over the lazy dog
"Lucida Console", Monaco, monospace
The quick brown fox jumps over the lazy dog
Monaco, "Lucida Console", monospace
The quick brown fox jumps over the lazy dog
Consolas, "Courier New", monospace
The quick brown fox jumps over the lazy dog
"Brush Script MT", "Segoe Script", cursive
The quick brown fox jumps over the lazy dog
"Comic Sans MS", "Chalkboard SE", cursive
The quick brown fox jumps over the lazy dog
Impact, Charcoal, fantasy
The quick brown fox jumps over the lazy dog
Copperplate, "Copperplate Gothic Light", fantasy
Why font pairing matters
Typography is one of the most impactful aspects of visual design. The fonts you choose affect readability, brand personality, and user perception. Good font pairing typically combines a display or serif font for headings with a clean sans-serif for body text.
Font classification
- Serif: has small strokes (serifs) at the ends of letterforms (Times New Roman, Georgia, Playfair Display). Traditional, editorial, trustworthy.
- Sans-serif: no serifs; clean and modern (Arial, Helvetica, Inter, Open Sans). Best for body text at smaller sizes.
- Monospace: every character occupies the same horizontal space (Courier, Fira Code, JetBrains Mono). Used for code.
- Display: decorative fonts intended for headlines and short text at large sizes. Not suitable for body copy.
Typography terms
- Font size: typically measured in pixels (px) or points (pt) on screen. Body text is usually 16–18px for readability.
- Line height: the vertical spacing between lines. A ratio of 1.4–1.6× the font size is standard for body copy.
- Letter spacing (tracking): space between characters. Increase for all-caps headings; keep tight for body text.
- Weight: the thickness of strokes. Common weights: 300 (light), 400 (regular), 600 (semi-bold), 700 (bold), 900 (black).
Font pairing quick guide
| Heading font | Body font | Character |
|---|---|---|
| Playfair Display | Source Sans Pro | Editorial, magazine feel |
| Merriweather | Open Sans | Trustworthy, readable |
| Raleway | Lato | Modern, clean |
| Oswald | Lato | Bold, impactful |
| Montserrat | Merriweather | Geometric heading, warm body |
Web performance and font loading
Font loading affects Core Web Vitals. Large font files can cause Cumulative Layout Shift (CLS) as text reflows when the web font loads, and delay Largest Contentful Paint (LCP) if the font blocks rendering. Best practices:
-
Use
font-display: swapto show a fallback font immediately and swap when the web font loads. -
Preload critical fonts with
<link rel="preload" as="font">in the<head>. - Prefer variable fonts - one file serves all weights and styles, reducing HTTP requests.
-
Subset fonts to only the characters you need using tools like glyphhanger or Google Fonts'
text=parameter.
Variable fonts
Variable fonts (OpenType 1.8+) encode multiple design variations (weight, width, slant,
optical size) in a single font file using axes that can be animated or adjusted continuously
with CSS. Instead of loading separate files for Regular, Bold, and Italic, a single variable
font file serves all. This reduces HTTP requests and enables smooth animated weight
transitions with font-variation-settings.