Typography tokens
v1.0.0
Title | Size | Line height | Weight | Example |
---|---|---|---|---|
typography.display1 | font.size.giant2 | font.lineHeight.giant2 | font.weight.600 | Aa |
typography.display2 | font.size.giant1 | font.lineHeight.giant1 | font.weight.600 | Aa |
typography.display3 | font.size.large2 | font.lineHeight.large2 | font.weight.600 | Aa |
typography.title1 | font.size.large1 | font.lineHeight.large1 | font.weight.600 | Aa |
typography.title2 | font.size.medium | font.lineHeight.medium | font.weight.600 | Aa |
typography.title3 | font.size.body | font.lineHeight.body | font.weight.600 | Aa |
typography.subtitle1 | font.size.large1 | font.lineHeight.large1 | font.weight.400 | Aa |
typography.subtitle2 | font.size.medium | font.lineHeight.medium | font.weight.400 | Aa |
typography.body | font.size.body | font.lineHeight.medium | font.weight.400 | Aa |
typography.label | font.size.small | font.lineHeight.small | font.weight.600 | Aa |
typography.signal | font.size.smallest | font.lineHeight.smallest | font.weight.600 | Aa |
typography.link | font.size.small | font.lineHeight.small | font.weight.400 | Aa |
Title | Value | Relative value | Example |
---|
font.family.market-sans | Market Sans | - | Market Sans |
---|
font.weight.400 | Regular | - | Aa |
---|
font.weight.600 | Bold | - | Aa |
---|
font.size.smallest | 10px | 0.625rem | Aa |
---|
font.size.small | 12px | 0.75rem | Aa |
---|
font.size.body | 14px | 0.875rem | Aa |
---|
font.size.medium | 16px | 1rem | Aa |
---|
font.size.large1 | 20px | 1.25rem | Aa |
---|
font.size.large2 | 24px | 1.5rem | Aa |
---|
font.size.giant1 | 30px | 1.875rem | Aa |
---|
font.size.giant2 | 36px | 2.25rem | Aa |
---|
font.size.giant3 | 46px | 2.875rem | Aa |
---|
font.letterSpacing.none | 0% | - | Hello World |
---|
font.letterSpacing.05 | 5% | - | Hello World |
---|
font.paragraphSpacing.none | - | Hello World |
---|
font.textCase.none | none | - | Hello World |
---|
font.textCase.uppercase | uppercase | - | Hello World |
---|
font.textDecoration.none | none | - | Hello World |
---|
font.textDecoration.underline | underline | - | Hello World |
---|
font.lineHeight.smallest | 12px | 0.75rem | Hello World |
---|
font.lineHeight.small | 16px | 1rem | Hello World |
---|
font.lineHeight.body | 20px | 1.25rem | Hello World |
---|
font.lineHeight.medium | 24px | 1.5rem | Hello World |
---|
font.lineHeight.large1 | 28px | 1.75rem | Hello World |
---|
font.lineHeight.large2 | 32px | 2rem | Hello World |
---|
font.lineHeight.giant1 | 40px | 2.5rem | Hello World |
---|
font.lineHeight.giant2 | 46px | 2.875rem | Hello World |
---|
font.lineHeight.giant3 | 56px | 3.5rem | Hello World |
---|