# Typography Check Verify that a selected page's type system, text styles, and readability follow the project's typography rules. ## Instructions ### Before checking - Inspect the existing page, text layers, text styles, and font settings without rewriting copy or restyling text. - Read the Settings block first and use it as the source of truth. - Check every breakpoint, since type sizes and wrapping change per breakpoint. - Skip layers listed under Allowed exceptions, but list them in the report. ### Type system - Check that every text layer uses a saved text style when Text style usage is required. - Flag text layers with local overrides (size, weight, line height, color, letter spacing) that detach them from their style. - Check that font sizes come from the type scale or the listed heading sizes. - Flag near-miss sizes (e.g. 17px next to 16px and 18px) as likely mistakes. - Check that text styles define values for every breakpoint rather than relying on desktop values on mobile. - Check for duplicate or near-identical text styles that should be merged. - Check that text style names describe their role (e.g. Heading 2, Body Large) rather than their values. ### Fonts and loading - Check that only the listed font families are used. - Check that only allowed weights are used, and that each weight is actually loaded rather than synthesized. - Count distinct font files (family × weight × style) and compare against Maximum font files loaded. - Flag weights or italic styles that load a file for a single use. - Check that custom fonts have a sensible fallback and that text stays readable while fonts load. - Check that icon fonts or decorative fonts are not used for body text. ### Hierarchy - Check that visual hierarchy is clear: each heading level is visibly distinct from the next in size or weight. - Check that the heading sizes match the set values for each breakpoint. - Check that visual heading styles match the heading tag level where they represent headings. Report mismatches only. The heading structure itself belongs to the SEO and Accessibility checks. - Check that emphasis (bold, italic, color) is used consistently and sparingly. ### Readability - Check line height against the set values per text role. - Check body line length against the measure setting at every breakpoint and in-between width. - Check that no text falls below the minimum text size, except the allowed cases. - Check letter spacing: tighter on large headings, neutral on body, wider on uppercase labels. - Check that uppercase is used only where allowed, and never for long passages. - Check heading case against the heading case setting. - Check for widows (a single word on the last line) in headings and short paragraphs at each breakpoint. - Check that headings wrap cleanly, using balanced wrapping where available and set. - Check paragraph spacing in body text and formatted CMS text. - Check text over images or gradients for readability. Flag low-contrast cases for the Accessibility check rather than measuring contrast here. ### Details - Check for straight quotes where curly quotes are expected, double spaces, and hyphens used as dashes. - Check that numbers in tables, prices, and stats align (tabular figures where available). - Check link text styling: links are distinguishable from body text by more than color alone. - Check that truncated text (line clamps, ellipsis) does not cut off meaning. - Check text layers set to fixed height that could clip longer content or translations. ### Scope limits - Do not rewrite copy, change the brand fonts, or propose a new type scale unless asked. - Do not audit layout, color contrast ratios, SEO, or accessibility beyond noting where typography causes a problem there. - Do not apply fixes unless explicitly requested. When fixing, prefer updating or reassigning text styles over adding local overrides. ## Report to the User Mark each item as passed, issue found, needs manual review, or not applicable. For each issue, give the text layer or text style, the breakpoint, the current value, the expected value from Settings, the impact, and the recommended next step. End with: - The number of text layers not using a text style. - The number of font files loaded versus the maximum. - Any settings that were inferred rather than provided. - The top three fixes by impact.