Typography Font families TokenValueFor--helix-font-sansui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serifAll text except code and display headings.--helix-font-monoui-monospace, SFMono-Regular, "SF Mono", Menlo, monospaceCode, and text that needs to line up in columns.--helix-font-displayui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serifLarge display headings. Falls back to the sans face. Helix has three font families and no scale of weights and widths. A design system with more families than a product uses ends up with two that mean the same thing. The type scale The type scale runs from --helix-text-xs to --helix-text-3xl. --helix-text-control sets the size of a control's own text. It follows the region's density and is separate from the type scale. On a touch screen, text you type is at least 16px. iOS Safari zooms the page into a focused input, textarea, or select whose text is smaller than 16px. --helix-text-field-min is the smallest size a field's text can take: 16px where the primary pointer is coarse, and 0 everywhere else. Every field sets its text to the larger of this token and its own size, so the desktop sizes do not change. To keep the desktop sizes on a touch screen as well, set the token in a stylesheet loaded after Helix's: :root { --helix-text-field-min: 0px; } Leave the viewport's maximum-scale and user-scalable alone. Setting either one to stop the zoom also stops a reader from zooming the page. The base layer applies the scale to heading elements. :where([data-prose] h1) { font-size: var(--helix-text-3xl); } :where([data-prose] h2) { font-size: var(--helix-text-2xl); } Because the styles target the elements, a heading's markup and its appearance match by default. The styles also reach prose that Helix does not render. Content from a CMS, a Markdown file, or a rich-text field is styled correctly inside [data-prose], with no changes to the content. Use Text when a heading's element and its appearance need to differ. A section's second heading may need to look smaller and keep its place in the outline. A <p> may need to look like a caption. as chooses the element, and variant chooses the ramp: <helix-text as="h3" variant="body" >Reads as body, outlines as a heading</helix-text> By default the two match, so most headings need only as="h2". CSS resolves the match. Text does not write an attribute onto the host element, because that would cause a hydration mismatch in every React app. Size, weight, and leading are not properties. Each ramp already sets them, and setting them one by one would allow a few hundred combinations, of which only a handful are right. There is no separate Heading component, because as does that job. Style your own text <article data-prose> <h2>A real heading</h2> <p>Body text, at the right measure and leading.</p> </article> Put [data-prose] on the element that contains your text. Inside it, the token layer styles headings, paragraphs, lists, links, and code. For one-off text outside prose, use [data-text] to set the ramp: <span data-text="sm">Fine print</span> Line height, letter spacing, and weight TokenValueFor--helix-leading-tight1.2Body text set close, for short lines.--helix-leading-normal1.5Body text. The default line height for a paragraph.--helix-leading-loose1.7Body text set open, for long lines or small sizes.--helix-leading-headingcalc(0.99em + 0.5rem)Headings, which need less line height than a paragraph. It is a length plus an em, so it tightens as the type grows. TokenValueFor--helix-tracking-tight-0.01emLarge type, which needs tighter letter spacing than a paragraph.--helix-tracking-normal0Body text. The default letter spacing.--helix-tracking-wide0.02emLabels and small capitals, which need extra letter spacing.--helix-tracking-wider0.12emUppercase eyebrows, which need more letter spacing than a label. TokenValueFor--helix-weight-regular400Body text. Most of a page uses this weight.--helix-weight-medium500Labels, and quieter headings.--helix-weight-semibold600Headings. The heaviest weight in Helix. Headings have their own leading token. At a paragraph's line height, a heading looks loose at every size. The fix is not proportional, because larger type needs less leading. --helix-leading-heading expresses that once, so no heading level needs its own multiplier.