Line Height & Measure Calculator

Text is easier to read when lines are neither too long nor too tight. If a line carries more than about 75 characters the eye loses its place on the return to the next line, and if it carries fewer than 45 the reading rhythm breaks constantly. Line height has its own trade-off: too little makes lines collide, too much makes paragraphs fall apart. This calculator links the two choices so you can pick a column, see how many characters fit and copy the CSS.

From characters to pixels

The number of characters per line is the column width divided by the average width of one character. The page assumes 0.5 em per character, a common figure for text faces, so an 18 pixel font gives 9 pixels per character. A 66 character line is then 66 × 18 × 0.5 = 594 pixels, which is 33 em. Narrow typefaces fit more characters in the same width and wide ones fewer, so adjust the average width for your font; the field accepts values from 0.3 to 0.8 em.

A worked example

Press Sample for an 18 pixel font, 66 characters per line and a line height of 1.5. The page shows a column width of 594 px (33 em), 66 characters per line judged Ideal, and a line height of 1.5 (27 px). The CSS block reads font-size: 1.125rem; /* 18px */, line-height: 1.5; and max-width: 33em; /* about 66 characters */. Using em for the width keeps the column proportional to the text size, so enlarging the font enlarges the column and keeps the same count.

Choosing a line height

Body text between about 12 and 18 pixels suits 1.5, and the page suggests that value. For larger text the ratio can fall: 1.4 at 24 pixels, 1.2 at 40 pixels and 1.1 at 64, because large letters carry their own space. Long lines need more leading than short ones; very wide columns need above 1.5 to help the eye find the next line. Drag the slider from 1 to 2.2 and watch the paragraph, which uses real wrapping.

Snapping to a grid

Some designs align text to a baseline grid, for example 8 pixels. Enter the grid in the last field and the line height in pixels is rounded to a multiple of it. For 18 pixel text at 1.5 the natural height is 27 pixels, which snaps to 24 on an 8 pixel grid; the page then reports the ratio 1.333. A grid of 24 gives 24 as well, and a grid of 0 turns the snapping off.

Accessibility

WCAG 1.4.12 asks that content still works when a reader sets the line height to at least 1.5 times the font size, along with larger paragraph, letter and word spacing. Build text boxes that can grow: avoid fixed heights, clipped overflow and layouts that break when a line wraps one more time. A unitless line-height helps because it follows the font size when users enlarge text.

Edge cases

The count of characters is an estimate; real text with many wide letters such as m and w fits fewer, and text with many narrow ones fits more. Languages with long words need a wider column to avoid awkward breaks. Multi-column layouts and small caption text can use a lower count of around 30 to 40 characters. For code, use the width of a monospace character, which is about 0.6 em, in the average field.

Limits

The calculator does not measure your font, so it cannot be exact. It sets a single paragraph, not headings or lists. The verdict applies to continuous text in one column. Everything runs in your browser.

Related tools

• Type Scale Calculator chooses the sizes to space.
• CSS Clamp Calculator makes the size fluid.
• CSS Columns Generator splits long text into columns.
• Font Inspector shows the real metrics of a font.