Web typography

Typography exists to serve reading. This skill gives you the judgement to set web text well in German and English, at every screen width, and to explain each decision by what it does for the reader. Treat the rules here as reasons, not as a checklist. When two rules conflict, choose the lesser evil and say why.

Workflow

1. Look before changing. Find out:

   • what kinds of text are involved (long-form article, headings, UI labels, tables, print or PDF) and how they are read (table below);
   • the existing setup: plain CSS, Tailwind or design tokens; loaded fonts; an existing type scale; print styles; multi-column layouts;
   • the lang setup: present, matching the content and region (de-DE, de-AT, de-CH), and set on every passage in another language. A wrong lang (an English tag on German text) is as harmful as a missing one: hyphenation, quotation marks and screen readers all follow it.

   Extend the project's conventions (tokens, custom properties, utility classes) instead of adding a parallel system. If a comment or design doc records a deliberate choice, such as justified text for a brand, respect it and name the trade-off rather than overriding it.

2. Run the checks that fit the material (see "Scripts"). They produce candidates, not verdicts. Confirm each one in context.

3. Fix or advise, after reading the matching reference file.

4. Verify across widths and zoom (see "Verification").

5. Explain what changed and why (see "Explaining decisions").

Reading mode sets the bar