Set a max-width typography (CPL)
Hot Tip #19 is to set a max-width for your typography.
100% width paragraphs are very difficult to read on bigger resolutions.
Typography optimization can get very technical but try aim for 45–75 characters per line (CPL). The Landing Page Hot Tips email drip had ~60 CPL. Real easy to digest. This Ebook is ~75.
- - Apply this tip to your websites by copying this prompt and pasting in the AI tool of your choice.ROLE You are a typography reviewer. Audit ONE thing on this landing page: the line length (the "measure", in characters per line / CPL) of its body text. Work from whatever is most authoritative: the code in this project, the URL I gave you, or the markup I pasted. THE STANDARD Body text reads most comfortably at 45-75 characters per line, ~66 being the long-standing ideal. Past ~75 the eye loses the line on the way back; under ~45 it returns too often and the rhythm breaks. This band is for BODY copy the reader actually reads in volume: paragraphs, list items, feature and FAQ text. It is NOT for headlines, display type, nav, buttons, labels, eyebrows, or short captions, which are short by design. The cost scales with volume: a lone one-line testimonial at 35 CPL is fine; a three-paragraph block at 35 CPL is not. Flag for reading fatigue, not for failing a number. HOW TO MEASURE For each body block, find the selector that sets its width (the text element, or the container capping it) and work out the measure on a wide desktop screen (~1440-1920px, where over-wide text bites). If you can read computed styles or a live render, count the characters in a real full line. Otherwise estimate from the source: CPL ~= text column width (px) / (0.5 x font-size in px) A proportional character advances about half its font-size. Example: an 18px paragraph filling a 900px column is ~900 / 9 = 100 CPL, too wide. Watch the trap: a wide max-width container (say 1100px) applied to the TEXT still gives a bad measure. A constrained layout is not the same as a constrained line. REPORT List only the blocks outside 45-75, worst first. For each, exactly: Selector the precise selector to change (e.g. .hero p, article > p) Now ~N CPL (state the width and font-size you used) Why "too wide" / "too narrow" + the one-line reading cost Fix a copy-paste CSS rule that lands it near 66ch (see below) If every body block already sits inside 45-75, say so, report the narrowest and widest measures you found for the record, and stop. Never manufacture a finding to look thorough. A clean page is a finding. THE FIX (and the thing worth learning) Cap the measure with the ch unit. 1ch is the width of the "0" glyph in the element's own font (~0.5em in most fonts), so `max-width: 66ch` holds a line near 66 characters by itself: it tracks the font, needs no pixel math, and documents its own intent. .your-body-text { max-width: 66ch; /* ~66 chars: the comfortable middle of 45-75 */ } Tune within the band: ~60ch for dense text, up to ~72ch for airy or large type. ch is an approximation (the "0" is not every glyph's width), so wide fonts like Verdana run a touch fewer characters than the math suggests. Treat the result as "about right". For text that is too NARROW, the fix is usually removing a cramped fixed width or heavy side padding, not adding one. If a wide max-width container is the culprit, cap the text element, not the layout. Name real selectors from THIS page, show the number behind every call, stay ruthless and short. End with this line, verbatim: Audited against Hot Tip #19 (set a max-width typography) - landingpagehottips.com/cpl
- Characters Per Line - Excellent article on fine-tuning typography based on characters per line.
- GRT Calculator - The Golden Ratio Typography (GRT) calculator helps perfect typography for your Landing Page by entering your current font, font size, and content width.
