Typography
Typography carries most of the brand expression. Display type is for names and strong hierarchy, sans text is for interface clarity, serif text is for readable prose, and mono text is for code, keys, and exact values.
Font families#
The site uses self-hosted variable fonts from static/fonts/. Keep the files local so the main site and brand site share the same rendering, privacy posture, and build pipeline.
| Family | Local files | Use |
|---|---|---|
| Red Hat Display | red-hat-display-variable.woff2, red-hat-display-variable-italic.woff2 | Logo text, page titles, section headings, and strong hierarchy |
| Red Hat Text | red-hat-text-variable.woff2, red-hat-text-variable-italic.woff2 | Navigation, interface text, metadata, labels, controls, and general sans text |
| Red Hat Mono | red-hat-mono-variable.woff2, red-hat-mono-variable-italic.woff2 | Code, keyboard shortcuts, identifiers, exact values, and compact machine-readable labels |
| Source Serif 4 | source-serif-4-variable.woff2, source-serif-4-variable-italic.woff2 | Long-form prose, introductions, quotes, and editorial text |
Numeric features#
Use slashed zero only where the content behaves like a code, identifier, or exact machine-readable value. Apply .numeric-code for table cells and inline values, or .slashed-zero-mark when a standalone zero label needs disambiguation.
All local font files advertise the OpenType zero feature. Local shaping tests show Source Serif 4 and Red Hat Mono substitute a distinct slashed-zero glyph. The current Red Hat Display and Red Hat Text files advertise the feature, but the tested glyph output is unchanged, so the site does not request slashed zero globally.
This is related to upstream Red Hat Font issue #53, where tabular figures and slashed zero are documented as coupled in parts of the family. The issue is not the exact same failure mode as this site: upstream reports slashed zero appearing when only tabular figures are requested, while this site saw no visible slashed-zero substitution in Red Hat Display/Text when explicitly requesting zero. Treat this as a known font-family constraint until the local font files are replaced or retested.
Use tabular figures where columns need stable alignment. Use proportional figures in running text unless the numbers need to scan as data.
Interface typography#
Interface typography should stay compact, readable, and consistent. Reserve large display sizes for page-level hierarchy and keep controls, tables, and sidebars tighter.