Typographic scale and line height
Build a modular type scale, and get sensible line height and measure.
How it works
Generates a modular type scale from a base size and a ratio, and calculates line height and line length for readability.
The ratio is what makes a scale look deliberate. 1.25 (major third) is subtle and works for dense interfaces; 1.5 (perfect fifth) is dramatic and suits editorial layouts; 1.618, the golden ratio, is the most commonly cited and often too aggressive for anything with more than three levels.
Line height should fall as type size rises. Body text wants roughly 1.5; a 48px heading at 1.5 looks unacceptably loose and wants around 1.1. The relationship is inverse, which is why a single line-height value applied across a page always looks wrong somewhere.
Line length is the most under-rated readability factor. Research on reading comfort converges on roughly 45 to 75 characters per line, with about 66 as the frequently cited optimum. Longer lines make it hard for the eye to find the start of the next one; much shorter breaks the rhythm of reading.
This tool runs entirely in your browser. Nothing you enter is sent to a server, logged or stored, and the page keeps working with the network disconnected.
Common questions
- What line height should body text use?
- Around 1.5 for body copy. Headings want considerably less — roughly 1.1 by the time you reach 48px, because line height should fall as size rises.
- How long should a line of text be?
- Roughly 45 to 75 characters, with about 66 commonly cited as optimal. Beyond that the eye struggles to find the next line.
- Which type scale ratio should I use?
- 1.25 for dense interfaces, 1.333 to 1.5 for editorial. The golden ratio at 1.618 is often too aggressive once you need more than three levels.
Related pages
- Word and character counter Words, characters, sentences, paragraphs and reading time, counted as you type.
- Typing speed test Measure words per minute and accuracy on a one, two or five minute test.
- Remove duplicate lines Strip repeated lines from a list, keeping the first occurrence of each.
- Sort lines alphabetically Sort a list of lines A–Z, Z–A, by length, or numerically.
- JSON formatter and validator Pretty-print, minify and validate JSON, with the exact position of any error.
- Text compare Compare two blocks of text and see which lines were added, removed or changed.
- Regex tester Test a regular expression against sample text, with matches and capture groups shown.
- Case converter Convert text between upper, lower, title, sentence, camel, snake, kebab and other cases.
- Remove empty lines Delete blank lines from a block of text, optionally collapsing runs to one.
- Find and replace Replace every occurrence of a string in pasted text, with optional regex.
Sources
- Typical range compiled from manufacturer specifications — At One Place