Typography Guides with Measurable Ranges for Measure Leading and Type Size

Most advice about web typography is too vague to act on or too rigid to survive contact with a real project. This section closes that gap. Every guide gives you measurable ranges: a number, a unit, and a source you can check. Not a vibe. Not a preference dressed as a rule. A figure you can put in a design spec and hand to a developer. The pages assume you already know that typography is a system of relationships. Type size to leading, leading to measure, measure to the height of lowercase letters. Those relationships make text legible, not the specific font you choose.

Start with the contract. This hub page routes, it does not answer. Every child guide gives you three things in the open: a measurable range, the source for that range, and the condition under which it breaks. The measure of a line of text is given in characters per line, not inches or pixels. Characters are the unit the reader experiences. Leading is given in points or as a percentage of type size. That is how it was specified in metal type and how it is still specified in print. Type size is given in points with its lowercase-height implications spelled out. A 10-point font with a tall x-height reads larger than a 10-point font with a short one. If a guide cannot state its range with those units, it has not met the standard.

The numbers in these guides are conventions, not laws of physics. But they are industry-stable conventions, and that stability is what makes them useful. The classic range for a typographic measure in continuous reading text is 45 to 75 characters per line. That figure comes from Robert Bringhurst's The Elements of Typographic Style, still the most-cited source in the field. Leading for body text sits between 120% and 145% of type size, also per Bringhurst. Use the low end for display type and the high end for dense text blocks. Minimum body text for print is 9 points, varying with x-height and typeface design. For screen, the browser default of 16 pixels is the floor. Any design that goes below that is fighting the user agent, not the reader.

Here is the durable geometric relationship that has held since the metal-type era: the line length in picas should be roughly twice the point size of the type. A 10-point font works best at a measure of about 20 picas, roughly 3.5 inches or 9 centimeters. That 2:1 ratio is why a single column of a newspaper reads well but a full-width web page at 24-point type becomes a mess. The line is too long for the eye to track back to the start. This relationship is not a modern invention or a CSS trick; it predates the web by a century. When you see a page where the text is too wide and the leading is too tight, you are seeing a violation of that geometry.

X-height is the measurable difference between a font that passes accessibility minimums and one that fails at the same point size. A typeface with a tall lowercase, like Verdana or Trebuchet, has large letters relative to its cap height. A low-x-height face, like many Didone serifs, has small ones. At 12 pixels, a tall-x-height face can be perfectly legible; a low-x-height face at the same size becomes a gray blur. WCAG 2.2 does not mandate a specific x-height. It requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. A face with a large lowercase will meet the practical legibility test long before a small one. If you are choosing a font for body text on a small screen, measure the x-height first, not the point size.

A baseline grid is a vertical rhythm system where all type aligns to a repeating spatial interval. It prevents columns of adjacent text from drifting out of register. The baseline is the invisible line on which the letters of a line of text sit. A grid forces every line to sit on one of a set of fixed points, typically every 12 or 18 pixels in digital work. This is not decoration. It is the mechanism that makes multi-column layouts legible. When you set a baseline grid, you decide the vertical spacing before you set a single word. Every margin, image, and block of text respects it. The guides that follow show you how to compute the grid from your type size and leading, and what to do when an image or a blockquote breaks it.

Before you get into the specifics, get the foundational vocabulary straight. Content and presentation are separate: in HTML, the content is the text. In CSS, the box model defines how that content is spaced. The box model has four parts: content, padding, border, and margin. box-sizing controls whether the width you set includes the padding and border or not. Kerning is the proportional adjustment between a specific pair of letters, like 'AV' or 'To'. It is controlled by the OpenType kern feature. Tracking, or letter-spacing, is uniform spacing across a range of letters. It is set in CSS with the letter-spacing property. They are not the same thing. Confusing them is a classic error.

Leading is not the same as line-height in CSS. It is the difference between printed and screen typography. Leading is measured in points from baseline to baseline in print. It was the physical strip of lead that separated lines of metal type. In CSS, line-height is a unitless multiplier. A line-height of 1.5 on a 16-pixel font produces 24 pixels of vertical spacing. The two are not interchangeable: leading is an absolute measurement, line-height is a ratio. When you set a baseline grid, you work in leading terms. When you set line-height in a stylesheet, you work in CSS terms. Both control the vertical rhythm of the page. They are specified differently and serve different purposes.

A variable font is a single file that contains multiple weights, widths, and other axes, rather than a separate file for each. The font weight axis is a registered OpenType axis, ranging from 100 to 900. It is specified in CSS using font-variation-settings. The advantage: you can use any weight in between, not just the static ones in a family, giving you finer control. The disadvantage: the variable file is often larger than the sum of the two static weights you actually use. If the rendering engine does not support the syntax you use, the text falls back to the default weight. Before you use a variable font, check the browser support and specify a fallback. The guides in this section walk you through the syntax and the failure modes.

Kerning is not the only spacing adjustment you need, and it is not the most important one for accessibility. WCAG 2.2 Success Criterion 1.4.12, Text Spacing, requires that line-height be at least 1.5 times the font size within paragraphs. Paragraph spacing must be at least 2 times the font size. Letter-spacing, or tracking, must be at least 0.12 times the font size. These are minimums, not recommendations. A common failure is to set tracking for uppercase text, where a range of +5% to +12% is recommended by Bringhurst and Felici, but to leave body text at the default. That is a mistake. The minimums exist to ensure that no part of your text becomes illegible for someone who needs more space to read. The guides here show you how to meet the criterion without making your design look like a ransom note.

The table below summarises the core measurable ranges that the guides in this section use. None of these are advertising; they are the evidence you use to make your own decisions. The source column tells you exactly where the number comes from so you can check it yourself. The range column is the range to use in your own work. The context column tells you when to use the low end versus the high end. For body text on a website, use the 45-to-75-character measure, the 120-to-145-percent leading, and the 16-pixel minimum size. For print, the same ranges apply, but the units are points and picas, and the x-height of your chosen font matters more than the point size.

What	Range	Unit	Source
Typographic measure (continuous text)	45-75	characters per line	Bringhurst, The Elements of Typographic Style, 2012
Leading for body text	120-145	percent of type size	Bringhurst, The Elements of Typographic Style, 2012
Minimum body text size (print)	9	points	Varied, varies with x-height
Minimum body text size (screen)	16	pixels	Browser default, user-agent stylesheet
Minimum tap target size	24 × 24	CSS pixels	WCAG 2.2, Success Criterion 2.5.8
Minimum line height (paragraph)	1.5	unitless multiplier	WCAG 2.2, Success Criterion 1.4.12
WCAG contrast ratio (AA normal text)	4.5:1	ratio	WCAG 2.2, W3C
WCAG contrast ratio (AA large text)	3:1	ratio	WCAG 2.2, W3C
WCAG contrast ratio (AAA normal text)	7:1	ratio	WCAG 2.2, W3C
Large-print minimum size	16-18	points	RNIB, APH guidelines
Letter-spacing for uppercase text	+5 to +12	percent	Bringhurst, Felici

Kerning and tracking are the two most confused terms in typography. They are not interchangeable. Kerning is the proportional adjustment between two specific letters. It is defined in the font file itself; it is not a style property. Tracking is uniform spacing across a range of text. It is applied with CSS. When you see a headline with letterspacing added, that is tracking, not kerning. When you see a pair of letters too close together and adjust them manually, that is kerning. The distinction matters. The guides that follow use both terms correctly. If you are talking to a developer, using the wrong term costs you a day of back-and-forth. The OpenType feature tag for kerning is kern; the CSS property for tracking is letter-spacing.

Every number in the table above has a failure mode. The guides that follow name them. The measure range of 45 to 75 characters fails when the line is too narrow, causing excessive hyphenation, or too wide, causing the eye to lose the next line. The leading range of 120 to 145 percent fails when it is too tight, and descenders collide across lines, or too loose, and the text looks like it is floating. The contrast ratio of 4.5:1 fails when you check it on a white background but the actual design has a background image or a gradient. It also fails when antialiased edge pixels drop below the ratio even though the center of the glyph passes. And the minimum tap target size of 24 by 24 CSS pixels fails when the target is positioned too close to another target, even if each one meets the individual size.

The source for the 45-to-75-character measure is Bringhurst. It is not a law. It is a range repeated in every serious typography text since, and it has held up because it works. The 120-to-145-percent leading range is also from Bringhurst. It is a starting point, not a destination. A tighter leading can work for a single column of text. A looser leading can work for a wide measure. But you must be able to say why you are outside the range. The 16-pixel minimum for screen text is the user-agent default. It exists because text at 12 pixels is illegible for a significant portion of the population. The RNIB large-print standard of 16 to 18 points is a good target for accessible print. It is a guideline, not a legal requirement.

Glyph count is not a quality metric, but it is a practical one. A font with 400 glyphs may cover Latin Extended, which includes the accented letters used in Central European languages like Czech and Polish. A font with 200 glyphs may fail on common diacritics. The reader sees an empty rectangle, a missing glyph. The underlying code points are stable. They are defined by the Unicode Consortium, which released version 16.0. But the glyphs in a font file are not. Any design system that hardcodes a character by its appearance rather than its code point is fragile, because the font can change. When you choose a font for a multilingual audience, check the glyph coverage before you commit. A font with a higher glyph count is not better. It is just more likely to have the character you need.

The WCAG 2.2 standard is not a design trend. It is the international accessibility standard, and it defines the minimums you must meet. The APCA contrast method is a future replacement for the current formula, but it is only a Working Draft in WCAG 3.0, not yet a Recommendation. The active version of WCAG is 2.2, published by the W3C Web Accessibility Initiative. The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color, both calculated in sRGB color space. It is a specific formula, and it is not the only factor in legibility. A passing ratio on paper may fail on a dimmed mobile screen in sunlight. Test at the actual rendering size.

Print has its own failure modes. They are not the same as the web's. A PDF exported as RGB instead of CMYK, or with unflattened transparency, can fail at the RIP. The result is a print run that has to be thrown away. The preflight step is where you catch this. It is not optional. A common failure is to export with fonts outlined instead of embedded. That makes the PDF uneditable and unprintable without reconstruction. Another is to set white text to overprint, which makes it disappear when the ink does not trap. The guides in this section name the specific preflight checks for your output device. The rule of thumb is simple: if you are sending a file to a printer, the print house is the authority. Get their specifications before you export, not after.

Before you set the leading, before you choose the type size, check the line length. It is the single most common failure on real websites, and it is the easiest to fix. Open your CSS and find the rule for the container of your body text. Set its width so that the text measures between 45 and 75 characters per line. A quick way to estimate it is to use the character unit, ch, in CSS, which is the width of the character zero in the current font. Set max-width: 65ch on your paragraph container and you are in the right range. Do this before you touch the leading, the type size, or the margin. It is the cheapest typographic win you will ever get. It is the foundation that everything else in this section builds on.

You now have the map. The guides that follow are organised by the question you are trying to answer, not by the title of a guide. Need to know how long your lines should be? That is the guide on typographic measure. Need to know how much space to put between lines? That is the guide on leading. Need to know whether your text is big enough? That is the guide on x-height and accessibility. Each one gives you a measurable range, the source for that range, and the condition under which it breaks. They do not give you a single correct answer, because one does not exist. They give you a tested range and the reasoning that got you there. That is what separates a professional from someone who is guessing.

What is the best line length for body text?

For continuous reading text, use 45 to 75 characters per line, with 66 characters as a good average. This range comes from Bringhurst's The Elements of Typographic Style. It is not a law, but it is a tested range. If your line is shorter, hyphenation increases; if it is longer, the eye struggles to find the next line.

How much leading should I use?

Set leading between 120% and 145% of the type size. A 16-pixel font gets a line-height of about 24 pixels, which is 1.5. WCAG 2.2 requires a minimum of 1.5 for body text. Use the low end for display type, the high end for dense text blocks.

What is the minimum font size for accessible text?

For print, use 9 points as a minimum, but this varies with x-height. For screen, use 16 pixels, the browser default. WCAG 2.2 requires a contrast ratio of 4.5:1 for normal text, but a taller x-height face will be legible at a smaller size than a shorter one.

How do I calculate contrast ratio correctly?

Use the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 is the darker color's, both in sRGB. A ratio of 4.5:1 passes AA for normal text. Test at the actual rendering size, not on a white swatch, because antialiased edges can fail.

The 45-to-75-character measure and the 120-to-145-percent leading both trace directly to Bringhurst. The 16-pixel screen minimum is a user-agent default, not a design choice. The RNIB large-print standard of 16 to 18 points is the more honest target for accessible print.