Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. On the web, typography is not decoration — it is the primary interface. Over 90% of web content is text, which makes font choices one of the most impactful design decisions you will make.
Typeface vs Font
These terms are often used interchangeably, but they have distinct meanings:
- Typeface — The design of the letterforms. "Inter" is a typeface. "Georgia" is a typeface. Think of it as the family.
- Font — A specific weight, style, and size within a typeface. "Inter Bold 16px" is a font. "Georgia Italic 14px" is a font.
In digital design, the distinction has blurred, and most people say "font" for both. But understanding the difference helps when discussing type systems.
Type Classifications
Serif
Serif typefaces have small decorative strokes (serifs) at the ends of letterforms. They convey tradition, authority, and elegance. Common on editorial and literary sites.
Examples: Georgia, Times New Roman, Merriweather, Source Serif 4, Playfair Display.
Sans-Serif
Sans-serif typefaces lack those decorative strokes, creating a cleaner, more modern appearance. They are the default choice for digital interfaces because they render well at small sizes on screens.
Examples: Inter, Helvetica, Arial, Open Sans, Roboto.
Monospace
Every character occupies the same horizontal space. Essential for code editors and terminal output where alignment matters.
Examples: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono.
Display
Designed for large sizes — headlines, logos, hero text. Display typefaces are expressive and attention-grabbing but become illegible at body text sizes.
Examples: Lobster, Playfair Display, Abril Fatface.
Loading Fonts on the Web
Modern web fonts are loaded via CSS @font-face or Google Fonts. For performance, use font-display: swap to show fallback text immediately while the custom font loads:
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}Always include a fallback stack. If your custom font fails to load, the page should still be readable with system fonts.
Font Pairing
Pairing two typefaces creates visual contrast and hierarchy. The golden rule: pair fonts that contrast, not fonts that conflict.
Effective pairing strategies:
- Serif headings + sans-serif body — Classic combination. The serif adds personality to headlines while the sans-serif keeps body text clean. Example: Playfair Display + Inter.
- Same family, different weights — Using one typeface in bold for headings and regular for body is the safest approach. Example: Inter Bold headings + Inter Regular body.
- Sans-serif heading + serif body — Less common but elegant for editorial content. Example: Helvetica headings + Georgia body.
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
body {
font-family: 'Inter', sans-serif;
font-weight: 400;
}Avoid pairing two typefaces that are too similar (e.g., Helvetica + Arial). They will look like a mistake rather than a deliberate choice. Also avoid pairing more than two typefaces unless you have a strong reason — simplicity usually wins.
Practical Tips
- Limit to 2 typefaces — One for headings, one for body. Adding a monospace for code is acceptable as a third.
- Test at real sizes — A typeface that looks great in a design tool at 48px may be illegible at 14px on a phone.
- Check language support — If your site supports multiple languages, verify the font includes the necessary character sets.
- Consider variable fonts — A single variable font file can replace multiple weight files, reducing load time while giving you precise control over weight and width.