Typography draft v0.3.1
The font families and their size and weight scales from the Figma library, plus the line heights and letter spacing components set their text with.
The families (heading, body, mono) and their size and weight scales are the Figma library's Typography, as they are; line heights and letter spacing, which the Figma library lacks, are the design system's additions (tokens/additions/). Components and the docs site read them directly: a component's typography token is a composite of a family, a size and a weight from the Figma library and a line height and letter spacing from the additions. There are no semantic text styles in between.
Specimens
The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.
Families
The three text families, with the system font that replaces heading and body on iOS and Android.
heading.family body.family mono.family · 3 tokens · A specimen in the family.
-
Aa The quick brown fox jumps over the lazy dog
-
Aa The quick brown fox jumps over the lazy dog
-
Aa The quick brown fox jumps over the lazy dog
Heading sizes
The raw size scale of the heading family. The text styles use 3xs to sm today.
heading.size.* · 10 tokens · A specimen at that size, in the nearest family token.
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
Body sizes
The raw size scale of the body family.
body.size.* · 6 tokens · A specimen at that size, in the nearest family token.
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
Mono sizes
The raw size scale of the mono family.
mono.size.* · 6 tokens · A specimen at that size, in the nearest family token.
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
Weights
The weights each family offers, drawn in that family.
heading.weight.* body.weight.* mono.weight.* · 5 tokens · A specimen at that weight, in the nearest family token.
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
Line heights
Multipliers of the font size: compact for the Button label, tight for labels and headings, normal for running text. Added by the design system: the Figma library has none.
font.line-height.* · 3 tokens · A short paragraph at that line height.
-
Line height sets the distance between the baselines of two lines of text. Running text needs more of it than a label on a single line.
-
Line height sets the distance between the baselines of two lines of text. Running text needs more of it than a label on a single line.
-
Line height sets the distance between the baselines of two lines of text. Running text needs more of it than a label on a single line.
Letter spacing
Tracking added between letters: normal (0) everywhere, tight for the Button label, one step per body size it uses. Added by the design system: the Figma library has none.
font.letter-spacing.* · 4 tokens · A specimen at that letter spacing.
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
-
The quick brown fox jumps over the lazy dog
Examples
Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.