recursica-skill-typography-semantics

Use the real platform element for every purpose: button elements for actions, em and strong for emphasis, and semantic tables for data. Never attach onclick handlers or role="button" to divs, and let CSS define what semantic tags look like.

Compute average character width from font size, typeface ratio, weight multiplier, and letter spacing, then multiply by an optimal character count derived from the line-height ratio. For 16px Inter body text with 24px line height, this yields a max-width of about 528px.

No, exactly one H1 per page is required, and it must exist in the markup even when hidden by CSS. Heading levels follow document structure, not desired visual size; use type styles to change appearance instead of demoting heading levels.

Loading only the primary typeface causes the browser to silently substitute defaults for secondary and tertiary faces. You must load every typeface the brand names and set the document's base font family from the primary brand token so unstyled elements inherit correctly.

Hide a heading visually only when showing it disrupts the layout and it adds no understanding to what sighted users see. Keep it available to screen readers; if the heading does add meaning, show it rather than hiding meaningful content for layout tidiness.

The font width and weight ratios are estimates acting as guard rails, not precise measurements. Prefer real rendered glyph measurements when available, and never apply the check to non-wrapping text like labels, buttons, badges, or single-line table cells.