Skip to content
Designer Decisions

Typography Examples

Typeface

TypefaceValue
<ShowDecision d="Headings Typeface" />
<ShowDecision d="Text Typeface" />
The quick brown fox jumps over the lazy dog
Merriweather
Variable
2 Axis
The quick brown fox jumps over the lazy dog
Archivo
Variable
2 Axis

Font Family

FontFamilyValue
<ShowDecision d="Headings Font Family" />
<ShowDecision d="Text Font Family" />
The quick brown fox jumps over the lazy dog
Archivo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
The quick brown fox jumps over the lazy dog
Merriweather, Georgia, "Times New Roman", Times, serif

Text Style

TextStyleValue
<ShowDecision d="Heading 1 Style" />
<ShowDecision d="Heading 2 Style" />
<ShowDecision d="Heading 3 Style" />
<ShowDecision d="Heading 4 Style" />
<ShowDecision d="Heading 5 Style" />
The quick brown fox jumps over the lazy dog
Archivo / Thin / 42px / height: 1.2
The quick brown fox jumps over the lazy dog
Archivo / Extra Light / 35px / height: 1.2
The quick brown fox jumps over the lazy dog
Archivo / Light / 29px / height: 1.2
The quick brown fox jumps over the lazy dog
Archivo / Normal / 24px / height: 1.2
The quick brown fox jumps over the lazy dog
Archivo / Medium / 20px

Font Size

FontSizeValue
<ShowDecision d="Text Default Size" />
The quick brown fox jumps over the lazy dog
16px

Font Weight

FontWeightValue
<ShowDecision d="Text Default Weight" />
<ShowDecision d="Text Bold Weight" />
The quick brown fox jumps over the lazy dog
300 Light
The quick brown fox jumps over the lazy dog
700 Bold

Line Height

LineHeightValue
<ShowDecision d="Text Default Height" />
<ShowDecision d="Text Compact Height" />
The quick brown fox jumps over the lazy dog
1.5
The quick brown fox jumps over the lazy dog
1.2

Letter Spacing

LetterSpacingValue
<ShowDecision d="Text Loose Letter Spacing" />
<ShowDecision d="Heading Tight Letter Spacing" />
The quick brown fox jumps over the lazy dog
0.01rem
The quick brown fox jumps over the lazy dog
-0.01rem

Cards

TypefaceValue (DecisionCard)
<ShowDecisionCard d="Text Typeface" />
Text Typeface
The quick brown fox jumps over the lazy dog
Archivo
Variable
2 Axis

See also