Typography for Web: Font Selection and Optimization in 2027

Q: What is fluid typography?

Fluid typography uses clamp() to create font sizes that scale smoothly between a minimum and maximum based on viewport width. This eliminates the need for font-size media queries.[3]

Quick answer: For web typography in 2027, choose 1-2 font families (one for headings, one for body), use system fonts as fallbacks, prefer variable fonts for flexibility, set base font size to 16px (1rem), use a modular scale (1.25 or 1.333) for heading sizes, maintain line height of 1.5-1.6 for body text, and limit line length to 45-75 characters. Optimize with WOFF2, subsetting, and font-display: swap. Typography accounts for 90% of web design — get it right.[1][3][4]

Typography is the foundation of web design. It accounts for 90% of the visual hierarchy and directly impacts readability, user experience, and conversion rates. In 2027, with variable fonts and better browser support, typography optimization is more powerful than ever.

Font selection

Choosing font families

Limit to 2 families: One for headings, one for body text
Pair contrasting styles: Serif heading + sans-serif body, or vice versa
Consider readability: Body text must be highly legible at small sizes
Check licensing: Ensure fonts are licensed for web use
Test on real devices: Fonts render differently on different OS/browsers

Popular web-safe font pairings

Heading	Body	Vibe
Inter	Inter	Modern, clean
Playfair Display	Source Sans Pro	Elegant, editorial
Montserrat	Open Sans	Friendly, approachable
Roboto Slab	Roboto	Technical, professional
Poppins	Lato	Friendly, rounded

System fonts

For maximum performance, use system fonts:

css

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

Pros: Zero download time, native feel, excellent rendering.

Cons: Less brand differentiation, varies by OS.[3]

Font sizing

Base size

css

html { font-size: 16px; } /* Default, don't change */
body { font-size: 1rem; } /* 16px */

Never go below 16px for body text. Smaller text is hard to read on mobile and fails accessibility standards.[3]

Modular scale

Use a consistent ratio for heading sizes:

Minor Third (1.2):

Body: 16px (1rem)
H4: 19.2px (1.2rem)
H3: 23px (1.44rem)
H2: 27.6px (1.728rem)
H1: 33.2px (2.074rem)

Major Third (1.25):

Body: 16px (1rem)
H4: 20px (1.25rem)
H3: 25px (1.563rem)
H2: 31.3px (1.953rem)
H1: 39.1px (2.441rem)

Perfect Fourth (1.333):

Body: 16px (1rem)
H4: 21.3px (1.333rem)
H3: 28.4px (1.778rem)
H2: 37.9px (2.37rem)
H1: 50.5px (3.157rem)[3]

Fluid typography

css

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  /* Minimum 2rem, preferred 5vw, maximum 3.5rem */
}

body {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

Fluid typography eliminates the need for font-size media queries.[3]

Line height and spacing

Line height

Body text: 1.5-1.6 (24-25.6px for 16px font)
Headings: 1.1-1.3 (tighter for large text)
UI elements: 1.2-1.4

css

body { line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; }

Letter spacing

Body text: 0 (default, don't change)
Headings: -0.01em to -0.02em (tighter for large text)
Uppercase text: 0.05em to 0.1em (wider for readability)
Small text: 0.01em to 0.02em (slightly wider)

Paragraph spacing

css

p { margin-bottom: 1.5rem; } /* 24px for 16px font */

Line length (measure)

Optimal line length: 45-75 characters per line.

css

.content {
  max-width: 65ch; /* ~65 characters */
}

Too long: hard to track. Too short: choppy reading. Use ch unit for character-based width.[3]

Font optimization

1. Use WOFF2

css

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

2. Subset fonts

Include only needed characters (Latin, numbers, punctuation):

bash

pyftsubset font.ttf --text="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,!?-'" --output-file=font-subset.woff2 --flavor=woff2

3. Use variable fonts

One file for all weights/styles:

css

@font-face {
  font-family: 'VariableFont';
  src: url('font-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

4. Preload critical fonts

html

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

5. Use font-display: swap

Prevents FOIT (invisible text). Shows fallback immediately, swaps when loaded.[3][4]

Typography and accessibility

Readability

Contrast: 4.5:1 minimum for body text (WCAG AA)
Font size: 16px minimum for body text
Line height: 1.5 minimum for body text
Line length: 45-75 characters
Paragraph spacing: At least 1.5x font size

Dyslexia-friendly typography

Use sans-serif fonts (Arial, Verdana, Open Sans)
Avoid justified text (uneven spacing)
Increase letter spacing slightly
Use off-white backgrounds (reduce glare)
Left-align text (don't center long passages)[3]

Reduced motion

css

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Typography and performance

Performance budget

Metric	Budget
Total font size	< 100 KB
Font files	< 4
Font families	< 3
FOUT duration	< 300ms

Font loading strategy

Inline critical font CSS in <head>
Preload the primary font
Use font-display: swap for all fonts
Subset to reduce file size
Self-host for control over caching[3][4]

Frequently Asked Questions (FAQ)

What font size should I use for body text?

16px (1rem) minimum. This is the browser default and ensures readability on all devices. Never go below 16px for body text.[3]

How many font families should I use?

Maximum 2: one for headings, one for body text. More families increase load time and create visual inconsistency. Use weight variations within a family instead.[3]

What is a modular scale?

A modular scale is a set of font sizes based on a consistent ratio (e.g., 1.25). Each size is the previous size multiplied by the ratio. This creates harmonious typography.[3]

What is fluid typography?

Fluid typography uses clamp() to create font sizes that scale smoothly between a minimum and maximum based on viewport width. This eliminates the need for font-size media queries.[3]

Should I use Google Fonts or self-host?

Self-host for better performance (no third-party DNS lookup, full caching control). Google Fonts is easier to set up but adds a render-blocking request. For performance-critical sites, self-host.[3]

What is a variable font?

A variable font is a single file that contains multiple weights, styles, and widths. Instead of loading 4-8 separate files, you load one file that supports all variations. This reduces file size and HTTP requests.[3]

How do I choose a font pairing?

Choose contrasting styles: serif heading + sans-serif body (or vice versa). Ensure both fonts are legible at small sizes. Test on real devices. Limit to 2 families maximum.[3]

Does typography affect SEO?

Indirectly. Good typography improves readability (longer time on page, lower bounce rate). Poor typography (tiny text, low contrast) increases bounce rate. Typography also affects Core Web Vitals (font loading impacts LCP and CLS).[3][4]

Sources

[1] MDN Web Docs — CSS Fonts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts

[2] Google Fonts — Knowledge: https://fonts.google.com/knowledge

[3] MintSaaS Image Compressor: https://www.mintsaas.net/products/image-compressor

[4] Web.dev — Core Web Vitals: https://web.dev/vitals/

[5] MintSaaS PDF Compressor: https://www.mintsaas.net/products/pdf-compressor

Free tools on MintSaaS

Try our free tools to put this guide into practice: