Setting Line Length, Line Height, and Letter Spacing for Readable Measure in Print and on Screen

The most common mistake in setting continuous reading text is treating type size as the starting point. It is not. The measure comes first. Type size and line height follow from it. The durable relationship, stable since the metal-type era, is that line length in picas should be roughly twice the point size. Set ten-point text on a 21-to-24-pica measure and a 10/13 leading block will read comfortably at 60 characters per line. The range that matters is 45 to 75 characters per line, the measure Robert Bringhurst cited in The Elements of Typographic Style (1992, 4th ed. 2012). Outside that range, the eye loses its place.

Too narrow, below about 35 characters per line, and the hyphenation zone becomes a wasteland. Words break on nearly every line. The rag on the right edge turns violent. The reader's vertical rhythm is destroyed by constant returns. Too wide, beyond 80 characters, and the eye tracks back to the wrong line, the doubled-reading failure. The fix is not to adjust the reader's behaviour but to set the measure correctly. For justified text, tighten to 40-65 characters per line. For multiple-column text, where columns sit side by side, drop to 40-50 characters. This prevents the eye from jumping between columns.

Setting Measure for Screen

For screen, express the measure in the CSS ch unit so it scales with the font. The ch unit is the width of the "0" glyph in the current font. Set max-width: 65ch and the container width tracks the actual average character width of the typeface in use. A common failure is a fixed pixel width like max-width: 800px. On a large desktop monitor with a 20-pixel base font, that can push the measure past 90 characters per line. The CSS Values and Units Module Level 3 (W3C, 2019) endorses the ch unit for this purpose. A before/after: the same paragraph set at 90 characters per line forces the eye to double-read the same line. The saccade back to the left margin lands at the wrong line start. Corrected to 65 characters, the reader moves down one line each time without hunting.

The typographic measure rules are not a single magic number but a range with a hard ceiling. The 45-75 characters-per-line figure is the cited range in The Elements of Typographic Style. It has held for decades. It matches the average saccade length of the human eye. Below 45 characters, the line breaks too often. The reader's eye must make more fixations per word, slowing reading speed and increasing cognitive load. Above 75 characters, the return sweep to the left margin becomes error-prone: the eye lands on a line above or below the correct one, and the reader must back-track to find the right line. The evidence is in the reading itself. The eye can hold only a certain arc of peripheral vision. Wide measures exceed it.

Justified and Multi-Column Text

For justified text, the range tightens to 40-65 characters. Justification creates a hyphenation zone in the typesetting engine. A line too long gives that zone too much latitude, creating rivers of white space and large gaps between words. For multiple-column text, a magazine spread or a two-column website layout, use 40-50 characters per line. The reader's eye is more likely to jump to the adjacent column when lines are too long. Müller-Brockmann's Grid Systems in Graphic Design (1981) gave the measure in ems: 20-35 em for continuous text. That em-based figure transfers across font sizes without recalculating.

A Practical Check

Count the characters in a full line, not the words. Open a text editor, type a line of the body copy, and count. If it is under 35 or over 80 characters, per Ralf Herrmann's Typography Handbook (2011), you are outside the legibility range. At 35 characters per line, the line breaks too frequently. At 80, the eye loses the line. For mobile screens, Google Material Design 3 (2023) recommends 35-50 characters per line. For desktop, 50-75. The mobile range accounts for the shorter reading distance and the need to minimise horizontal eye movement on a small screen.

Leading, pronounced "ledding," from the strips of lead used in metal type to separate lines, is the vertical space from baseline to baseline in print, measured in points. It is not the same as line-height in CSS, which is a unitless multiplier. The distinction is not pedantic. It is the difference between a fixed measurement and a relative one. In print, leading is set absolutely: 10-point type on 13 points of leading is written 10/13. In CSS, the line-height property accepts a number that multiplies the font size, so line-height: 1.4 on a 16-pixel font produces 22.4 pixels of line height. The unitless multiplier is the correct choice in CSS. It inherits properly. A percentage line-height inherits the computed value, not the multiplier, causing nested elements to lock to the parent's line height rather than scaling with their own font size.

Failure Modes

The failure modes are opposite and equally damaging. Set leading too tight, below 1.2 times the font size, and descenders collide across lines. The tail of a "g" in one line touches the ascender of a "d" in the next. The text becomes a dense, unreadable block. Set leading too loose, above 1.8 times the font size, and each line reads as a separate block. The reader loses the vertical coherence that ties a paragraph together. Bringhurst's rule of thumb: line height should be proportional to the measure. His formula, h = 1 + (measure in em / 100), gives a 60-character measure a line height of 1.6, and a 75-character measure 1.75. That formula is the nearest thing to a universal vertical rhythm.

Spacing Ranges by Context

For body text, the range is 1.2-1.5 times the font size. Sans-serif faces need more leading than serif faces. Without the serifs to guide the eye, the lines need more separation: 1.4-1.6 for sans, 1.3-1.5 for serif. For extended reading, long-form articles, books, reports, push to 1.4-1.6. For narrow columns below 45 characters, 1.1-1.3 suffices. The reader is not making long saccades. For wide measures above 75 characters, increase to 1.5-1.8. The eye needs more vertical space to track back correctly. WCAG 2.2 Success Criterion 1.4.12 (W3C, 2023) sets a hard minimum of 1.5 times the font size for line height. This is not a recommendation but a failure threshold. Criterion 1.4.8 for AAA raises the bar with no explicit maximum, though anything above 2.0 is visually disconnected.

The letter-spacing CSS property is the digital equivalent of tracking in print, but it has its own failure modes. Tracking is the uniform spacing applied across a range of characters, measured in thousandths of an em. In CSS, the em-based unit is the scalable standard: letter-spacing: -0.005em tightens, 0.005em loosens. The range for body text is -5 to +5 thousandths of an em. Beyond that, the text either crowds until the counters close up, the "e" becomes indistinguishable from a "c", or the spacing becomes so loose that words read as unrelated clusters. The relationship is inverse to size. As the point size increases, tracking should decrease. Small text below 10 points needs more tracking, +5 to +10 thousandths of an em. The smaller the stroke, the more the ink spreads and the more the white space must compensate. Text above 14 points tightens the tracking by -5 to -10 thousandths of an em. The larger the letterforms, the more the negative space between them dominates.

Optical Size and All-Caps

The proportional relationship between tracking and type size is driven by the optical size of the typeface. OpenType Specification 1.9 (Microsoft, 2023) notes that smaller optical sizes require increased tracking. A font designed for body text will have different spacing needs at display sizes. When you enlarge a 10-point body font to 36 points, tighten the tracking manually. The font's optical size axis, if it has one, will not adjust automatically. For all-caps text, the tracking range jumps to +50 to +100 thousandths of an em, per Erik Spiekermann's Stop Stealing Sheep (1993, 3rd ed. 2014). Capitals have no ascenders or descenders to break up the line. Without extra letterspacing, a line of uppercase text becomes an unbroken wall of equal-height strokes. The exception is display type at large sizes, where tighter tracking works because the letterforms are distinct enough to be read individually.

Avoid Negative Tracking on Body Text

A common mistake: applying negative tracking to body text to save space in a layout. This fails. Text below 10 points needs the extra space, not less. WCAG 2.2 1.4.12 requires a minimum letter-spacing of 0.12 times the font size. That figure overrides the print-only tracking range of -5 to +5 thousandths of an em. Set the CSS property in ems so it scales with the font. A fixed pixel value like letter-spacing: 0.5px breaks when the font size changes. It does not respond to the user's zoom settings. The inverse relationship between size and tracking is why the same paragraph set at 11 points and 18 points needs different letterspacing values. The 18-point version can afford negative tracking. The 11-point cannot.

A readable column width is a matter of character count, not pixel count. The reason 60 characters per line is the default for body text is not arbitrary. It matches the average number of characters the eye can process in a single saccade before needing to move. Set the column width so the maximum line length falls within the 45-75 character range. That range is measured in characters, not in pixels, ems, or viewport width. The CSS ch unit exists precisely for this. max-width: 65ch sets a column width that tracks the font's average character width. When the user increases the font size, the column narrows automatically and the measure stays within range. A fixed pixel width like max-width: 600px is fragile. At 16-pixel base font, it yields roughly 37 characters per line, too narrow. At 20-pixel base, it yields 30 characters, a narrow, hyphenation-heavy column. The ch unit is the durable answer.

Failure Cases

The failure case for a column that is too wide is the doubled-reading effect. The eye reaches the end of the line, returns to the left margin, and picks up the same line again. The wide measure makes it harder to locate the next line's start. The failure case for a column that is too narrow is excessive hyphenation. The hyphenation zone becomes a larger fraction of the line, so more words break. The rag becomes so uneven that the column reads as a series of isolated words rather than connected text. Both failures are measurable. For justified text, the range drops to 40-65 characters. Justification introduces inter-word spacing that can create rivers of white space. A narrower measure limits the severity of that spacing. For multiple-column text, drop further to 40-50 characters. The eye is more likely to jump columns when the lines are close to the same length.

Measure and Line Height Together

The relationship between measure and line height is not sequential. It is interactive. A wider measure needs more leading to compensate for the increased horizontal distance the eye must travel. The typographic measure rules are a starting point, not a law, but the evidence is clear. Below 35 characters per line, reading speed drops. The eye must fixate more often. Above 80 characters, reading speed drops. The return sweep fails. The range in between is where readability lives. For screen, Google Material Design 3 (2023) recommends 50-75 characters per line on desktop and 35-50 on mobile, where the viewport width is narrower and the reader holds the device closer. The formula is the same. The viewport is the variable.

Leading in points is a print measurement that does not translate directly to the web. Confusing the two is how line-spacing failures happen. In print, leading is set absolutely: 10/13 means 10-point type on 13 points of baseline-to-baseline spacing, three points of leading. In CSS, the line-height property takes a unitless number, a percentage, or a length. The unitless number is the correct choice for body text. It inherits as a multiplier. A child element with a larger font size will use the multiplier against its own size, not against the parent's. A percentage, line-height: 150%, computes to a fixed length at the parent level. A child with a different font size inherits the computed pixel value, breaking the vertical rhythm. The distinction is not an implementation detail. It is the difference between text that scales cohesively and text that collapses into overlapping descenders or floats apart into separate blocks.

The Two Failure Modes

The failure modes are the mirror image of each other. Leading set too tight, below 1.2 times the font size, causes descender collision. The tail of a "g" touches the ascender of a "d" in the line below. This is not merely a visual annoyance. The colliding strokes create a moiré pattern that distracts the eye and slows reading. Leading set too loose, above 1.8 times the font size, causes the opposite. Each line reads as a separate block. The paragraph is perceived as a stack of unrelated lines rather than a continuous column of text. The reader's eye does not flow naturally. It stops and restarts on each line, destroying the rhythm that makes extended reading possible.

The Baseline Grid on the Web

The baseline grid is the print discipline that enforces consistent leading. In print, all text aligns to a repeating vertical interval, the baseline grid, so that adjacent columns and facing pages maintain a consistent rhythm. On the web, maintain the baseline grid by setting a consistent line-height on all text elements. Allow the vertical spacing to accumulate in multiples of that rhythm. The CSS vertical-align property matters here. Inline elements with a different font size or line-height can break the grid. Set line-height on the parent and let the child inherit, or use vertical-align: baseline explicitly. The formula from Bringhurst still holds: for any measure, the line-height should be the measure in ems plus one, divided by 100. A 60-character measure gets a line-height of 1.2, and a 75-character measure gets 1.75. This is not a law. It is a starting point, but it prevents the two most common line-spacing errors.

Accessibility research adds a non-negotiable floor to the typographic ranges. For readers with dyslexia, the standard ranges fail. The 45-75 characters-per-line measure is too wide. The 1.2-1.5 line-height range is too tight. Dyslexic readers benefit from a maximum of 60-70 characters per line, a line height of 1.5 to 2.0 times the font size, and a minimum letter-spacing of 0.12 times the font size. These figures are not optional enhancements. They are WCAG 2.2 Success Criterion 1.4.12 (W3C, 2023) requirements for conformance. The criterion states that line-height must be at least 1.5 times the font size, letter-spacing at least 0.12 times, and that the spacing must be overridable by the user agent. The CSS cannot be locked with !important or a fixed pixel height that prevents reflow. The 1.4.8 criterion for AAA raises the bar further, requiring the same minimums but with no maximum line-height. Many accessibility audits recommend 1.5-1.6 as the sweet spot for body text.

The Reflow Test

The failure case is specific. A site that passes a colour contrast audit can still fail WCAG if the text spacing is too tight. The criterion is not about aesthetics. It is about the ability to reflow. When a user zooms to 200%, a WCAG 2.2 requirement, the text must reflow into a single column and the line height must not collapse. A paragraph set with line-height: 1.1 will overlap at 200% zoom, making it unreadable. The browser's default line-height of approximately 1.2 is already below the WCAG minimum. Any site that does not explicitly set a higher value fails the criterion. The letter-spacing minimum of 0.12 times the font size also benefits non-dyslexic readers. It prevents the crowding effect that makes text look dense. It provides a buffer for the increased spacing needed on low-resolution screens.

Building In Accessibility From the Start

Build accessibility in from the start, not as an afterthought. The baseline grid in a CSS framework often needs adjustment. A line-height: 1.5 on a 16-pixel base font produces a 24-pixel line, a clean 1.5em rhythm. But the grid must be proportionally spaced. Each element's line-height should be a multiple of the base, or the vertical rhythm breaks. For dyslexic readers, the recommendation goes further: a maximum measure of 60-70 characters, not the 75-character ceiling for the general population. The increased letter-spacing and line-height require a shorter measure to maintain the same reading speed. The eye has more horizontal distance to cover per saccade if the measure is too long.

Every typographic decision has a failure case, and the failure cases are where the real teaching lives. Set the measure too narrow, below 35 characters per line, and the hyphenation zone becomes a daily occurrence on the right margin. The rag turns violent. Lines end at wildly different points. The reader's eye cannot track the column's left edge because the right edge is so ragged that it interrupts the visual flow. Reading speed drops. The eye must make more fixations per word. Set the measure too wide, above 80 characters, and the doubled-reading effect takes over. The reader reaches the end of a line, returns to the left margin, and does not know whether the next line begins with the first word of the previous line or the first word of the line below. The eye makes a saccade to the wrong line, reads a repeated word, and must back-track, halving the effective reading speed.

Line Height Failures

Line height fails similarly. Too tight, and descenders collide. Too loose, and the text separates into floating blocks. The WCAG 2.2 requirement is not a suggestion. It is a pass/fail criterion. A paragraph with line-height: 1.4 and letter-spacing: 0.05em may look fine on a 27-inch monitor but fail on a 4-inch phone screen where the user has zoomed in to 200%. The failure is measurable. The text overlaps, making it unreadable. The user cannot adjust it because the CSS is set with a fixed height. The fix is to use the unitless line-height and relative letter-spacing. The user's zoom and font-size preferences propagate through the cascade.

The Durable Takeaway

For the practitioner, the developer, marketer, or content writer who commissions design, the durable takeaway is the geometric relationship. Line length in picas equals twice the point size. The measure range is 45-75 characters. The line height grows with the measure. The formula h = 1 + (measure in em / 100) is not a law, but it is a starting point that prevents the most common errors. When in doubt, set the max-width to 65ch, the line-height to 1.5, and the letter-spacing to 0.005em. Then test at 200% zoom. The page's job is to be readable in the worst case, not just the ideal case.

The distinction between kerning and tracking, or letter-spacing in CSS, is the most common point of confusion in type work. Kerning is the proportional adjustment of space between a specific pair of characters. The 'AV' in 'AVery' or the 'To' in 'To' corrects the uneven optical space that results when a letter like 'A' has a diagonal side that creates a visual hole next to a vertical 'V'. Kerning is stored in the font's kern table, a set of pair-specific values that the type designer has manually adjusted. CSS exposes this via the font-kerning property, with the default set to auto, which lets the browser use the font's kerning data. The alternative is font-kerning: none, which disables pair-specific adjustments and relies on the glyph's advance width. For display type, kerning is non-negotiable. Without it, 'AV' looks like a large gap, and the word 'WAVE' has uneven spacing.

How Tracking Differs

Tracking, in contrast, is uniform spacing across a range of characters, the CSS letter-spacing property. It is not a replacement for kerning. It is a separate adjustment that applies equally to all characters in the selection. The two interact. Applying tracking to a text that already has kerning will preserve the kerning values and add tracking on top. The failure occurs when tracking is used to fix a kerning problem. Adding positive tracking to a headline to hide the 'AV' gap only draws attention to it. The correct order: first, ensure kerning is enabled, the browser default. Second, apply tracking for optical size adjustments. Small text needs more tracking. Large text needs less.

Metrics Kerning vs. Optical Kerning

The metrics kerning versus optical kerning distinction is a CSS-specific version of this. Metrics kerning uses the font's built-in kern table, the type designer's curated pair values. Optical kerning ignores that table and computes spacing based on the actual shapes of the glyphs. This can produce better results for fonts with poor kerning tables but worse results for well-crafted fonts. The choice is made by the CSS font-kerning: normal, metrics, versus font-kerning: optical, optical. For body text, metrics kerning is the correct choice. The font designer has tuned the values for small sizes. For display type, optical kerning is often better. The larger size reveals the designer's compromises. The wrong choice causes uneven spacing that is visible at large sizes. The 'A' and 'V' gap looks huge next to a tight 'TO' pair.

Mobile viewports are the most hostile environment for typography. The measure is constrained by the physical width of the device, not by the designer's choice. A 375-pixel-wide phone at 16-pixel base font has a maximum of roughly 23 characters per line if the text spans the full width. That is far below the 45-character minimum for readable continuous text. The solution is not to shrink the font. Set a max-width on the text container and let the measure stay within range. The CSS ch unit is the tool. max-width: 45ch on a mobile-first layout ensures that even a narrow viewport does not force a line length below the minimum. But the mobile range is 35-50 characters per line, not 45-75. The eye-to-screen distance is shorter. The reader can move the phone, not the eye.

The Horizontal Scroll Failure

The failure case is a desktop layout that has not been made responsive. A fixed max-width: 800px container on a 375-pixel viewport will overflow horizontally. The user must scroll left and right to read each line. The horizontal scroll is the most jarring reading experience on mobile. It breaks the line length completely. The viewport width no longer constrains the measure. The fix is a fluid grid that uses min-width: 0 on the text container and a percentage-based width that respects the viewport. WCAG 2.2 Success Criterion 1.4.10 requires that text reflows to a single column at 320 CSS pixels wide without horizontal scrolling. Most fixed-width layouts fail this test.

The Mobile Measure Range

For mobile, the optimal measure is not a fixed character count but a range that respects the viewport's physical size. Google Material Design 3 (2023) calls for 35-50 characters per line on mobile. This is achievable with a max-width: 75% of the viewport, leaving generous margins. The margins are not decorative. They are the variable that keeps the measure within range. The typographic principle is the same as print. The measure must be set by the content, not the screen.

The true test of a typographic system is not how it looks at 10am on a 27-inch monitor with a perfect font rendering engine. It is how it holds up at 1am on a 4-inch screen with a subpar LCD panel and a user who has not slept. That is the failure case. The line height that looked elegant at 2.0 in a design tool collapses to a dense wall of text when the browser substitutes a fallback font with different metrics. The letter-spacing that tightened the headlines to a modern look becomes a string of overlapping letters when the font is rendered at a different optical size. Test with the actual content, at the actual viewport, and with the actual font, not just the recommended one.

Concrete Failure Modes

The failure modes are concrete. Descender collision happens when line-height is below 1.2. The text becomes unreadable, but the browser does not flag it. Separate-block reading happens above 1.8. The text becomes a list of floating lines. The widow, a single word on a line at the top of a column, and the orphan, a single line at the bottom, are preventable with a text-wrap: balance property, but that property is not yet universally supported. The rag, the uneven right edge of left-aligned text, is a symptom of too narrow a measure. The fix is not to justify the text but to widen the column. The baseline grid is the only tool that keeps adjacent columns aligned. It is the first thing a design system drops when time is short.

The Fallback Combination

If the normal route fails, the font does not load, the line-height inherits incorrectly, the inline element breaks the grid, the fallback is to set explicit values. Use line-height: 1.5 on the body, letter-spacing: 0.005em on paragraphs, and a max-width: 65ch on the main content. That combination passes WCAG 2.2. It reads well on any viewport. It survives a fallback font. Anything less is a risk.

The Flesch-Kincaid grade level is a metric that computes reading difficulty based on average sentence length and average syllables per word. A grade level of 8 means an eighth-grader can understand it. A grade level of 12 is a college level. The score is useful as a rough gauge, but it says nothing about typography. It measures the text's vocabulary and syntax, not the line length, line height, or letter-spacing. A paragraph can score a perfect 6th-grade level and still be unreadable if the measure is 100 characters wide or the line height is 1.1. The score is a diagnostic tool, not a design spec.

The evidence for the 45-75 character measure is partly based on reading studies that measure saccade length and fixation duration. The Flesch-Kincaid score is a poor proxy for those. Use the score as a sanity check. If a page aimed at a general audience scores at the 12th-grade level, the sentence structure is likely convoluted, regardless of the typography. But a high score does not make bad typography good. It only makes long sentences harder to read. The two are orthogonal.

In practice, the Flesch-Kincaid score is used by content writers to gauge whether their prose is clear, but it is not a typographic metric. The measure of readability is the reader's ability to read continuously without re-reading lines. The score cannot measure that. When a typography article mentions Flesch-Kincaid, it is usually to debunk the idea that a high readability score compensates for poor line length or leading. It does not.

1. What is the ideal line length for body text on a website? The ideal range is 45-75 characters per line, measured using the CSS ch unit. For mobile, drop to 35-50 characters; for desktop, 50-75. Set max-width: 65ch on the content container to stay in range.
2. What is the difference between leading and line-height? Leading is a print measurement in points from baseline to baseline (e.g., 10/13). Line-height is a unitless CSS multiplier (e.g., line-height: 1.5). Use the unitless value in CSS so it inherits correctly.
3. How much letter-spacing should body text have? For body text, keep tracking between -5 and +5 thousandths of an em (CSS letter-spacing: -0.005em to 0.005em). WCAG 2.2 requires a minimum of 0.12em for accessibility.
4. Why does my text overlap when a user zooms to 200%? It fails WCAG 2.2 criterion 1.4.12. The line-height drops below 1.5. Set line-height: 1.5 on body text and ensure letter-spacing is at least 0.12em to allow reflow.
5. What is the best unit for a readable column width? Use the ch unit because it scales with the font's average character width. A fixed pixel width (e.g., max-width: 600px) does not adapt when the user changes font size or zoom.
6. How does line height change with measure? The formula is h = 1 + (measure in em / 100). For a 60-character measure (about 1.2 em), line-height is 1.2; for 75 characters, 1.75. Increase line-height as the measure widens.
7. Is justified or left-aligned text better for readability? Left-aligned (with a rag) is safer because justified text can create rivers of white space. If you must justify, use a measure of 40-65 characters and enable hyphenation to control the gaps.

The most common mistake in setting continuous reading text is treating the type size as the starting point, when the measure comes first and the type size follows from it, and the durable relationship is that line length in picas equals twice the point size.