A text block is a coupled system. Width, type size, line height, and content all affect wrapping and return to the next line.
By the end: adjust a text block without confusing a heuristic with a universal reading optimum.
Follow the return to the next line
Very narrow columns create many line breaks and can break phrases into short fragments. Very long lines require a longer return to the next line's start. Line height supplies separation between lines, but excessive spacing can weaken their connection. The useful compromise depends on the font, content, reader, and display.
Measure is the width of a text column. Designers sometimes describe it in characters, but proportional characters have different widths. CSS ch is based on the advance width of the zero glyph, not a promise that every line contains exactly that many characters. Spaces, punctuation, and word lengths determine actual wrapping.
Separate the width budget from the line budget
A paragraph uses space in two directions. Across the page, the browser fits successive words until the next word would exceed the available width. Down the page, it places another line box for the words that remain. A wider column can reduce the number of lines without changing any words. A larger line height can increase the block's height without changing any breaks. These are different operations, so first decide whether the obstacle is excessive wrapping or insufficient separation between existing lines.
Consider a deliberately simplified paragraph that occupies six lines at a nominal line height of 27 CSS px. Six times 27 gives a 162 px line-box budget. Suppose a wider container lets exactly the same words occupy four lines. Four times 27 gives 108 px, a reduction of 54 px. These counts are assumed for the arithmetic, not predictions for the specimens below. Actual wrapping depends on word widths, available break points, and the font that the browser actually uses.
Now keep those four lines and increase line height from 27 to 32.4 px. The budget becomes 129.6 px. This adds 21.6 px without returning to six lines. Dividing 32.4 by the unchanged 18 px font size gives a unitless line height of 1.8. Neither 129.6 nor 162 measures the exact outer ink bounds. Font metrics and paragraph margins also affect the rendered block. The calculation isolates the repeated line-height contribution rather than pretending to measure every visible edge.
The first comparison below keeps the passage and font constant while changing the column's maximum width. Look for a word that moves onto a different line, then follow the next few words. A break changes the composition of two neighboring lines, not merely the total height. A short final line can result from one moved word. That outcome alone does not justify editing the sentence or inserting manual breaks, because another width or fallback font may move it again.
One passage, two maximum widths
Maximum 18ch
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
Maximum 30ch
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
Only maximum width changes, from 18ch to 30ch. Both samples use 18 px sans-serif text and line height 1.5. Panel width may cap either request; line counts are actual browser results, not assigned values.
The second comparison holds the maximum width constant and changes line height. Check whether the line endings remain the same before comparing vertical separation. If they do, the additional height comes from line spacing rather than different wrapping. This is useful when diagnosing a crowded paragraph beside a spacious one. If both width and spacing changed, apparent improvement would describe the combined treatment. You would need another comparison to identify which setting caused the particular difference you noticed in the text.
One measure, two line heights
22ch, line height 1.2
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
22ch, line height 1.8
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
Both passages request 22ch at 18 px. Nominal line heights are 21.6 and 32.4 px. With the same available width, line endings should agree while the second block allocates more vertical space.
A width that suits this short entrance notice may be unsuitable for an article containing long quotations or technical names. Narrow columns can keep an action near its explanation but split a sentence into many fragments. Broad columns can preserve a phrase but separate the right end of one line from the next line's left start. Those are geometric consequences. Whether either arrangement causes reading errors requires evidence from readers and tasks, not a formula that converts column width into a success probability.
Change one relationship at a time
Compare the same paragraph under two treatments. Keep the reference visible while changing the selected maximum width or line height. A line height of 1.5 at 18 px gives a nominal 27 px line-box height. It does not mean 27 px of empty space between the inked letters.
This compact comparison uses short columns so both remain readable on a tablet. It is not a recommendation that long-form articles use these exact measures. The requested maximum width can be capped by the available panel width. Actual line breaks are browser-rendered, not predicted from a fixed characters-per-line formula.
Read the settings without mistaking them for measurements
A maximum width is a ceiling, not a promise of occupied space. Imagine a text element requesting at most 300 CSS px inside a panel with only 240 px of usable width. It cannot use the full request without overflowing, so an ordinary constrained layout gives it the smaller width. Raising its maximum to 340 px changes nothing while the panel remains 240 px wide. This explains why a width adjustment can be real in the settings but invisible in the rendered comparison.
The same distinction applies to the lesson's ch control. Suppose, only for a numerical example, the font's zero glyph has an advance of 9 px. A requested maximum of 22ch then corresponds to 198 px, while 30ch corresponds to 270 px. In a panel allowing only 240 px, the second request stops at 240. These hypothetical zero advances are not measurements of your installed font. The specimens use browser layout, so inspect their actual line endings instead of assuming the conversion.
Advance is the horizontal distance allocated as the next character is placed. It is not the outline width of the painted character. In a proportional face, several lowercase i characters can use much less width than the same number of uppercase W characters. The comparison below gives both runs the same 18ch maximum. Their different occupied widths do not contradict that maximum. It describes a container derived from zero advances, not a rule making all eighteen characters equally wide in the font.
Equal character counts need not occupy equal widths
Eighteen lowercase i characters
iiiiiiiiiiiiiiiiii
Eighteen uppercase W characters
WWWWWWWWWWWWWWWWWW
Each run contains eighteen characters inside an 18ch maximum, with the same proportional sans-serif face at 18 px. The boundary describes available width, not a character-count guarantee. Wrapping or unused space depends on the installed font.
Nominal font size also differs from visible ink height. At 18 px, one face can have a taller lowercase body or deeper descenders than another. A 27 px line box therefore does not imply exactly nine pixels of visible blank space. Even within one face, a line of capitals differs from a line containing accents and descending letters. The static spacing specimens retain one family and passage so that a new font's metrics do not become an unacknowledged second change.
A fixed pixel line height and a unitless multiplier respond differently when font size changes. With 18 px text, both 27 px and 1.5 produce the same nominal height. If text becomes 24 px while the fixed value stays 27 px, the ratio falls to 1.125. The unitless value instead produces 36 px. This does not make every pixel value wrong. It identifies which relationship stays constant when text grows and explains why an unchanged box can become crowded after enlargement.
Read the growth comparison by pairing each size with its stated line height. The enlarged text is real text, not a scaled screenshot. Look at the descenders and the next line's capitals, then compare the overall blocks. The examples illustrate allocation, not a platform-independent ink measurement. Generic sans-serif fonts vary between systems, and zoom changes the mapping of CSS pixels to display pixels. Repeating the inspection elsewhere may change line breaks without changing any of the stated CSS relationships.
Larger text with fixed or proportional line height
24 px text, 27 px line height
A visitor enters through the west door. Bring your booking confirmation.
24 px text, line height 1.5
A visitor enters through the west door. Bring your booking confirmation.
Both samples use the same words at 24 px and request 22ch. The left line height stays at 27 px, giving a ratio of 1.125. The right uses 1.5, giving 36 px. No fixed height clips either sample.
Inspect the relationship
Compare actual wrapping, not a character-count estimate
Fixed reference
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
Selected text block
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
Requested maximum 22ch; nominal line-box height 28.8 px. Actual width may be smaller.
Identical text, 18 CSS px, and one font in both panels. Reference maximum width is 26ch and line height 1.5. Each control changes only its named setting; widths are capped by panel space. These short comparison columns are not a long-article recommendation. There is no fixed height or hidden overflow.
Explore width and spacing as separate changes
Use the existing comparison above to ask a narrow question before judging the whole block. Set Selected maximum measure to the Narrow preset of 18ch and select Reference spacing at 1.5. The fixed reference stays at 26ch and 1.5. Predict whether the selected paragraph will need more lines, then compare the actual endings. If the panel constrains both to the same width, similar wrapping is a possible result. It would show that the available panel space limits this particular comparison.
Next choose Wider at 30ch without changing line height. Find the sentence beginning with Booking in both panels. Does it begin partway along a line or at the left edge? Follow that sentence to its period and compare where the following sentence starts. This examines how wrapping divides a meaningful instruction. It does not require counting characters or timing your reading. If the two widths look identical, inspect whether the panel ceiling explains why the larger requested maximum cannot be used.
Return to Middle at 22ch and keep that measure unchanged. Compare Close lines at 1.2 with Open lines at 1.8. At the fixed 18 px font size, these correspond to nominal heights of 21.6 and 32.4 px. Each line receives 10.8 px more height in the second state. Predict unchanged line endings before switching, then verify them. If you are comparing sequential states, use the simultaneous reference to keep track of the common passage rather than relying on a remembered overall impression.
Suppose you prefer the wider, more open state. That preference does not establish that each individual change helps. You may prefer fewer breaks but dislike the extra height, or prefer separation while finding the longer return awkward. Restore the middle width and change only spacing, then restore reference spacing and change only width. These comparisons let you describe which visible consequence you are responding to. They still do not establish a general reading-speed advantage, because no reader performance is measured here.
A combined change does not isolate either setting
18ch, line height 1.2
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
30ch, line height 1.8
The studio opens at two. Enter through the west door and leave the passage clear. Booking is required because places are limited. Bring your confirmation to the desk.
The left requests 18ch at line height 1.2; the right requests 30ch at 1.8. Both use the identical 18 px passage. Width and spacing change together here, unlike the separate comparisons above.
The worked arrangement below applies that distinction to a short instruction beside a separate reminder. The same words appear in both treatments. One places the entire instruction in a narrow column; the other allows a broader measure and keeps the reminder as a distinct block. Compare the phrase west door and the booking requirement before judging the overall silhouette. A more compact total shape is not automatically clearer if it detaches a condition from the action it limits or makes a crucial phrase harder to follow.
Preserve a complete instruction and its reminder
Maximum 18ch
Enter through the west door. Booking is required. Bring your confirmation to the desk.
Keep the passage clear.
Maximum 30ch
Enter through the west door. Booking is required. Bring your confirmation to the desk.
Keep the passage clear.
Each treatment contains exactly the same instruction and reminder at 18 px. The maximum measure changes, while both allow content height to grow. Compare phrase breaks rather than interpreting total height as a quality score.
For a transfer task, imagine the entrance changes to a longer official name while every other fact remains. Do not solve that hypothetical by inventing a shorter address. Predict which block would gain lines first and where additional height would be needed. Then use the existing width slider to approximate the effect of less available room while keeping the original passage. This explores sensitivity to width, not actual translation or name-length testing. The distinction matters because changing content and changing space can produce different breaks.
Allow reader adjustments
WCAG's text-spacing criterion concerns whether content survives user overrides. It includes line height at least 1.5 times the font size, paragraph spacing at least twice the size, letter spacing at least 0.12 times, and word spacing at least 0.16 times. These are override test settings, not mandatory default typography for every language.
Fixed-height text boxes can clip content after spacing changes or translation. Let ordinary prose grow vertically. A successful visual comparison does not establish screen-reader behavior, comprehension, or conformance for a whole site. Verify those separately with appropriate methods and users.
Let adjusted text move its neighbors
Text expansion is a layout event. When a paragraph gains height, content below it needs a new position. A container with automatic height can allocate that space; a fixed-height region may leave the extra lines outside its boundary. Hiding that overflow makes the rectangle look tidy while removing information. Showing the overflow without moving neighbors can put the extra sentence over another element. Neither outcome repairs the allocation. The relevant question is where the newly required space comes from and which neighboring content must move.
Take an assumed four-line instruction at 18 px and line height 1.2. Its nominal line-height budget is 86.4 px. Increasing line height to 1.5 raises that budget to 108 px even before word or letter spacing changes wrapping. A box designed around 90 px has only 3.6 px spare initially but is now 18 px short. This is a constructed budget, not a prediction of the rendered example. Padding, borders, paragraph margins, and font metrics need their own allowance in an actual component.
WCAG 2.2 Success Criterion 1.4.12, Text Spacing, checks a particular kind of adaptation. For 18 px text, its stated override settings correspond to at least 27 px line height, 36 px spacing following paragraphs, 2.16 px letter spacing, and 2.88 px word spacing. Multiply each specified factor by eighteen to obtain those values. Apply the properties together when testing the criterion. A paragraph that survives line-height changes alone may still wrap into additional lines when letters and words receive more space.
These are override conditions, not a command to give every authored paragraph those defaults. The criterion has an exception for languages and scripts that do not use one or more of these properties. It also does not require a built-in spacing control. Our reading widget changes maximum measure and line height only, so it cannot by itself perform this full spacing test. The static comparison below demonstrates all four properties in ordinary flowing text without claiming to test the whole library or every writing system.
Four spacing properties applied together
Authored spacing example
Enter through the west door. Booking is required. Bring your confirmation to the desk.
Keep the passage clear.
Specified spacing overrides
Enter through the west door. Booking is required. Bring your confirmation to the desk.
Keep the passage clear.
The right uses 18 px text with line height 1.5, paragraph spacing 36 px, letter spacing 2.16 px, and word spacing 2.88 px. The left has no added letter or word spacing. Both retain every word; neither is a whole-page WCAG test.
Compare the reminder following the adjusted instruction. It moves downward because the preceding text and paragraph spacing occupy more room. The important observation is retained words and separated blocks, not identical card heights. Equal-height neighboring cards can remain a secondary visual preference, but they cannot justify losing the final condition. A real interface would also need to retain usable actions and labels after this expansion. A static text specimen does not establish keyboard behavior, accessible naming, or the behavior of controls that it does not contain.
Additional lines move the following content
Flowing container, 30ch maximum
Enter through the west door. Booking is required. Bring your confirmation to the desk.
Keep the passage clear.
Flowing container, 18ch maximum
Enter through the west door. Booking is required. Bring your confirmation to the desk.
Keep the passage clear.
The same instruction and reminder appear in both columns. A narrower maximum measure on the right can add lines. Automatic height and normal flow put the following reminder after the complete instruction instead of over it.
Distinguish this spacing question from other requirements. Success Criterion 1.4.4, Resize Text, concerns enlargement, while 1.4.10, Reflow, concerns presentation at specified narrow equivalent widths with its own exceptions. A spacing demonstration does not settle either criterion, and passing any one of them does not establish full WCAG conformance. Describe the specific local result. The complete instruction remains present, its reminder follows without overlap, and its height is allowed to depend on the rendered words.
Exercises
Interpret a line-height value
For 20 px text with line height 1.6, what is the nominal line-box height? Is that all empty space?
Hint
Multiply the size by the unitless line height.
Worked answer
Quantity
Value
Font size
20 px
Unitless line height
1.6
Nominal line-box height
32 px
Line boxes and visible letter bounds are different.
The nominal line-box height is 32 px. That includes room occupied by the font's glyphs and metrics; it is not 32 px of blank space. The visible gap depends on the typeface and characters. Inspect the rendered block rather than treating the difference as a precise measurement of ink clearance.
Find an override failure
A card looks correct by default, but its last sentence disappears after larger word and line spacing. Should the reader be told to restore the defaults?
Hint
The problem is lost content after an adjustment.
Worked answer
Observation
Likely remedy to test
Text clipped after override
Allow content height to grow
Controls overlap
Let neighboring layout reflow
Default alone works
Retest overridden settings
The requirement concerns retained content and function.
No. Remove or revise the fixed-height constraint, let the card grow, and test the surrounding layout and controls. Check all specified spacing overrides together. Passing a contrast check does not repair clipped text, and an attractive default view does not demonstrate adaptable content.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.