Readability Type Preview – Test Font Size and Line Height

Use the free Readability Type Preview below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.

Why Some Text Feels Easy and Some Feels Like Work

Reading comfort is mostly a matter of three numbers: how big the letters are, how much space sits between lines, and how long each line runs. Get them right and readers glide through your page without noticing the typography at all. Get them wrong and readers tire, lose their place and leave, even when the words themselves are good. The tool above lets you test all three on real text and see the measurement behind the feeling.

The key measurement is characters per line. Research and practice both point to roughly 45 to 75 characters per line for body text. Below 45, the eye jumps to a new line too often and the rhythm breaks. Above 75, the eye struggles to find the start of the next line, and readers re-read lines or skip them. The tool estimates this number live as you drag the sliders.

Font Size: Bigger Is Usually Better

For body text on screens, 16 pixels is the floor, not the goal. Many readers, especially on phones and older eyes, read more comfortably at 18 or 19 pixels. Larger text also helps in bright rooms and on small screens. If your design feels cramped, raise the font size before you change anything else, then re-check the characters per line, because bigger letters shorten each line.

Headings are a different job. They need to stand out, but a heading set too large forces line breaks in odd places and pushes content down the page. A good heading scale grows in clear steps from the body size, which is exactly what a modular scale calculator is for. Keep body size steady across a site and let headings do the varying.

Line Height: Give Lines Room to Breathe

Line height, also called leading, is the space between lines. A value of 1.5 means each line gets one and a half times the font size of vertical space. For body text, 1.5 to 1.7 usually feels comfortable. Below 1.4, lines crowd each other and descenders tangle with the line below. Above 1.8, lines drift apart and the paragraph stops feeling like one block.

Line height interacts with line length. Long lines need a little more leading, because the eye travels further back to the next line. Short lines can take slightly tighter leading. When you change one setting in the tool, watch the others: a comfortable combination matters more than any single perfect number.

Line Length: The Column Width Decision

Line length is set by the column width, and it is the setting designers most often get wrong. Full-width text on a wide monitor can run to 150 characters per line, which is exhausting. The fix is a maximum width on the text column, typically 560 to 700 pixels for body text, even on large screens. The empty space on either side is not wasted: it is what makes the text readable.

On phones the problem reverses. Narrow screens naturally give short lines, so a 16-pixel font can feel choppy. Raising the font size slightly on mobile, or allowing the column to use the full screen width, restores a comfortable line length. Test your settings at phone width, not just on desktop.

Putting It Together

A reliable starting point for articles is 18-pixel text, 1.6 line height and a 600-pixel column, which lands near the middle of the ideal character range. From there, adjust for your audience and your font: narrow fonts can take a wider column, wide fonts need a narrower one. Use the tool to find your combination, copy the CSS, and apply it consistently. Readers will not praise your line height, and that is the point: comfortable typography is invisible, and invisible typography keeps readers on the page.

Related tools

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top