Web Design Lab Guide

Can you read this comfortably, or are you already skimming?

Typography makes or breaks the reading experience. It doesn’t matter how brilliant your content is if users can’t read it without eye strain. Yet I see websites every day with 12px gray text, zero line spacing, and font choices that sacrifice readability for “looking cool.”

Good typography is invisible. Users don’t notice the fonts. They just read effortlessly and absorb your message. Bad typography is a constant friction that exhausts readers and drives them away.

This guide shows you how to choose fonts, set type, and create typographic hierarchy that people actually read. Not just glance at. Not just skim. Actually read and comprehend.

TL;DR: Typography Essentials

Readability beats aesthetics – Beautiful but unreadable is just unreadable
Body text needs 16px minimum – Smaller strains eyes on screens
Line height should be 1.5-1.8 for body text – Tight leading kills readability
Line length matters – Aim for 50-75 characters per line
Hierarchy needs contrast – 1.5x-2x size jumps between levels
Pair fonts with purpose – Contrast without conflict
System fonts are underrated – Zero load time, maximum readability
Test on real devices – Fonts render differently across platforms

Why Typography Matters More Than Ever

We read on screens for hours every day. Articles, documentation, messages, social media. The average person reads approximately 100,000 words per day across all media. Most of that happens on glowing rectangles.

Screen reading is harder than print reading. Pixels aren’t as crisp as ink on paper. Backlighting causes eye fatigue. Users read 25% slower on screens than on paper. They also skim more aggressively, making the first few seconds critical.

Your typography either facilitates effortless reading or creates constant friction. There’s no middle ground.

The Cost of Poor Typography

Users bounce within seconds if text is hard to read. They won’t struggle through bad typography to reach your content. They’ll just leave and find a better source.

Poor typography increases cognitive load. When users work harder to decode letters and words, they have less mental energy for understanding your message. They remember less. They take fewer desired actions.

Accessibility suffers dramatically. Low contrast text, small sizes, and tight spacing create barriers for users with low vision, dyslexia, or reading difficulties. That’s not a small group. It’s roughly 15-20% of your audience.

Good typography, on the other hand? It’s invisible. Users read naturally, comprehend easily, and engage with your content instead of fighting your design.

Understanding Font Classifications

Before we talk about choosing fonts, let’s establish a shared vocabulary.

Serif Fonts

Serif fonts have small decorative strokes (serifs) at the ends of letters. Think Times New Roman, Georgia, or Merriweather.

Characteristics: Traditional, authoritative, formal. The serifs guide the eye along lines of text.

Best for: Long-form content, traditional brands, print-inspired designs. Newspapers and books use serif fonts for body text because they’re highly readable in print.

Screen considerations: Serifs can look fuzzy at small sizes on low-resolution screens. Modern serif fonts designed for screens (like Georgia or Charter) handle this better than old print fonts.

Sans-Serif Fonts

Sans-serif fonts lack the decorative strokes. Think Arial, Helvetica, or Open Sans.

Characteristics: Clean, modern, neutral. They feel less formal than serifs.

Best for: User interfaces, short text, modern brands. Most websites use sans-serif for body text because it’s easier to render clearly on screens.

Screen considerations: Generally more readable on screens than serifs, especially at smaller sizes. Less detail means clearer rendering.

Monospace Fonts

Every character takes the same width. Think Courier or Consolas.

Characteristics: Technical, precise. Each letter aligns vertically.

Best for: Code snippets, technical content, data that needs vertical alignment.

Screen considerations: Excellent for code because alignment aids readability. Terrible for regular body text because the unnatural spacing slows reading.

Display Fonts

Decorative fonts designed for headlines, not body text. Think script fonts, handwritten styles, or heavily stylized typefaces.

Characteristics: Distinctive, expressive, attention-grabbing.

Best for: Large headlines, logos, short emphasis text. Never use for body text or anything requiring sustained reading.

Screen considerations: Use sparingly and at large sizes only. What looks great in a headline becomes illegible at 16px.

Choosing Body Text Fonts

This is your most important typographic decision. Body text covers the majority of your site. Get this right before worrying about headlines.

Readability Criteria

A good body font must be:

Readable at small sizes. 16px is minimum for body text. Your font should be clear at this size without strain.

Distinguishable characters. Can users tell the difference between 1, l, and I? Between 0 and O? Between rn and m? If not, choose a different font.

Open apertures. The openings in letters like c, e, and s should be generous. Closed apertures make letters blur together.

Moderate x-height. The height of lowercase letters relative to capitals. Too small makes text hard to read. Too large eliminates distinction between lowercase and capitals.

Neutral personality. Body fonts should disappear into the content. Strong personality distracts from reading.

Recommended Body Fonts

For sans-serif:

Inter – Designed specifically for screens with excellent legibility at small sizes. Open apertures, clear distinction between characters. Available free on Google Fonts.

System UI fonts – The fonts built into operating systems (San Francisco on Mac/iOS, Segoe UI on Windows, Roboto on Android). Zero load time. Instantly familiar to users. Highly optimized for each platform.

Open Sans – Clean, neutral, extremely readable. Slightly more personality than Arial without sacrificing legibility. Very popular for good reason.

Lato – Warm and friendly while maintaining professional readability. Good for brands that want approachable without losing credibility.

For serif:

Georgia – Designed for screens by Microsoft. Larger x-height than most serifs makes it work well at small sizes. Classic but not stuffy.

Merriweather – Open-source font designed specifically for screens. Slightly condensed for efficient use of space without sacrificing readability.

Charter – Originally designed for low-resolution printing. Translates beautifully to screens with excellent readability.

Source Serif – Adobe’s open-source serif designed for source code annotation but works beautifully for body text. Clean and readable.

Fonts to Avoid for Body Text

Times New Roman – Designed for newspaper printing in 1932. Optimized for narrow newspaper columns and print ink, not screens. Looks cramped and old-fashioned on the web.

Arial – Not bad, just boring. It’s the default everywhere, which makes sites using it feel generic. Use system fonts or choose something with more consideration.

Comic Sans – Do I need to explain this one? It screams unprofessional except for very specific contexts (like designing for children).

Any script or handwriting font – These are display fonts. They’re exhausting to read in paragraphs.

Thin or ultra-light weights – Looks elegant but becomes illegible on many screens. Stick to regular or medium weights for body text.

Setting Type for Maximum Readability

Choosing the right font is only half the battle. How you set that type matters just as much.

Line Height (Leading)

Line height is the vertical space between lines of text. Too tight, and lines blur together. Too loose, and the relationship between lines breaks down.

Body text: 1.5 to 1.8 (relative to font size)

If your body text is 16px, your line height should be 24-29px. This gives readers breathing room without making text feel disconnected.

Longer line lengths need more line height. If your lines run 80+ characters, push toward 1.8. Shorter lines can use tighter leading around 1.5.

Headings: 1.1 to 1.3

Headings should feel more compact than body text. They’re short, so tight leading works. But don’t go below 1.1 or descenders (letters like g, y, p) will touch ascenders (letters like h, k, l) on the next line.

Short UI text: 1.3 to 1.5

Buttons, navigation, form labels need less line height than paragraphs but more than headings.

Line Length (Measure)

Optimal line length for comfortable reading is 50-75 characters per line, including spaces.

Why this range?

Shorter lines feel choppy. Your eye jumps to the next line constantly, disrupting reading flow.

Longer lines cause fatigue. When lines stretch beyond 75 characters, readers struggle to track back to find the start of the next line. They lose their place or accidentally reread lines.

How to control line length:

Use max-width on text containers. A paragraph should never stretch full-width on a large monitor.

.content {
  max-width: 65ch; /* ch unit = character width */
  margin-left: auto;
  margin-right: auto;
}

The ch unit is perfect for this because it scales with font size. 65ch gives you roughly 65 characters per line.

For multi-column layouts on wide screens, give each column an appropriate width rather than stretching text across the full page.

Letter Spacing (Tracking)

Most fonts are designed with appropriate letter spacing built in. Adjust cautiously.

Body text: Almost never adjust. Default spacing is optimized for readability.

Headings: Slight negative letter spacing (tightening) often improves appearance. Try -0.02em to -0.05em on large headings.

All caps text: Needs increased letter spacing. All caps feel cramped without extra space. Add 0.05em to 0.1em.

Small caps: Also needs extra spacing, typically 0.05em.

Never add letter spacing to body text to make it “airier.” Use line height instead.

Word Spacing

Leave this alone. Seriously. Default word spacing is almost always correct. Adjusting it creates uneven rhythm that disrupts reading.

The exception is justified text, which we’ll discuss next.

Text Alignment

Left-aligned (or right-aligned for RTL languages) is optimal for readability. The uneven right edge (rag) creates landmarks that help readers track lines.

Center-aligned works for short text like headlines or quotes. Don’t use it for paragraphs. Having to find the start of each line creates constant friction.

Justified creates even left and right edges by adjusting word and letter spacing. It looks formal and organized but can create “rivers” of white space running through paragraphs. If you use justified text, enable hyphenation to reduce spacing issues.

Right-aligned (in LTR languages) works only for specific design effects or small amounts of secondary information. Never use for body text.

Creating Typographic Hierarchy

Hierarchy tells users what’s important and guides them through your content. Size alone isn’t enough. You need multiple variables working together.

Size Contrast

The most powerful hierarchy tool. Each level should be noticeably different from the next.

Use a modular scale to create mathematical relationships between sizes. Common scales:

1.25 (Major Third)

16px base
20px (16 × 1.25)
25px (20 × 1.25)
31px (25 × 1.25)
39px (31 × 1.25)

1.5 (Perfect Fifth)

16px base
24px (16 × 1.5)
36px (24 × 1.5)
54px (36 × 1.5)

1.618 (Golden Ratio)

16px base
26px (16 × 1.618)
42px (26 × 1.618)
68px (42 × 1.618)

You don’t need to follow these exactly. What matters is clear distinction between levels. Users should never wonder whether two headings are the same level or different.

Weight Contrast

Font weight (thickness of strokes) creates hierarchy without changing size.

Typical weight scale:

Thin: 100
Light: 300
Regular: 400
Medium: 500
Semi-bold: 600
Bold: 700
Extra-bold: 800
Black: 900

Use weight strategically:

Headings: Bold (700) or semi-bold (600) Body text: Regular (400) or medium (500) De-emphasized text: Light (300) or regular (400) with reduced opacity

Don’t use thin or ultra-light weights for text smaller than 24px. They become illegible.

Avoid using too many weights. Pick 2-3 weights and use them consistently.

Color Contrast

Color provides another hierarchy dimension. But remember: color alone shouldn’t convey information (accessibility requirement).

Typical hierarchy pattern:

Primary content: Near-black (#1a1a1a or similar)
Secondary content: Dark gray (#4a4a4a)
Tertiary content: Medium gray (#767676)
Disabled/placeholder: Light gray (#a0a0a0)

Always check contrast ratios. Text must meet WCAG requirements: 4.5:1 for normal text, 3:1 for large text (24px+ or 19px+ bold).

Space Contrast

Proximity creates relationships. Distance creates separation.

Headings and following text: Headings should be closer to the content they introduce than to the content above them. This groups them visually with their section.

h2 {
  margin-top: 3em;    /* Large gap from previous section */
  margin-bottom: 0.5em; /* Small gap to following content */
}

Paragraphs: Space between paragraphs should be roughly half the line height. This creates clear separation without feeling disjointed.

Sections: Major sections need significant space. This helps users mentally reset and signals a topic change.

Font Pairing: Combining Typefaces

Using multiple fonts adds richness and hierarchy. But pair poorly, and your design looks like a ransom note.

Pairing Principles

Contrast without conflict. Fonts should be clearly different but not jarring. A serif and a sans-serif is a classic pairing because the contrast is obvious but harmonious.

Similar proportions. Fonts with similar x-heights and widths feel related even if they’re different styles. Mismatched proportions create visual tension.

Shared characteristics. Look for subtle similarities. Maybe both fonts have geometric forms, or both have a warm, humanist feel. Something should connect them.

Limit to 2-3 fonts maximum. One for headings, one for body text, and optionally one for UI or special purposes (like monospace for code). More becomes chaotic.

Effective Pairing Strategies

Strategy 1: Serif headings + Sans-serif body

This is the most common pairing for good reason. The serif gives headings authority and distinction. The sans-serif keeps body text clean and readable.

Examples:

Merriweather (serif) + Open Sans
Georgia + System UI fonts
Playfair Display + Source Sans Pro

Strategy 2: Sans-serif headings + Serif body

Less common but works well for content-heavy sites. The clean headings provide structure while serif body text adds traditional reading comfort.

Examples:

Montserrat + Charter
Inter + Source Serif
Helvetica + Georgia

Strategy 3: Two weights of the same font

The safest approach. Use bold for headings, regular for body text. This maintains perfect harmony while creating clear hierarchy.

Works best with fonts that have excellent weight variety like:

Inter (9 weights)
Roboto (12 weights)
Work Sans (9 weights)

Strategy 4: Geometric + Humanist (both sans-serif)

Pair a geometric sans-serif (like Futura or Montserrat) with a humanist sans-serif (like Open Sans or Lato). The geometric font works for headings, the warmer humanist for body text.

Pairing Mistakes to Avoid

Too similar. Pairing fonts that are almost but not quite the same creates uncomfortable tension. If they’re that similar, just use one font.

Too different. A formal serif with a playful handwriting font feels schizophrenic. The personalities clash.

Too many fonts. Each additional font adds cognitive load and dilutes your hierarchy. Stick to 2-3.

Mixing display fonts. Display fonts have strong personalities. Using multiple display fonts creates visual chaos. Pick one for headlines, use a neutral font elsewhere.

Ignoring licensing. Not every font is free for web use. Always check licensing before implementing fonts.

System Fonts: The Smart Default

System fonts are the fonts built into operating systems. They’re often overlooked, but they’re actually excellent choices.

Why System Fonts Win

Zero load time. No font files to download. Pages load instantly. This matters more than you think. Font files can add 50-300kb to page weight.

Optimal rendering. Each system font is optimized for its platform. San Francisco looks perfect on Apple devices. Segoe UI is tuned for Windows ClearType. Roboto shines on Android.

Familiar to users. People see their system font everywhere. It feels natural and trustworthy. There’s no learning curve.

Maintained by experts. Apple, Google, and Microsoft employ top typographers to refine these fonts. They’re exceptionally well-crafted.

Implementing System Fonts

Use the system font stack in your CSS:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

This tells browsers to use:

San Francisco on Apple devices (-apple-system, BlinkMacSystemFont)
Segoe UI on Windows
Roboto on Android
Helvetica Neue on older Apple devices
Arial as final fallback

The result? Users get the best font for their device, and you get perfect performance.

Major sites using system fonts: GitHub, Medium, WordPress, Slack, and many others. They chose performance and familiarity over brand distinctiveness.

When to Use Custom Fonts Instead

System fonts are great, but sometimes you need something more distinctive:

Strong brand identity requires unique typography. If your brand personality is playful, quirky, or highly distinctive, system fonts might feel too neutral.

Specialized content like high-end fashion, creative portfolios, or artistic brands benefit from expressive typography.

Differentiation in crowded markets. If every competitor uses system fonts, a distinctive font choice helps you stand out.

Matching print materials. If your brand has established print identity, web fonts should match for consistency.

Just make sure the tradeoff (performance cost, potential rendering issues) is worth the benefit.

Web Font Performance

If you choose custom fonts, implement them efficiently. Fonts are often the largest files on a page after images.

Font Loading Strategies

Font-display property controls how browsers handle fonts while downloading:

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2');
  font-display: swap;
}

Options:

swap: Show fallback font immediately, swap when custom font loads. Can cause layout shift but ensures text is always readable.
fallback: Brief invisible period, then show fallback if custom font hasn’t loaded. Swap if it loads within ~3 seconds.
optional: Show fallback immediately. Only use custom font if it’s already cached. Prioritizes performance.

swap is usually the best choice. Layout shift is less jarring than invisible text.

Optimizing Font Files

Use WOFF2 format. It’s compressed and supported by all modern browsers. WOFF2 files are typically 30% smaller than WOFF and 50% smaller than TTF/OTF.

Subset fonts. Include only the characters you need. If your site is English-only, you don’t need Cyrillic or Greek characters. Tools like Glyphhanger can create custom subsets.

Limit font weights and styles. Each weight (regular, bold, light) is a separate file. Only include weights you actually use. If you never use italics, don’t load italic files.

Preload critical fonts. Tell browsers to prioritize your primary font:

<link rel="preload" href="main-font.woff2" as="font" 
      type="font/woff2" crossorigin>

Only preload fonts used above the fold. Preloading everything defeats the purpose.

Google Fonts Best Practices

Google Fonts is convenient but can be slow. Optimize it:

Limit font selections. Each font and weight adds a request and file size. Don’t load 5 weights if you only use 2.

Use display=swap:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">

Consider self-hosting. Download the fonts from Google Fonts and serve them from your own CDN. This gives you more control and eliminates the external request to Google’s servers.

Use variable fonts when possible. A single variable font file can replace multiple weight files. Not all Google Fonts offer this yet.

Responsive Typography

Type should adapt to different screen sizes and viewing conditions.

Fluid Type Scaling

Instead of fixed sizes at breakpoints, use formulas that scale smoothly:

body {
  /* Scales from 16px at 400px viewport to 18px at 1200px */
  font-size: calc(16px + (18 - 16) * ((100vw - 400px) / (1200 - 400)));
}

Or use CSS clamp for even more control:

body {
  /* Min 16px, preferred 1vw + 14px, max 22px */
  font-size: clamp(16px, 1vw + 14px, 22px);
}

This creates smooth scaling without managing multiple breakpoints.

Mobile Typography Considerations

Maintain or increase size. Don’t make text smaller on mobile. Small screens held at arm’s length need larger text than desktop monitors.

Reduce line length. Mobile screens have narrower viewports. Your max-width should ensure lines don’t become too short (under 40 characters).

Increase tap targets. Text links need adequate padding for thumb-friendly tapping. Minimum 44x44px touch target.

Simplify hierarchy. Extreme size differences might not work on small screens. Reduce the scale factor for mobile.

Dark Mode Typography

Dark mode requires different type treatment:

Reduce weight slightly. Bold text can feel too heavy on dark backgrounds. Drop from bold (700) to semi-bold (600) in dark mode.

Decrease contrast. Pure white text on pure black is harsh. Use off-white (like #e8e8e8) on near-black (like #121212).

Increase size minimally. Some designers bump font size by 1px in dark mode to compensate for reduced contrast. Test to see if this helps.

Accessibility Considerations

Typography accessibility goes beyond just color contrast.

Size and Scaling

Users must be able to zoom text to 200% without breaking layouts or losing functionality. This is a WCAG requirement.

Test your site at 200% zoom in your browser. Does text overlap? Do containers break? Does content disappear? Fix these issues.

Use relative units (rem, em, %) rather than fixed pixels for font sizes. This respects user preferences and browser settings.

Font Choices for Dyslexia

Approximately 10-15% of people have dyslexia. While no single font “fixes” dyslexia, some characteristics help:

Open apertures. Letters with generous openings (like in Comic Sans, actually) reduce confusion between similar characters.

Distinct character shapes. Clear differences between b/d/p/q, and between similar letters help.

Adequate spacing. Some researchers suggest increased letter and word spacing helps, though evidence is mixed.

Avoid all-italic text. Italics are harder to read for people with dyslexia.

Sans-serif fonts like Verdana, Arial, and Comic Sans test well with dyslexic readers. Specialized fonts like OpenDyslexic exist but aren’t universally preferred.

Most importantly: provide adequate line height, good contrast, and comfortable font size. These help everyone, including dyslexic readers.

Reading Order and Structure

Use proper semantic HTML. Headings should use h1-h6 tags, not just styled paragraphs. This helps screen reader users navigate your content.

Don’t skip heading levels. Go h1 → h2 → h3, not h1 → h3. Screen readers use heading structure for navigation.

Provide adequate spacing between sections. This helps users with attention difficulties track where they are in the content.

Testing Your Typography

Theory is great, but you need to validate with real usage.

Readability Tests

Five-second test: Show users a page for five seconds. What do they remember? If they can’t identify the hierarchy or recall key information, your typography needs work.

Reading comprehension: Have users read a section and answer questions. Compare different typographic treatments to see which aids comprehension.

Reading speed: Time how long it takes users to read a set passage. Faster reading (with maintained comprehension) indicates better typography.

Eye strain assessment: After 10 minutes of reading, ask users if they experienced eye strain or discomfort. Good typography should allow extended reading without fatigue.

A/B Testing Typography

Test different type treatments to see what performs better:

Font size variations: 16px vs 18px body text Line height variations: 1.5 vs 1.7 Font choices: Serif vs sans-serif for body text Heading sizes: Different scale ratios

Measure engagement (time on page, scroll depth, bounce rate) and conversions. Don’t assume larger text always wins. Test with your specific audience and content.

Cross-Platform Testing

Fonts render differently across:

Operating systems: Mac, Windows, iOS, Android all use different rendering engines Browsers: Chrome, Safari, Firefox, Edge have subtle differences Devices: Retina displays vs standard, phone vs tablet vs desktop Lighting conditions: Indoor office lighting vs bright sunlight

Test on actual devices, not just browser testing tools. A font that looks great on your MacBook might be hard to read on an old Windows laptop or a phone in sunlight.

Common Typography Mistakes

Even experienced designers make these errors. Avoid them.

Mistake 1: Text Too Small

12px or 14px body text is too small for comfortable reading. Use 16px minimum, 18px if your audience skews older.

Mistake 2: Insufficient Line Height

Line height below 1.4 makes text feel cramped and hard to read. Use 1.5-1.8 for body text.

Mistake 3: Lines Too Long

Text stretching full-width on large monitors is exhausting. Limit line length to 50-75 characters.

Mistake 4: Poor Hierarchy

When everything is bold or everything is large, nothing stands out. Create clear size, weight, and color distinctions between levels.

Mistake 5: Too Many Fonts

Using 4, 5, or 6 different fonts creates visual chaos. Stick to 2, maybe 3 maximum.

Mistake 6: Improper Font Pairing

Fonts that are too similar (causing confusion) or too different (causing clash) hurt your design. Pair with intention.

Mistake 7: Centered Body Text

Center-aligned paragraphs are hard to read. Reserve centering for short headlines or quotes.

Mistake 8: All Caps Body Text

ALL CAPS SLOWS READING SPEED BY UP TO 13%. Use for short headlines or labels only, never for paragraphs.

Mistake 9: Justified Text Without Hyphenation

Justified text without proper hyphenation creates awkward word spacing and rivers of white space through paragraphs.

Mistake 10: Ignoring Performance

Loading 8 font files in 5 different families tanks page speed. Optimize font loading and limit selections.

Quick Reference: Typography Checklist

Use this for every project:

Body text is 16px minimum – Larger if possible
Line height is 1.5-1.8 for body text – Adjusted for line length
Line length is 50-75 characters – Use max-width to control
Clear hierarchy – Size/weight/color distinctions between levels
High contrast – Text meets WCAG 4.5:1 minimum
2-3 fonts maximum – Paired with purpose
Proper HTML semantics – h1-h6 for headings, p for paragraphs
Responsive scaling – Maintains readability at all screen sizes
Optimized font loading – WOFF2 format, font-display: swap
Tested on real devices – Across platforms and lighting conditions

Frequently Asked Questions

What’s the best font for web body text? There’s no single “best” font. Inter, system fonts, Open Sans, and Georgia are all excellent starting points. Choose based on your brand personality and test with your audience.

How big should body text be? 16px minimum for comfortable reading on screens. 18px or larger is even better, especially for older audiences.

What’s the ideal line height for body text? 1.5 to 1.8 times your font size. Longer lines need more line height. 1.6 is a safe middle ground.

Should I use serif or sans-serif fonts? For web body text, sans-serif is generally more readable on screens. Serifs work well for headings or when you want a traditional, authoritative feel.

How many fonts should I use on my website? Two or three maximum. One for headings, one for body text, and optionally one for special purposes like code or UI elements.

Why do fonts look different on Windows vs Mac? Different operating systems use different rendering engines. Windows uses ClearType, Mac uses Core Text. Test your typography on both platforms.

Are Google Fonts slow? They can be if not optimized. Limit the number of weights you load, use display=swap, and consider self-hosting for better performance.

Conclusion

Typography is the foundation of communication on the web. Get it right, and users effortlessly absorb your content. Get it wrong, and they leave frustrated.

Key takeaways:

Readability always beats aesthetics – beautiful but unreadable is just unreadable
Size matters – 16px minimum for body text, with generous line height (1.5-1.8)
Line length affects comprehension – aim for 50-75 characters per line
Hierarchy needs contrast – 1.5x-2x jumps between levels using size, weight, and color
Limit fonts to 2-3 – more creates chaos
System fonts are excellent defaults – zero load time, optimal rendering
Test on real devices – fonts render differently across platforms
Accessibility isn’t optional – contrast, scaling, and semantic structure matter

The action you should take today: Audit your site’s body text. Is it at least 16px? Does it have 1.5+ line height? Are lines 50-75 characters? If not, fix these fundamentals before worrying about font selection.

Typography is a craft that rewards attention to detail. Master these principles, and your content will be a joy to read regardless of which specific fonts you choose.

Ready to combine your typography with effective visual hierarchy? Check out our guide on How Users Scan Websites: Eye-Tracking Patterns for Better Layouts, where we cover F-patterns, Z-patterns, and how to structure content for optimal readability.

References & Further Reading

“The Elements of Typographic Style” – Bringhurst, R.
Web Content Accessibility Guidelines (WCAG) 2.2 – W3C
“Stop Stealing Sheep & Find Out How Type Works” – Spiekermann & Ginger
Google Fonts Knowledge – Google
Butterick’s Practical Typography – Butterick, M.
“Thinking with Type” – Lupton, E.