Website Typography: A Complete Guide for 2026
Website typography is the most underrated lever in web design. Get the type system right and a site reads as polished and professional before anything else registers. Get it wrong and even striking imagery cannot rescue the experience. The good news: typography is one of the few craft disciplines where the rules are well established and the upside is enormous. This guide covers the working playbook for 2026: typeface selection, scale, line height, fluid type, web font performance, and the accessibility floor every site needs to clear.
The principles below come from looking at how the highest-performing modern sites handle type, from Apple to Stripe to The New York Times to Linear. Across very different brands, the typography choices share a few habits: limited typeface count, deliberate scale, generous line height, and careful attention to the relationship between heading and body. Mastering those habits closes most of the gap between an amateur site and a professional one.
Choosing Typefaces
Two Typefaces, Maximum
The cleanest sites use one typeface for everything. The next cleanest use two: a display face for headlines and a workhorse face for body. Anything beyond that risks turning the site into a typographic mess. If a third face is genuinely needed, like a monospace for code, treat it as a specialized tool, not a third major voice.
Display vs Body Faces
Display faces are designed to be set large. They have personality, distinctive letterforms, and often loose spacing optimized for impact. Headers, hero text, large quotes. Body faces are designed for extended reading at small sizes. Tight spacing, neutral letterforms, generous x-height. Pair a display face with a workhorse body face for the strongest results.
System Fonts as a Default
System font stacks like the Apple system font, Segoe UI, and Roboto load instantly because they are already on the device. For text-heavy sites where speed matters more than brand distinction, system fonts are a perfectly defensible choice. The site loads faster, the text renders cleaner, and visitors do not wait for font files to download.
Web Fonts Worth the Weight
If the brand demands a custom typeface, use one of the modern variable fonts that ship multiple weights in a single file. Inter, Geist, Manrope, IBM Plex, and Recursive all offer wide weight ranges with small file sizes. Self-host fonts rather than serving them from Google Fonts to avoid third-party connection penalties.
Type Scale and Hierarchy
Pick a Modular Scale
A modular scale steps through type sizes by a consistent ratio. Common choices: 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Pick one ratio and stick to it. The result is a hierarchy where every size relates to every other size mathematically, which the eye perceives as harmony.
Practical Type Scale for 2026
Body text at 16 to 18 pixels. Step up by your chosen ratio for each level: 20, 24, 30, 38, 48, and 60 for hero headlines on a 1.25 scale. Step down for small text: 14 for captions, 12 for legal disclaimers. Most sites need only seven to eight type sizes total. Anything beyond that fragments the hierarchy.
Heading Levels
H1 reserved for the page title, used once per page. H2 for major sections. H3 for subsections within H2 blocks. H4 used sparingly when a section needs deeper structure. Skipping levels (H2 directly to H4) breaks accessibility and SEO. Use the right level even when visual styling is different.
Line Height, Length, and Spacing
Line Height for Readability
Body text reads best at line heights between 1.4 and 1.6 times the font size. Headlines need tighter line heights, often 1.1 to 1.25, because tighter spacing reads as more deliberate at large sizes. Captions and small text often need slightly looser line heights to compensate for reduced legibility. Tools like Lighthouse flag low line-height ratios that hurt readability.
Line Length
The classic guidance of 50 to 75 characters per line still holds. Longer lines force the eye to track too far, making it easy to lose place. Shorter lines force too many returns and feel choppy. Use max-width on body text containers to enforce the range, typically 65 characters as a target.
Letter Spacing
Default letter spacing usually works. Tighten slightly on large headlines (negative 0.5 percent to negative 2 percent letter-spacing) for a more deliberate feel. Loosen on all-caps small text (positive 5 to 10 percent letter-spacing) to compensate for the visual density of capital letters. Avoid manual letter spacing on body text.
Fluid Typography
The clamp() Function
Fluid typography scales smoothly between viewport sizes using the CSS clamp function. The pattern: clamp(minimum, preferred, maximum). For example, clamp(2rem, 4vw + 1rem, 4rem) renders headlines that grow with viewport width but never exceed 4rem. This eliminates the jarring jumps at breakpoints that older responsive type systems produced.
When to Use Fluid Type
Use fluid type for headlines and hero text where size dramatically affects impact. Use fluid type cautiously for body text, where a fixed 16 to 18 pixel size often reads better across devices than a fluid value. Captions and small text rarely benefit from fluid scaling.
The Math
Fluid type formulas can get tedious to write by hand. Tools like Utopia.fyi generate fluid scales automatically based on minimum and maximum viewport widths and type sizes. Plug in your numbers and copy the resulting clamp values. The tool also handles fluid spacing, which pairs naturally with fluid type.
Web Font Performance
Why Fonts Matter for Speed
Web fonts are render-blocking. If a font fails to load before content renders, the page either shows a flash of unstyled text (FOUT) or invisible text (FOIT) until the font arrives. Both hurt perceived speed. The slower the font load, the more painful the experience.
Format and Subsetting
Use WOFF2 format. It compresses 30 to 50 percent better than WOFF and is supported in every modern browser. Subset the font to only include the characters and weights actually used. A typical English-language site needs roughly 200 characters, not the full 2000-glyph set most fonts ship with. Subsetting alone can cut font payload by 60 to 80 percent.
Variable Fonts
Variable fonts pack multiple weights, widths, and styles into a single file. Instead of loading regular, bold, and italic separately (often three files of 30 to 40 KB each), one variable font file at 50 to 80 KB handles everything. The savings on multi-weight sites are significant.
Preloading
Use rel=preload in the document head to tell the browser to fetch critical fonts immediately. This shaves 200 to 500 milliseconds off the time to first content render on most sites. Combine with font-display: swap or font-display: optional to control how the browser handles font load timing.
Accessibility
Minimum Sizes
Body text at 16 pixels minimum on desktop and 14 to 16 pixels on mobile. Anything smaller fails for users with reduced vision and forces unnecessary zooming. The temptation to use 12 or 13 pixel text in footers and disclaimers should be resisted. Smaller does not mean less important. It means harder to read.
Contrast Ratios
Body text needs 4.5:1 contrast against the background. Large text (18 pixels regular or 14 pixels bold) needs 3:1. Test every text and background combination. Pure black text on pure white is fine, but light gray text on white is one of the most common accessibility failures.
Reading Order
Use semantic heading levels (h1, h2, h3) in order. Screen readers navigate by heading. Skipping levels or using headings only for visual styling breaks the experience. The visual order of elements should match the DOM order; CSS positioning that rearranges visual layout independent of DOM creates accessibility traps.
Typography in Modern Visual Builders
Modern visual builders handle type tokens as first-class concepts. Framer lets designers define a type scale, line heights, and font weights once and reference them throughout the site. WordPress with most premium themes can do similar work but often requires more setup and plugin discipline. The performance defaults differ significantly between platforms, as covered in Framer vs WordPress.
For a site where typography carries significant brand weight, a platform that ships variable fonts efficiently and supports fluid type natively saves real time. Examples that show typography done well live in the Framer website examples roundup. Pair this with the broader patterns in web design best practices for the full picture of how type fits into a complete design system.
Common Typography Mistakes
Too Many Typefaces
Three or more typefaces almost always fights itself. Pick two and live with the constraint.
Inconsistent Scale
A site with 12 different heading sizes feels chaotic even if each individual size is well chosen. Use a modular scale and stick to it.
Tight Line Height on Body Text
Line heights below 1.3 on body text feel cramped. The default browser line height of 1.2 was never designed for sustained reading.
Long Line Lengths
Body text spanning 100 or more characters per line is exhausting to read. Cap line length around 65 to 75 characters with max-width.
Default Browser Fonts on Premium Brands
Times New Roman and Arial fall short for premium brand presentation. If brand matters, invest in a real typeface and load it efficiently.
Frequently Asked Questions
How many typefaces should a website use?
Two is a strong default. One for headlines, one for body. Sometimes the same family used at different weights. A third typeface for code or specialized content can work if treated as a tool rather than a third voice. More than that almost always feels chaotic.
Are Google Fonts still the right choice?
Google Fonts is convenient but adds a third-party connection that hurts privacy and slightly slows performance. For most sites, self-hosting the font files produces faster results. Tools like google-webfonts-helper download the WOFF2 files, and modern build pipelines handle them efficiently.
What is the best font size for body text?
16 to 18 pixels for desktop and 14 to 16 pixels for mobile. Anything smaller fails for users with reduced vision. The trend toward larger body text (Medium uses 21 pixels, The New York Times uses 18) reflects growing awareness that smaller is not better.
Should I use serif or sans-serif fonts?
Both work for body text on screens. The old wisdom that serif is harder to read on screens has weakened with high-DPI displays. Pick based on brand voice rather than legibility concerns. Editorial brands often benefit from serif body text. Tech and SaaS brands tend to favor sans-serif.
Type Is the Foundation
Typography on the web is detail work that compounds. Typeface choice, scale, line height, and performance discipline add up to a site that reads well, ranks well, and feels professional. The investment is small and the return is large. If you want a partner who treats typography as a first-class design problem, see how our team handles type systems on every project.