Typography

Primary type is fluid. Each heading and the body paragraph set --min, --val, and --max, and the element uses clamp(). Tailwind text-xl, text-2xl, and the rest of that ramp are for something else; they are not the Aura heading scale. Small fixed UI text may use text-sm (0.875rem) or text-xs (0.75rem), and those two utilities stay off editable fields.

Scale

Shipped in packages/registry/styles/main.css. --val is 4.03vw (the file writes 4.029999999999999vw).

The clamp selector lists body h1 through body h6, body p, and body .h1 through body .h6. Class .p declares the same custom properties for a paragraph-sized node that is not a p. .small is 14px medium with line-height 1.4rem. .xs is the micro style: 12px, semibold, line-height 16px.

Stylus (fundations/_typo.styl) still computes --min as a fraction of the visual scale (h1–h4 at 0.65, h5 at 0.75, h6 at 0.85) and sets --val to 3.03vw + 1rem. The maxes match the CSS table (tokens/_typography.styl: visualScale-h1 = 3.052rem down to visualScale-base = 1rem). The compiled registry CSS is what consumers load; its --val is 4.03vw without the extra 1rem.

--min and --max are rem, so they follow the user’s browser font size. Heading line-height should stay between 1.1 and 1.3. html sets line-height: 1.21053.

Fonts

--font-sans: var(--font-gabarito, "Gabarito"), sans-serif;
--aura-font-stack: var(--font-gabarito, "Gabarito"), -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif;
--aura-font-quotes: serif;

Next apps load Gabarito with next/font/google (subsets: ["latin"], variable: "--font-gabarito") and put that class on <html>. var(--font-gabarito, "Gabarito") uses the loaded face when the variable is set, and the named family otherwise. Registry main.css starts the same stack at "Gabarito" with the system fallbacks, for apps that are not on next/font.

html and pre use --aura-font-stack. blockquote uses --aura-font-quotes, uppercase, weight 600, and the h4 clamp. Paragraphs take margin: var(--aura) 0 (13px). ul:not(.default) drops list markers and padding. html also sets -webkit-font-smoothing: antialiased, text-size-adjust: 100%, and text-rendering: optimizelegibility.

The base layer sets html { font-size: 17px; }. That is why 1rem on a control already meets the mobile floor.

Roles

Form floor

Editable input, textarea, and select use font-size: max(1rem, 17px) in an unlayered rule in both globals.css and main.css. Checkbox, radio, range, file, hidden, button, submit, reset, image, and color inputs are exempt. text-sm and text-xs on an editable control are a lint and a product failure: iOS Safari zooms on focus below about 16–17px.

Related

• Typography specimen
• Aura skill
• Accessibility
• Icons
• packages/styled-system/src/tokens/_typography.styl
• DESIGN.md §3