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
Font Size
FontSize
<ShowDecision d="Text Default Size" />The quick brown fox jumps over the lazy dog
16px
Font Weight
FontWeight
<ShowDecision d="Text Default Weight" /><ShowDecision d="Headings Bold Weight" />The quick brown fox jumps over the lazy dog
300 Light
The quick brown fox jumps over the lazy dog
900 Black
Line Height
LineHeight
<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
LetterSpacing
<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