Typography Tokens

Semantic typography tokens describe purpose — heading, body, display, UI — and should be your first choice. Each maps to a primitive value shown in the raw value column. Click the copy button next to any token to copy it as a var() expression.

Looking for the raw type scale, font stacks, weights, or spacing values? Those are on the Primitives page.

Font Size

Use these for headings, body text, display text, UI elements, and agency names. Each maps to a primitive size token.

Aa
var(--nys-font-size-5xl)

Font Size, H1

Heading 1 font size. Maps to --nys-font-size-5xl.

--nys-font-size-h1
Copy
Aa
var(--nys-font-size-4xl)

Font Size, H2

Heading 2 font size. Maps to --nys-font-size-4xl.

--nys-font-size-h2
Copy
Aa
var(--nys-font-size-3xl)

Font Size, H3

Heading 3 font size. Maps to --nys-font-size-3xl.

--nys-font-size-h3
Copy
Aa
var(--nys-font-size-2xl)

Font Size, H4

Heading 4 font size. Maps to --nys-font-size-2xl.

--nys-font-size-h4
Copy
Aa
var(--nys-font-size-xl)

Font Size, H5

Heading 5 font size. Maps to --nys-font-size-xl.

--nys-font-size-h5
Copy
Aa
var(--nys-font-size-lg)

Font Size, H6

Heading 6 font size. Maps to --nys-font-size-lg.

--nys-font-size-h6
Copy
Aa
var(--nys-font-size-xs)

Font Size, Body Xs

Body extra-small font size. Maps to --nys-font-size-xs.

--nys-font-size-body-xs
Copy
Aa
var(--nys-font-size-sm)

Font Size, Body Sm

Body small font size. Maps to --nys-font-size-sm.

--nys-font-size-body-sm
Copy
Aa
var(--nys-font-size-md)

Font Size, Body Md

Body medium (default) font size. Maps to --nys-font-size-md.

--nys-font-size-body-md
Copy
Aa
var(--nys-font-size-lg)

Font Size, Body Lg

Body large font size. Maps to --nys-font-size-lg.

--nys-font-size-body-lg
Copy
Aa
var(--nys-font-size-6xl)

Font Size, Display Sm

Display small font size. Maps to --nys-font-size-6xl.

--nys-font-size-display-sm
Copy
Aa
var(--nys-font-size-7xl)

Font Size, Display Md

Display medium font size. Maps to --nys-font-size-7xl.

--nys-font-size-display-md
Copy
Aa
var(--nys-font-size-8xl)

Font Size, Display Lg

Display large font size. Maps to --nys-font-size-8xl.

--nys-font-size-display-lg
Copy
Aa
var(--nys-font-size-9xl)

Font Size, Display Xl

Display extra-large font size. Maps to --nys-font-size-9xl.

--nys-font-size-display-xl
Copy
Aa
var(--nys-font-size-xs)

Font Size, Ui Xs

UI extra-small font size. Maps to --nys-font-size-xs.

--nys-font-size-ui-xs
Copy
Aa
var(--nys-font-size-sm)

Font Size, Ui Sm

UI small font size. Maps to --nys-font-size-sm.

--nys-font-size-ui-sm
Copy
Aa
var(--nys-font-size-md)

Font Size, Ui Md

UI medium font size. Maps to --nys-font-size-md.

--nys-font-size-ui-md
Copy
Aa
var(--nys-font-size-lg)

Font Size, Ui Lg

UI large font size. Maps to --nys-font-size-lg.

--nys-font-size-ui-lg
Copy
Aa
var(--nys-font-size-xl)

Font Size, Ui Xl

UI extra-large font size. Maps to --nys-font-size-xl.

--nys-font-size-ui-xl
Copy
Aa
var(--nys-font-size-md)

Font Size, Agency Md

Agency name medium font size. Maps to --nys-font-size-md.

--nys-font-size-agency-md
Copy
Aa
var(--nys-font-size-lg)

Font Size, Agency Lg

Agency name large font size. Maps to --nys-font-size-lg.

--nys-font-size-agency-lg
Copy
Aa
var(--nys-font-size-2xl)

Font Size, Agency Xl

Agency name extra-large font size. Maps to --nys-font-size-2xl.

--nys-font-size-agency-xl
Copy

Font Family

Role-based font stacks. Use these instead of referencing primitive font families directly.

Aa
var(--nys-font-family-sans)

Font Family, Body

Default font for body text. Maps to --nys-font-family-sans.

--nys-font-family-body
Copy
Aa
var(--nys-font-family-sans)

Font Family, Heading

Default font for headings. Maps to --nys-font-family-sans.

--nys-font-family-heading
Copy
Aa
var(--nys-font-family-sans)

Font Family, Display

Default font for large display text. Maps to --nys-font-family-sans.

--nys-font-family-display
Copy
Aa
var(--nys-font-family-sans)

Font Family, Ui

Default font for UI elements like buttons and labels. Maps to --nys-font-family-sans.

--nys-font-family-ui
Copy

Line Height

Line heights paired with each semantic font size role. Use alongside the matching font size token.

Line
height
40px

Line Height, H1

Line height for h1 text.

--nys-font-lineheight-h1
Copy
Line
height
36px

Line Height, H2

Line height for h2 text.

--nys-font-lineheight-h2
Copy
Line
height
32px

Line Height, H3

Line height for h3 text.

--nys-font-lineheight-h3
Copy
Line
height
32px

Line Height, H4

Line height for h4 text.

--nys-font-lineheight-h4
Copy
Line
height
28px

Line Height, H5

Line height for h5 text.

--nys-font-lineheight-h5
Copy
Line
height
28px

Line Height, H6

Line height for h6 text.

--nys-font-lineheight-h6
Copy
Line
height
20px

Line Height, Body Xs

Line height for body xs text.

--nys-font-lineheight-body-xs
Copy
Line
height
24px

Line Height, Body Sm

Line height for body sm text.

--nys-font-lineheight-body-sm
Copy
Line
height
24px

Line Height, Body Md

Line height for body md text.

--nys-font-lineheight-body-md
Copy
Line
height
44px

Line Height, Display Sm

Line height for display sm text.

--nys-font-lineheight-display-sm
Copy
Line
height
48px

Line Height, Display Md

Line height for display md text.

--nys-font-lineheight-display-md
Copy
Line
height
52px

Line Height, Display Lg

Line height for display lg text.

--nys-font-lineheight-display-lg
Copy
Line
height
60px

Line Height, Display Xl

Line height for display xl text.

--nys-font-lineheight-display-xl
Copy
Line
height
20px

Line Height, Ui Xs

Line height for ui xs text.

--nys-font-lineheight-ui-xs
Copy
Line
height
24px

Line Height, Ui Sm

Line height for ui sm text.

--nys-font-lineheight-ui-sm
Copy
Line
height
24px

Line Height, Ui Md

Line height for ui md text.

--nys-font-lineheight-ui-md
Copy
Line
height
28px

Line Height, Ui Lg

Line height for ui lg text.

--nys-font-lineheight-ui-lg
Copy
Line
height
28px

Line Height, Ui Xl

Line height for ui xl text.

--nys-font-lineheight-ui-xl
Copy

Letter Spacing

Letter spacing values paired with each semantic font size role. Each maps to a primitive spacing value.

Abc
var(--nys-font-letterspacing-0)

Letter Spacing, H1

Letter spacing for h1 text. Maps to --nys-font-letterspacing-0.

--nys-font-letterspacing-h1
Copy
Abc
var(--nys-font-letterspacing-100)

Letter Spacing, H2

Letter spacing for h2 text. Maps to --nys-font-letterspacing-100.

--nys-font-letterspacing-h2
Copy
Abc
var(--nys-font-letterspacing-100)

Letter Spacing, H3

Letter spacing for h3 text. Maps to --nys-font-letterspacing-100.

--nys-font-letterspacing-h3
Copy
Abc
var(--nys-font-letterspacing-200)

Letter Spacing, H4

Letter spacing for h4 text. Maps to --nys-font-letterspacing-200.

--nys-font-letterspacing-h4
Copy
Abc
var(--nys-font-letterspacing-200)

Letter Spacing, H5

Letter spacing for h5 text. Maps to --nys-font-letterspacing-200.

--nys-font-letterspacing-h5
Copy
Abc
var(--nys-font-letterspacing-300)

Letter Spacing, H6

Letter spacing for h6 text. Maps to --nys-font-letterspacing-300.

--nys-font-letterspacing-h6
Copy
Abc
var(--nys-font-letterspacing-600)

Letter Spacing, Body Xs

Letter spacing for body xs text. Maps to --nys-font-letterspacing-600.

--nys-font-letterspacing-body-xs
Copy
Abc
var(--nys-font-letterspacing-400)

Letter Spacing, Body Sm

Letter spacing for body sm text. Maps to --nys-font-letterspacing-400.

--nys-font-letterspacing-body-sm
Copy
Abc
var(--nys-font-letterspacing-400)

Letter Spacing, Body Md

Letter spacing for body md text. Maps to --nys-font-letterspacing-400.

--nys-font-letterspacing-body-md
Copy
Abc
var(--nys-font-letterspacing-0)

Letter Spacing, Display Sm

Letter spacing for display sm text. Maps to --nys-font-letterspacing-0.

--nys-font-letterspacing-display-sm
Copy
Abc
var(--nys-font-letterspacing-0)

Letter Spacing, Display Md

Letter spacing for display md text. Maps to --nys-font-letterspacing-0.

--nys-font-letterspacing-display-md
Copy
Abc
var(--nys-font-letterspacing-negative-100)

Letter Spacing, Display Lg

Letter spacing for display lg text. Maps to --nys-font-letterspacing-negative-100.

--nys-font-letterspacing-display-lg
Copy
Abc
var(--nys-font-letterspacing-negative-100)

Letter Spacing, Display Xl

Letter spacing for display xl text. Maps to --nys-font-letterspacing-negative-100.

--nys-font-letterspacing-display-xl
Copy
Abc
var(--nys-font-letterspacing-600)

Letter Spacing, Ui Xs

Letter spacing for ui xs text. Maps to --nys-font-letterspacing-600.

--nys-font-letterspacing-ui-xs
Copy
Abc
var(--nys-font-letterspacing-400)

Letter Spacing, Ui Sm

Letter spacing for ui sm text. Maps to --nys-font-letterspacing-400.

--nys-font-letterspacing-ui-sm
Copy
Abc
var(--nys-font-letterspacing-400)

Letter Spacing, Ui Md

Letter spacing for ui md text. Maps to --nys-font-letterspacing-400.

--nys-font-letterspacing-ui-md
Copy
Abc
var(--nys-font-letterspacing-300)

Letter Spacing, Ui Lg

Letter spacing for ui lg text. Maps to --nys-font-letterspacing-300.

--nys-font-letterspacing-ui-lg
Copy
Abc
var(--nys-font-letterspacing-200)

Letter Spacing, Ui Xl

Letter spacing for ui xl text. Maps to --nys-font-letterspacing-200.

--nys-font-letterspacing-ui-xl
Copy

Edit this page on GitHub (Permissions required)

Last updated: May 22, 2026