What Font Weight and Size Is Best for Readability on Screens

For body text on screens, start at 16 pixels in a regular weight (400). Go larger for long reading, and avoid thin weights at small sizes. Then test it, because the right answer depends on the font and the screen.

Font size

• Body text: 16 pixels is the usual browser default and a good minimum. Long articles often read better at 17 to 20 pixels.
• Small text: captions and labels at 12 to 14 pixels are fine for short bits of text, not paragraphs.
• Headings: clearly larger than body text, often 1.25 to 2 times its size, depending on the level.
• Use relative units like rem in CSS, so text grows when readers increase their browser's font size. The px to rem converter does the math.

Font weight

• Regular (400) for body text.
• Medium (500) can help small text or light text on dark backgrounds.
• Semibold to bold (600 to 700) for headings and emphasis.
• Avoid thin and light weights (100 to 300) for body text. They look elegant in large headings but break up at small sizes, especially on lower-resolution screens.

Size vs weight

If text is hard to read, increase the size first. A heavier weight makes letters darker but also fills in their shapes, so it helps less than more size. Use weight for hierarchy (what's a heading, what's important) and size for readability.

How to test readability at different sizes

1. Google Fonts specimen pages let you type your own text and drag a size slider for any font.
2. Chrome DevTools: right-click text → Inspect, then change font-size and font-weight in the Styles panel and see the result on the real page.
3. The font size checker shows a size in px, rem and pt, with a live preview and a check against readability guidelines.
4. Read a full paragraph, not a single line, at your normal distance from the screen.
5. Test on a phone and a cheaper laptop screen, not just a high-resolution monitor.
6. Test in dark mode, where light text tends to look thinner and blurrier.

Learn from sites you find easy to read

Font Detector shows the font family, size and weight of any text you click, so you can see what a comfortable site actually uses and copy its settings.

Don't forget spacing and contrast

Size and weight only work with enough line spacing (about 1.5 for body text, see the line height calculator), a comfortable line length, and good contrast. More in how font size affects reading fatigue.