Skip to main content
Graphite UI

Typography

Graphite’s type scale is the kit’s Graphite Typography collection, emitted as CSS variables in rem. Twenty-nine steps, each a size and a line height, set in three families at four weights. Every value on this page is read from the stylesheet when the page is built, and every sample is set with the variable it names.

29 stepsContract 1.1.129 of 29 match the kit

Type scale

Eight ladders. Heading is the editorial scale and runs large; title is the UI scale. A component-level heading is a UI title, so it maps to title/*, not to the heading of the same number.

Display

  • display-16rem / 7.5rem · 96px / 120pxMobile 64px / 80px
    One source color, every role resolved

Heading: the editorial ladder

  • heading-14rem / 5rem · 64px / 80pxMobile 48px / 56px
    One source color, every role resolved
  • heading-23.5rem / 4.5rem · 56px / 72pxMobile 40px / 48px
    One source color, every role resolved
  • heading-33rem / 4rem · 48px / 64pxMobile 32px / 40px
    One source color, every role resolved
  • heading-42.5rem / 3rem · 40px / 48pxMobile 28px / 32px
    One source color, every role resolved
  • heading-52rem / 2.5rem · 32px / 40pxMobile 24px / 32px
    One source color, every role resolved
  • heading-61.5rem / 2rem · 24px / 32pxMobile 18px / 28px
    One source color, every role resolved

Title: the UI ladder

  • title-12rem / 2.5rem · 32px / 40pxMobile 24px / 32px
    One source color, every role resolved
  • title-21.5rem / 2rem · 24px / 32pxMobile 18px / 28px
    One source color, every role resolved
  • title-31.125rem / 1.75rem · 18px / 28pxMobile 16px / 24px
    One source color, every role resolved
  • title-41rem / 1.5rem · 16px / 24pxMobile 14px / 20px
    One source color, every role resolved
  • title-50.875rem / 1.25rem · 14px / 20pxMobile 13px / 16px
    One source color, every role resolved

Body

  • body-11.125rem / 1.75rem · 18px / 28pxMobile 16px / 24px
    One source color, every role resolved
  • body-21rem / 1.5rem · 16px / 24pxMobile 14px / 20px
    One source color, every role resolved
  • body-30.875rem / 1.25rem · 14px / 20pxMobile 13px / 16px
    One source color, every role resolved

Component

  • component-button-11rem / 1.5rem · 16px / 24px
    One source color, every role resolved
  • component-button-20.875rem / 1.25rem · 14px / 20px
    One source color, every role resolved
  • component-button-30.75rem / 1rem · 12px / 16px
    One source color, every role resolved
  • component-input-11rem / 1.5rem · 16px / 24px
    One source color, every role resolved
  • component-input-20.75rem / 1rem · 12px / 16px
    One source color, every role resolved
  • component-input-30.75rem / 1rem · 12px / 16px
    One source color, every role resolved
  • component-table-10.875rem / 1.5rem · 14px / 24px
    One source color, every role resolved
  • component-tooltip-10.75rem / 1rem · 12px / 16px
    One source color, every role resolved

Footnote

  • footnote-10.875rem / 1.25rem · 14px / 20px
    One source color, every role resolved

Caption

  • caption-10.75rem / 1rem · 12px / 16px
    One source color, every role resolved
  • caption-20.75rem / 1rem · 12px / 16px
    One source color, every role resolved

Code

  • code-11rem / 1.5rem · 16px / 24px
    var(--graphite-text-code-1-size)
  • code-20.875rem / 1.25rem · 14px / 20px
    var(--graphite-text-code-2-size)
  • code-30.75rem / 1rem · 12px / 16px
    var(--graphite-text-code-3-size)

Sizes and line heights are the kit’s px divided by 16. The px shown is for reading; the stylesheet stays in rem so type answers to a reader who has turned their font size up. Values in the primary role are the Mobile override.

Desktop and Mobile

The kit has two modes. Fifteen of the twenty-nine steps change between them; the other fourteen are stated once and never restated.

Steps whose Mobile value differs from Desktop
StepDesktopMobile
display-196px / 120px64px / 80px
heading-164px / 80px48px / 56px
heading-256px / 72px40px / 48px
heading-348px / 64px32px / 40px
heading-440px / 48px28px / 32px
heading-532px / 40px24px / 32px
heading-624px / 32px18px / 28px
title-132px / 40px24px / 32px
title-224px / 32px18px / 28px
title-318px / 28px16px / 24px
title-416px / 24px14px / 20px
title-514px / 20px13px / 16px
body-118px / 28px16px / 24px
body-216px / 24px14px / 20px
body-314px / 20px13px / 16px

Mobile applies below 672px. The kit does not say where its two modes divide, so the stylesheet reuses the boundary the rest of the site already uses, one pixel below md. It is stated in one place, so if it is wrong it is wrong once.

Families

Three family tokens. Two of them hold the same face today and are still two tokens, because the kit gives them distinct roles.

  • --graphite-font-1'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

    Display, headings and titles 1-2. IBM Plex Sans.

  • --graphite-font-2'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

    Titles 3-5, body and component text. IBM Plex Sans.

  • --graphite-font-mono'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace

    Code and technical values. IBM Plex Mono.

Weights

The kit stores Figma style names; CSS needs numbers. The mapping happens once, at the token, rather than at every call site.

  • --graphite-text-weight-regular400 · kit “Regular”
    One source color, every role resolved
  • --graphite-text-weight-medium500 · kit “Medium”
    One source color, every role resolved
  • --graphite-text-weight-semibold600 · kit “SemiBold”
    One source color, every role resolved
  • --graphite-text-weight-bold700 · kit “Bold”
    One source color, every role resolved

How components use it

The Typography component is the scale’s main consumer. Its seven variants bind to the title ladder, and only display reaches into the heading ladder.

Typography component variants and the step each one reads
VariantTagStepFamilySample
displayh1heading-3font-1One source color, every role resolved
heading-1h1title-1font-1One source color, every role resolved
heading-2h2title-2font-1One source color, every role resolved
heading-3h3title-3font-2One source color, every role resolved
heading-4h4title-4font-2One source color, every role resolved
bodypbody-2font-2One source color, every role resolved
captionspancaption-1font-2One source color, every role resolved

The tag is structure, not size: heading-2 renders an h2 whatever it looks like, and skipping a level is the page composer’s error to avoid.

How each governed component's styles set type
ComponentSteps readLiteral sizes
accordionbody-3none
breadcrumbbody-3none
button-groupnonenone
buttonnone0.75rem, 0.875rem, 1rem
checkbox-groupnone0.75rem
checkboxbody-30.75rem
contained-listbody-30.75rem
data-tablebody-3none
date-pickertitle-5, body-30.75rem
dropdownbody-30.75rem
file-uploaderbody-30.75rem
linkbody-2, body-3, caption-1none
menu-buttonnonenone
menubody-3none
modalbody-1, body-30.75rem
navigation-menunonenone
notificationbody-3none
number-inputnonenone
paginationbody-3none
password-inputnonenone
popovernonenone
progress-barbody-30.75rem
radio-button-groupbody-30.75rem
searchnone0.75rem
selectnone0.75rem
sliderbody-3, caption-10.75rem
tabsbody-30.75rem
tagcaption-1none
text-areanone0.75rem
text-inputnone0.75rem
time-pickercaption-10.75rem
toastbody-3none
togglebody-30.75rem
tooltipnone0.75rem
tree-viewbody-3none
typographyheading-3, title-1, title-2, title-3, title-4, body-2, caption-1none

Letter-spacing has no token: the kit does not model it.

Rules

From the typography foundation contract, version 1.1.1.

Do

  • The kit keeps two ladders. heading/* is the editorial scale and runs to 64px; title/* is the UI scale. A component-level heading is a UI title: map it to title/*, not to the heading of the same number.
  • font-1 and font-2 hold the same family today and are still two tokens. They are distinct roles, per the kit's own descriptions, so the pair can diverge without a rename sweep.
  • 15 of the 29 steps change between Desktop and Mobile. The other 14 are restated nowhere; a step with identical modes must not carry an override.

Don’t

  • Do not feed --graphite-text-weight-* back to Figma. The kit stores style names, and the Plugin API's string for this face is "Semi Bold" with a space, not the "SemiBold" the kit uses.
  • Do not convert sizes to px. Type is the case where answering to the reader's root font size matters most.
  • Do not collapse font-1 and font-2 because they are equal today.

Next steps

  • Typography component

    The variants, their tags and the heading-level rule, rendered live.

  • Tokens

    Every variable Graphite exposes, type included, and how to export them.

  • Spacing

    The other rem scale, read from the same stylesheet.