Typography

Typographic scale for readable and hierarchic content

Text styles

Text styles are tokens used to easily identify what text style is required for an element and/or component. Below is our list of text styles, expressed as styles (in Figma) and tokens (in code theme.json).

The examples below render how SF Pro on MacOS will appear.

Heading

text / heading

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 12px/20px

xSmall

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 16px/24px

small

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 20px/28px

medium

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 24px/32px

large

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 32px/44px

xLarge

Body

text / regular / bold

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 12px/20px

xSmall

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 13px/20px

small

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 14px/20px

medium

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 600 16px/24px

large

text / regular / default

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 400 12px/20px

xSmall

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 400 13px/20px

small

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 400 14px/20px

medium

BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol 400 16px/24px

large

Typography

Text styles

Heading

Body

Code

Design Resources

Engineering Resources

Slack Channels