Accessible reading

Readable text needs enough contrast, room between lines, and a line length that is easy to follow. Start with Espalier's type and spacing tokens, then check the result with your content and fonts.

Line length

The measure is the width of a text block. Aim for roughly 45 to 75 characters per line for body copy, with 66 characters as a starting point. Longer lines can be harder to follow; very short lines interrupt reading.

Use --esp-measure to constrain reading columns:

.prose {
  max-inline-size: var(--esp-measure);
}

The ch unit is based on a font's zero glyph, so a width in ch is an approximation of character count. Review real paragraphs in the selected font.

Line and paragraph spacing

Use a unitless line height around 1.5 for body text so spacing grows with the font size. Separate paragraphs with whitespace, and keep headings closer to the content they introduce than to the preceding section.

Avoid justified body text, which can create uneven gaps between words. See fluid spacing for choosing gaps between related and unrelated content.

Meaning and appearance

Use native headings to express the document hierarchy, <strong> for important text, and <em> for emphasis. CSS controls appearance; markup conveys meaning to assistive technology.

Type-role recipes apply labels, captions, and lead styles to the native element that already represents the content.

Contrast and zoom

Espalier enforces APCA targets on generated text tokens against their intended backgrounds. Small or thin text needs particular care. Keep secondary text readable, and check contrast if you change its color, background, size, or weight.

Use fluid type tokens that include a rem component. Verify that the page remains usable at 200% zoom, including controls, wrapping, and scroll behavior.