Typography

How to use type

• Pick a text role and use all of its variables together. For example, heading-lg gives --heading-lg-font-family, --heading-lg-font-size, --heading-lg-line-height and --heading-lg-font-weight.
• Choose the role for what the text is, not for how big it should be. A heading element still needs the right level for its place on the page.
• Line heights sit on a 4 px grid, so text lines up with the spacing scale.
• Sizes are in rem, so all text follows the reader's font size setting. The two largest headings grow with the screen width.

Text roles

• Designing with care

  heading-lg

  32–40 px, fluid · line height 1.2 × size, rounded up to the 4 px grid · weight 540 (robust)

  Page titles. Grows from 32 to 40 px between 400 and 1200 px wide screens.

• Designing with care

  heading-md

  24–30 px, fluid · line height 1.2 × size, rounded up to the 4 px grid · weight 540 (robust)

  Section headings. Grows from 24 to 30 px between 600 and 1200 px wide screens.

• Designing with care

  heading-sm

  20 px · line height 24 px · weight 540 (robust)

  Subsection headings.

• Designing with care

  heading-xs

  16 px · line height 20 px · weight 540 (robust)

  The smallest heading, at the size of body text.

• Good design is honest. It does not make a product appear more than it is.

  body-lg

  20 px · line height 28 px · weight 360 (default)

  Intros and other larger body text.

• Good design is honest. It does not make a product appear more than it is.

  body-default

  16 px · line height 24 px · weight 360 (default)

  Body text. The default on the page.

• Save changes

  ui-default

  16 px · line height 24 px · weight 360 (default)

  Buttons, navigation and other interface text.

• Save changes

  ui-sm

  14 px · line height 20 px · weight 360 (default)

  Small interface text, such as labels, meta data and tables.

• Case study

  eyebrow

  14 px · line height 20 px · weight 540 (robust) · letter spacing 0.04em · uppercase

  A short label above a heading. The capitals come from CSS, so write the text in normal case.

• const theme = "dark";

  code

  14 px · line height 24 px · weight 360 (default)

  Code in Geist Mono. Inline code keeps the line height of the text around it.

Weights

Geist is a variable font, so any weight between 240 and 540 is available. The system uses three. Bold text, such as <strong>, gets the heaviest one.

Font families

The fonts are self-hosted. Only Geist Variable is preloaded. Until it has loaded, a fallback based on Arial is shown, adjusted to take up the same space, so the page does not jump when Geist arrives. The browser never invents bold or italic: italic text uses Geist Variable Italic.

Primitives

Raw values that the text roles point to. The name is the value in pixels, so --font-size-20 is 20 px. Use a text role instead of these.