Web Typography: How to Choose Fonts and Make Text Readable
Readable web typography comes down to four choices: a text size that is comfortable on every screen, lines that are neither too short nor too long, generous spacing between lines, and a small number of well-loaded fonts. Get these right and visitors read more of your page and trust it more.
Why typography decides whether people read
Most of a website is text. If it is small, cramped or hard to scan, visitors leave before they take in the message. Typography is not decoration. It is the part of design that makes content usable, and it is one of the cheapest improvements you can make to a site.
Text size and scaling
Browsers apply default text styles, and text wraps to the width of the screen. Because people hold a phone close and sit farther from a desktop monitor, smaller text can work on small screens and larger text on big ones. Body text should be comfortable to read without zooming.
- Use relative units that respect user settings, not fixed pixel sizes for everything.
- If you scale text with the width of the screen, never base it on the screen width alone, because that prevents users from enlarging the text. Combine it with a relative unit.
- Set a minimum and a maximum so text stays in a sensible range on very small and very large screens.
Line length
Print research suggests that about 45 to 75 characters per line works well, with around 66 often called ideal. Lines that are too long make it hard to find the start of the next one, and lines that are too short break the rhythm of reading. Set a maximum width for text blocks measured in characters, so the limit holds on every screen. This ties closely to the layout work in the responsive design guide.
Line height
Line height is the space from one line of text to the next. Shorter lines can take tighter spacing, and long lines need more. A unitless value, such as one and a half times the text size, scales along with the text, which is why designers prefer it to fixed units. Check paragraphs on a phone, because cramped lines are the most common reason text feels heavy.
Choosing fonts
- Use few fonts. One for headings and one for body text is enough for most sites. Two weights of the same family can do the job.
- Build a clear hierarchy. Headings, subheadings, body text and captions should differ in size or weight in a consistent way.
- Prefer clarity over style for long text. Decorative fonts are fine for a logo or a short heading.
- Consider system fonts. They are already on the visitor's device, so they load instantly.
Web fonts and speed
Fonts that you load from your site or from a font service add to loading time. Each added family and weight is another file. Use modern compressed font formats, load only the weights you really use and avoid adding fonts for a single word. Variable fonts can hold many weights and styles in one file, which often reduces the total download.
How a font loads also affects the look of the page. You can tell the browser to show a fallback font first and swap when the real one arrives, which avoids blank text but can make the layout move. Preloading important font files and choosing fallback fonts of a similar size reduce the jump. These details feed directly into loading and stability, as covered in the Core Web Vitals guide.
Test on real devices
- Read a long paragraph on your phone at arm's length.
- Look at the page in bright light and with the screen brightness lowered.
- Increase the text size in the browser and see whether the layout still works.
- Ask someone who has not seen the site to read the first screen aloud and note where they hesitate.
Typography and accessibility
Readable text is part of accessibility. Sufficient contrast between text and background is just as important as the font, and it is covered in the colors and contrast guide. Avoid very thin weights in small sizes, avoid all capitals for long passages and keep links visibly different from normal text.
A starting point for a small site
- Body text comfortable at arm's length on a phone.
- Lines of roughly 45 to 75 characters.
- Line height around one and a half times the text size.
- Two fonts at most, and no more than a few weights.
- Headings that are clearly larger than body text, in a consistent scale.
Common typography mistakes
- Light grey text on a white background. It looks elegant in a design file and is hard to read in daylight.
- Very long paragraphs. Break text into short paragraphs with clear subheadings so visitors can scan.
- Centered body text. Centered lines are fine for short headings, but long centered paragraphs are tiring to read.
- Too many sizes and weights. A page that uses a dozen styles looks disorganized. Pick a scale and stick to it.
- Text over busy photos. If text must sit on an image, add a plain overlay or choose a calm part of the picture.
FAQ
How many fonts should a website use?
Two is enough for most sites. More fonts add loading time and visual noise.
What is a good font size for body text?
One that is comfortable to read on a phone without zooming. Test it on a real device instead of trusting a number.
Are system fonts a good choice?
Yes. They load instantly and look familiar. They are a good option for body text on fast, simple sites.
Do fonts affect page speed?
They can. Every file adds load time, so use few fonts and weights, and load them efficiently.
What is a variable font?
A single font file that contains many weights and styles, so one download can replace several.
Your next step: open your longest page on a phone. If you have to zoom or lose your place, adjust text size, line length or line height, and test again.