Readable body copy

Use this when you are rendering long-form prose — articles, knowledge base entries, documentation pages, blog posts — and you want the type to stay legible for low-vision and dyslexic readers. The framework defaults clear WCAG 2.2 AA for short interface copy out of the box, but article containers benefit from an explicit max-width and a slightly looser leading that the framework cannot impose globally without breaking sidebar and navigation layouts.

What WCAG 1.4.12 actually targets

The Text Spacing criterion (1.4.12) is about resilience to user overrides: if a reader pastes the page into a tool that bumps line-height to 1.5, paragraph spacing to 2× line-height, letter-spacing to 0.12em, and word-spacing to 0.16em, the layout must not break. It is not a mandate on your default stylesheet — it is a mandate that your content survives the user's stylesheet.

In practice that means: avoid hard pixel heights, avoid clamping text into fixed-size containers that would clip, and let containers grow vertically with the text inside them. Most of the framework already does this (logical properties, min-height rather than height, flex that wraps).

  • line-height ≥ 1.5 — the framework default is 1.5 already ($global-body-line-height in src/variables/_global.scss). Most consumers can leave it. Bump to 1.6–1.7 for very long-form copy.
  • max-width: 65ch — long enough for the eye to glide across a line, short enough that the reader does not lose their place on the return sweep. The framework does not clamp .content at this width by default because a clamp here would break dashboards, sidebars, and navigation surfaces. Apply it yourself on the article wrapper.
  • Paragraph spacing ≥ 2 × line-height — the framework's reset emits a default margin-block between paragraphs that already clears this; do not collapse it.
  • letter-spacing and word-spacing — leave them at their browser defaults. WCAG 1.4.12 expects the user to override these via their own stylesheet or extension; your job is to not break when they do.

Concrete snippet

Scope the prose-specific knobs to your article container:

// app.scss
@use '@adnap/krysalicss/typography/base' with (
  $body-line-height: 1.6,
);

article {
  max-width: 65ch;
  margin-inline: auto;
}

The @use ... with () call retunes the framework's body baseline (applies everywhere body text appears). The CSS rule on article clamps the reading column and centres it; everything outside article keeps the layout-friendly behaviour.

What the framework already gives you

  • $body-line-height: 1.5 is the default in typography/base — WCAG 1.4.12-friendly without configuration.
  • Body text uses logical properties (margin-block, padding-inline) so user-stylesheet overrides do not collide with the framework rules.
  • :focus-visible rings, .is-* combinations, and the colour tokens all stay readable when the reader bumps spacing.