Quick answer: Good web typography is mostly about readability. Choose one or two well made fonts with clear letter shapes, set body text around 16 to 18 pixels on most screens, use a line height of about 1.5, keep lines to roughly 45 to 75 characters, build a simple size scale for headings, and make sure text has strong contrast with its background. Load web fonts carefully so text appears quickly, and test everything on real phones as well as desktop.
Why typography affects results
Most of what people do on a website is read: headlines, product details, prices, form labels, buttons. If reading is tiring, people skim less, understand less and leave sooner. If it is easy, your message gets through.
Typography also sets tone. A heavy geometric sans serif feels different from a light, classic serif. That matters, but readability comes first. A distinctive font that is hard to read costs more than it adds. Clear words in clear type are the basis of conversion copywriting, not an extra.
Choosing fonts
Start with the job
Body text needs to be comfortable for long reading at small sizes. Headings can carry more personality because they are short and large. Interface text (buttons, labels, navigation) needs to be crisp and clear at small sizes.
Many sites use one family for everything, with different weights. Others pair a heading font with a body font. More than two families usually adds visual noise and extra loading time.
What makes a font readable on screen
Look for:
- A generous x-height (the height of lowercase letters), which keeps text legible at small sizes
- Open letter shapes so that a, e, c and s stay distinct
- Clear differences between similar characters, such as I, l and 1, or O and 0
- Several weights, at least regular and bold, plus italics for body text
- Good language support if you publish in more than one language
Both serif and sans serif fonts can work well on modern screens. Choose based on fit and quality, not on old rules that serifs are hard to read online.
Where to get fonts
Google Fonts offers a large free library that is easy to use. Commercial foundries and services offer more distinctive options with web licenses. Check the license covers web use and your expected traffic.
System fonts
A system font stack uses the fonts already on the visitor’s device, such as San Francisco on Apple devices and Segoe UI on Windows. Text appears instantly and looks native. The trade-off is less brand personality and slight differences between devices. For body text on content heavy or speed sensitive sites, it is a very reasonable choice.
Setting body text
Size
Body text around 16 pixels is a sensible minimum for most sites, and 17 to 18 pixels often reads better for long articles. Small body text is one of the most common problems on business sites, especially on mobile.
Set sizes in relative units such as rem, so text respects the visitor’s browser settings and scales consistently.
Line height
Line height (leading) of about 1.4 to 1.6 times the font size suits most body text. Too tight and lines blur together. Too loose and the eye loses its place moving to the next line.
Line length
Aim for about 45 to 75 characters per line on desktop. Very long lines make it hard to find the start of the next line. On wide screens, limit the width of the text column rather than letting paragraphs stretch edge to edge. A max-width around 65 to 70 characters (ch units are handy here) works well.
Paragraph spacing and alignment
Add space between paragraphs rather than indenting them. Use left aligned text for body copy. Justified text on the web creates uneven gaps between words because browsers do not hyphenate as carefully as print layout tools.
Building a type scale
A type scale is a set of sizes that relate to each other, such as body, small text and headings one to four. Using a scale keeps pages consistent and helps readers see the structure at a glance.
A simple approach: start with your body size and multiply by a ratio (for example 1.25) for each heading level. Reduce the ratio on small screens so headings do not overwhelm the page.
Keep these in mind:
- Headings should be clearly different from body text in size, weight or both
- Leave more space above a heading than below it, so it groups with the text it introduces
- Avoid all caps for long headings or body text, since it slows reading. Short labels in caps with a little letter spacing are fine.
Contrast and color
Text needs enough contrast with its background. The Web Content Accessibility Guidelines (WCAG 2.1) recommend a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. Light grey text on a white background is a common failure. It may look elegant in a design file but is hard to read in sunlight on a phone.
If you offer a dark theme, check contrast there too, and avoid pure white on pure black for long text, which some readers find harsh. Our guide to dark mode websites covers this in more detail.
Use color for meaning, such as links, but do not rely on color alone. Underline links in body text or make them clearly distinct.
Typography on mobile
More of your visitors read on phones than ever, so test there first.
- Keep body text at least 16 pixels to avoid tiny text and browser zooming on form fields
- Reduce heading sizes so long headlines do not break into many short lines
- Keep tap targets such as links and buttons large enough and spaced apart
- Check line length on tablets in both orientations
Small, hard to read text is a quiet conversion killer on mobile. See mobile conversion rate for related fixes.
Loading web fonts without slowing the site
Custom fonts are files the browser must download. Too many, or loaded badly, and visitors see blank space or a flash of changing text.
- Limit families and weights. Each weight and style is usually a separate file. Regular, italic and bold for body plus one heading weight is often enough.
- Use modern formats. WOFF2 is widely supported and smaller than older formats.
- Use font-display. Setting
font-display: swapshows a fallback font immediately and swaps in the web font when it loads, so text is never invisible. Google Fonts now supports this through a display parameter in the font URL. - Preload key fonts that are needed for the first view.
- Subset fonts to the characters and languages you need.
- Pick a similar fallback font so the swap does not shift the layout much.
- Consider variable fonts, which contain several weights in one file. Browser support is good in current browsers, but check your audience.
Icon fonts have their own performance and accessibility issues. Our guide to icon fonts and performance explains the alternatives.
A quick typography checklist
- One or two font families at most
- Body text at least 16 pixels, in relative units
- Line height around 1.5
- Line length roughly 45 to 75 characters
- A clear heading scale with sensible spacing
- Contrast that meets WCAG 2.1 ratios
- Links clearly distinguishable
- Fonts load fast with font-display set
- Tested on real phones
FAQ
Serif or sans serif for websites?
Either can work on modern screens. Choose a well made font with good x-height and clear letter shapes, and test it at your body size.
What is the best font size for body text?
Around 16 pixels at minimum, and often 17 or 18 pixels for long reading.
How many fonts should a website use?
Usually one or two families. More adds visual clutter and slows loading.
Do custom fonts hurt page speed?
They can. Limit weights, use WOFF2, set font-display and preload only the fonts needed first.
Make reading effortless
Good web typography rarely gets noticed. People just find the site easy to read and keep going. Choose readable fonts, set sensible sizes and spacing, check contrast and load fonts carefully. If you want help with a site that reads well and turns readers into customers, see Turn visitors into customers.
