Typography^jsp

One typeface and 20 text styles. Each style is a set of tokens – family, size, weight, line height and letter spacing – so pages never set a font size.

Foundation

Source: tokens/semantic/typography.json
Family: Geist Sans · Geist Mono

Responsive
Sizes step up at the token breakpoints inside tokens.css – no responsive classes.
Tokens
Built from font.* primitives, named once in tokens/ and read everywhere.
Text component
<Text textStyle> applies a whole style, so it is never half-applied.

Typeface

Geist

Geist Mono

Vercel’s typeface and shadcn/ui’s default. A clean, geometric sans for interfaces, with a monospace partner for code and figures. Free under the SIL Open Font License.

vercel.com/font

Loaded with @fontsource/geist-sans and @fontsource/geist-mono

Scale

Every text style, with the values your browser resolves at this width. Resize the window: display and heading styles step up at the breakpoints.

NameSampleSizeWeightLine heightTracking

display-xlDisplay…………

display-lgDisplay…………

display-mdDisplay…………

display-smDisplay…………

display-xsDisplay…………

display-xxsDisplay…………

heading-1The quick brown fox…………

heading-2The quick brown fox…………

heading-3The quick brown fox…………

heading-4The quick brown fox…………

heading-5The quick brown fox…………

heading-6The quick brown fox…………

body-leadThe quick brown fox jumps over the lazy dog…………

body-lgThe quick brown fox jumps over the lazy dog…………

body-mdThe quick brown fox jumps over the lazy dog…………

body-smThe quick brown fox jumps over the lazy dog…………

captionThe quick brown fox jumps over the lazy dog…………

labelThe quick brown fox jumps over the lazy dog…………

overlineOverline label…………

codeconst mode = "dark"…………

Tokens

The primitives the text styles are built from. Pages never use these directly – use a text style.

Size

160160px
120120px
9696px
8080px
7272px
6464px
5656px
4848px
4444px
4040px
3636px
3232px
2828px
2626px
2424px
2222px
2020px
1818px
1616px
1414px
1212px

Weight

700700
600600
500500
400400

Line height

160160px
120120px
9696px
8080px
7272px
6464px
5656px
5252px
4848px
4444px
4040px
3636px
3232px
2828px
2626px
2424px
2222px
2020px
1616px

Letter spacing

11px
0-50.5px
00px
minus-1-1px
minus-2-2px
minus-3-3px
minus-4-4px
minus-5-5px
minus-6-6px

typography.json

{
  "font": {
    "family": {
      "$type": "fontFamily",
      "geist": {
        "$value": [
          "Geist Sans",
          "Geist",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$description": "Geist, shadcn/ui's default typeface, falling back to the system sans-serif stack. \"Geist Sans\" is the family name @fontsource/geist-sans registers; \"Geist\" covers next/font and Vercel's geist package. Consuming projects load the font files themselves."
      },
      "geist-mono": {
        "$value": [
          "Geist Mono",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$description": "Geist Mono, falling back to the system monospace stack. Load @fontsource/geist-mono."
      }
    },
    "size": {
      "12": {
        "$value": "0.75rem",
        "$description": "12px"
      },
      "14": {
        "$value": "0.875rem",
        "$description": "14px"
      },
      "16": {
        "$value": "1rem",
        "$description": "16px"
      },
      "18": {
        "$value": "1.125rem",
        "$description": "18px"
      },
      "20": {
        "$value": "1.25rem",
        "$description": "20px"
      },
      "22": {
        "$value": "1.375rem",
        "$description": "22px"
      },
      "24": {
        "$value": "1.5rem",
        "$description": "24px"
      },
      "26": {
        "$value": "1.625rem",
        "$description": "26px"
      },
      "28": {
        "$value": "1.75rem",
        "$description": "28px"
      },
      "32": {
        "$value": "2rem",
        "$description": "32px"
      },
      "36": {
        "$value": "2.25rem",
        "$description": "36px"
      },
      "40": {
        "$value": "2.5rem",
        "$description": "40px"
      },
      "44": {
        "$value": "2.75rem",
        "$description": "44px"
      },
      "48": {
        "$value": "3rem",
        "$description": "48px"
      },
      "56": {
        "$value": "3.5rem",
        "$description": "56px"
      },
      "64": {
        "$value": "4rem",
        "$description": "64px"
      },
      "72": {
        "$value": "4.5rem",
        "$description": "72px"
      },
      "80": {
        "$value": "5rem",
        "$description": "80px"
      },
      "96": {
        "$value": "6rem",
        "$description": "96px"
      },
      "120": {
        "$value": "7.5rem",
        "$description": "120px"
      },
      "160": {
        "$value": "10rem",
        "$description": "160px"
      },
      "$type": "dimension"
    },
    "line-height": {
      "16": {
        "$value": "1rem",
        "$description": "16px"
      },
      "20": {
        "$value": "1.25rem",
        "$description": "20px"
      },
      "22": {
        "$value": "1.375rem",
        "$description": "22px"
      },
      "24": {
        "$value": "1.5rem",
        "$description": "24px"
      },
      "26": {
        "$value": "1.625rem",
        "$description": "26px"
      },
      "28": {
        "$value": "1.75rem",
        "$description": "28px"
      },
      "32": {
        "$value": "2rem",
        "$description": "32px"
      },
      "36": {
        "$value": "2.25rem",
        "$description": "36px"
      },
      "40": {
        "$value": "2.5rem",
        "$description": "40px"
      },
      "44": {
        "$value": "2.75rem",
        "$description": "44px"
      },
      "48": {
        "$value": "3rem",
        "$description": "48px"
      },
      "52": {
        "$value": "3.25rem",
        "$description": "52px"
      },
      "56": {
        "$value": "3.5rem",
        "$description": "56px"
      },
      "64": {
        "$value": "4rem",
        "$description": "64px"
      },
      "72": {
        "$value": "4.5rem",
        "$description": "72px"
      },
      "80": {
        "$value": "5rem",
        "$description": "80px"
      },
      "96": {
        "$value": "6rem",
        "$description": "96px"
      },
      "120": {
        "$value": "7.5rem",
        "$description": "120px"
      },
      "160": {
        "$value": "10rem",
        "$description": "160px"
      },
      "$type": "dimension",
      "$description": "Line heights as absolute sizes keyed by pixel value, so each text style can set the exact line height for each breakpoint. In rem, so they still follow the user's font size setting."
    },
    "weight": {
      "400": {
        "$value": 400,
        "$description": "Regular."
      },
      "500": {
        "$value": 500,
        "$description": "Medium."
      },
      "600": {
        "$value": 600,
        "$description": "Semibold."
      },
      "700": {
        "$value": 700,
        "$description": "Bold."
      },
      "$type": "fontWeight"
    },
    "letter-spacing": {
      "0": {
        "$value": "0rem",
        "$description": "0px – default tracking."
      },
      "1": {
        "$value": "0.0625rem",
        "$description": "1px"
      },
      "$type": "dimension",
      "$description": "Letter spacing keyed by pixel value, output in rem so it follows the user's font size setting. Negative values tighten large display text.",
      "minus-6": {
        "$value": "-0.375rem",
        "$description": "-6px"
      },
      "minus-5": {
        "$value": "-0.3125rem",
        "$description": "-5px"
      },
      "minus-4": {
        "$value": "-0.25rem",
        "$description": "-4px"
      },
      "minus-3": {
        "$value": "-0.1875rem",
        "$description": "-3px"
      },
      "minus-2": {
        "$value": "-0.125rem",
        "$description": "-2px"
      },
      "minus-1": {
        "$value": "-0.0625rem",
        "$description": "-1px"
      },
      "0-5": {
        "$value": "0.03125rem",
        "$description": "0.5px"
      }
    },
    "text-transform": {
      "none": {
        "$value": "none",
        "$description": "No case change."
      },
      "uppercase": {
        "$value": "uppercase",
        "$description": "All capitals. Short labels only, never running text."
      }
    }
  }
}