Typography in Web Design: A Practical Guide

Good typography is invisible. You read the page without stopping at how letters look. Bad typography is constant noise that consumes your attention without you realizing why you're tired after 5 minutes on the site.

This article is a practical guide on typography for web in 2026: how to choose fonts, what scales work, font pairs that go together, performance considerations, and, important for Romanian market, how to verify diacritics support before choice.

Why typography matters in 2026

Moving from generic typography (Open Sans 16px) to one chosen for long reading (Geist Sans 17px with line-height 1.6) changes how long a reader stays with the page. The effect shows on forms too: a field that is easier to read is a field that is easier to fill in.

Typography is not just aesthetics. It's one of the most important factors in reading experience, which is the foundation of every site communicating text.

Font types: when which

Sans-serif

Fonts without serifs (Inter, Geist, Manrope, Helvetica, Public Sans, IBM Plex Sans). Modern, neutral, very readable on screen. Default for almost any digital site. Works for both body and headings.

2026 recommendations: Geist Sans (from Vercel, free, very modern), Inter (universal workhorse), Manrope (geometric, distinct), Public Sans (US Web Design System, very solid for admin/dashboard).

Serif

Fonts with serifs (Lora, Source Serif, Cormorant, Instrument Serif, Playfair Display). Traditional, formal, authority. More difficult on small screens but excellent for long-form content (blog articles, editorial sites).

2026 recommendations: Instrument Serif (spectacular italic, perfect for headlines), Source Serif (Adobe, very readable), Newsreader (Google, modern editorial), EB Garamond (refined classic).

Monospace

Fonts with fixed spacing (Geist Mono, JetBrains Mono, IBM Plex Mono, Space Mono, Fira Code). Technical, distinct. Used for code, but also as design accent (numbers, labels, product codes).

Recommendations: Geist Mono, JetBrains Mono, IBM Plex Mono.

Display

Extreme fonts, for large headlines and branding (Bricolage Grotesque, Migra, Boldonse, fluid variables with extreme weight). Never for body. Used economically for impact.

Considerations for international markets

Diacritics support

Verify before choice that the font has all diacritics for your target languages (Romanian: ă, â, î, ș, ț; correct with comma below for ș and ț, not cedilla).

Many "free" fonts on Google Fonts have correct diacritics. Many other premium fonts don't. Test letters with native text before buying license.

Fonts with excellent diacritic support

• Geist Sans and Geist Mono, correct diacritics, modern design
• Inter, universally good
• Manrope, verified
• Public Sans, perfect support
• Instrument Serif, beautifully drawn diacritics
• Source Serif Pro, Adobe quality
• Plus Jakarta Sans, popular 2024-2026, good support
• DM Sans, Google, very widespread

Fonts to avoid

Many system fonts on Windows and Mac have erased or incorrect diacritics. Times New Roman on Mac looks embarrassing for non-English Latin. Comic Sans (anyway) and most decorative free fonts from dafont.com have issues.

Font pairs that work

Convention: 1 font for display (headings), 1 for body, optionally 1 for accent (mono or italic).

The "modernist editorial" pair

• Display: Instrument Serif (italic)
• Body: Geist Sans
• Mono: Geist Mono

Used for editorial sites, premium blogs, creative brands.

The "tech startup" pair

• Display: Geist Sans (weight 400-500)
• Body: Geist Sans (weight 300-400)
• Mono: Geist Mono

Single font family for total consistency. Works for SaaS, dev tools, tech startups.

The "classic corporate" pair

• Display: Newsreader Bold
• Body: Inter
• Mono: IBM Plex Mono

Classic-modern mix. Works for consulting, finance, legal.

The "bold marketing" pair

• Display: Bricolage Grotesque ExtraBold
• Body: Plus Jakarta Sans
• Accent: Geist Mono

Works for agencies, creative brands, premium e-commerce.

Typographic scales that work

A typographic scale is a mathematical sequence of font sizes (ex: 12, 14, 16, 18, 24, 32, 48). Using a fixed number of sizes (6-8 max) creates visual consistency.

Recommended scale for web 2026

• Small text (caption, footer): 12-13px
• Body small (helper text, secondary nav): 14px
• Body default: 16-17px (16 minimum accessibility)
• Body large (lead paragraph): 18-20px
• H4: 20-22px
• H3: 24-28px
• H2: 32-40px
• H1: 48-64px (desktop), 36-44px (mobile)
• Large display (hero): 72-120px (only for landing, accent)

Recommended ratio: 1.25 or 1.333 between consecutive levels. Produces harmonious scale without abrupt jumps.

Line-height

• Display and H1: 1.0-1.1
• H2, H3: 1.2-1.3
• Body: 1.5-1.7 (1.6 default for long-form articles)
• Caption: 1.4-1.5

Letter-spacing

• Large display: -0.02em to -0.04em (tighter for impact)
• Body: 0 (browser default)
• Small caps (uppercase 9-11px): 0.05-0.15em (extra spacing for readability)

Performance: self-hosted vs Google Fonts

Why self-host in 2026

In 2022 a German Court established that Google Fonts served directly from fonts.gstatic.com violates GDPR (transmit user IP to Google). Since then, recommendation for sites targeting EU is self-hosting.

Plus: performance. Self-hosted = single round-trip to own server, with HTTP/2 push on header. Google Fonts = round-trip to fonts.googleapis.com for CSS, then round-trip to fonts.gstatic.com for woff2 file. With additional DNS lookup. Time-to-first-byte can be 200-400ms worse.

How to self-host correctly

• Download woff2 (only relevant 2026 format; woff and ttf are legacy)
• Subset font: only relevant characters (latin extended for European languages, avoid cyrillic if you don't serve those scripts)
• Serve with Cache-Control: public, max-age=31536000, immutable
• Preload in <head> with <link rel="preload" as="font" type="font/woff2" crossorigin>
• CSS font-display: swap to avoid FOIT (flash of invisible text)
• Max 2 families, max 4 weights total. More is bloat.

Variable fonts

2026 standard for modern fonts. A single woff2 file contains all weights (100-900) and optional italic. Significant transfer reduction (for example Inter Variable is 50KB for all weights vs 4×35KB = 140KB for 4 static weights).

Responsive typography

In 2026, fluid typography with CSS clamp() is standard:

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); }

This scales smoothly between 2.5rem (40px) on mobile and 5rem (80px) on very large desktop, without harsh breakpoints.

For body, keep 16-17px fixed on mobile and escalate to 17-19px on desktop. Fluid body is counterproductive (becomes too large on wide screens).

Frequent typographic mistakes

1. Too many weights, a site using Inter 300, 400, 500, 600, 700, 800 loads 6× the necessary font quantity. Pick 2-3 max.
2. Body text under 16px, WCAG violation, tires vision, sign of amateur design.
3. Justified text on narrow columns, produces space "rivers". Use text-align: left for body.
4. Line-height too small on body, under 1.5 makes text blocks illegible. 1.6-1.7 is sweet spot.
5. Lack of responsive scale, H1 80px looks ridiculous on mobile. Use clamp() or explicit media queries.
6. Italic for long paragraphs, italic is accent, not body format. Avoid long italic blocks.
7. All caps in paragraphs, reduces reading speed. Used only for short labels.

Conclusion

Good typography is a design decision that pays off long-term. The additional 2-4 hour investment in choosing right fonts, typographic scale, and performance setup produces sites that look professional and read pleasantly over years.

At DCL we choose typography as first design decision after palette, before layout. Our custom sites use self-hosted fonts, variable fonts where possible, rigorous typographic scales, and perfect support for Romanian diacritics. If you want a site with seriously done typography, contact us.