Typography
The Typography component formats text with a given size, weight and typeface. It provides a consistent interface for consuming valid text styles.
Polymorphic Component
By default, text is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.
Examples
Display One
Display one
<Typography size="d1">Display one</Typography>
Display Two
Display two
<Typography size="d2">Display two</Typography>
Headline One
Headline one
<Typography size="h1">Headline one</Typography>
Headline Two
Headline two
<Typography size="h2">Headline two</Typography>
Headline Three
Headline three
<Typography size="h3">Headline three</Typography>
Subhead
Subhead
<Typography size="subhead">Subhead</Typography>
Body
Body
<Typography size="body">Body</Typography>
Body bold
Body bold
<Typography size="body" weight="bold">Body bold</Typography>
Bold large
Body large
<Typography size="body-lg">Body large</Typography>
Body large bold
Body large bold
<Typography size="body-lg" weight="bold">Body large bold</Typography>
Body large link
<Typography as="a" href="#" size="body-lg">Body large link</Typography>
Call to action
Call to action
<Typography size="cta">Call to action</Typography>
Call to action link
<Typography as="a" href="#" size="cta">Call to action link</Typography>
Meta
<Typography size="meta">Meta</Typography>
Meta bold
<Typography size="meta" weight="bold">Meta bold</Typography>
Props
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
italic | boolean | false | No | Display the text with emphasis? |
size | "body" | "caption" | "h1" | "h2" | "h3" | "meta" | "inherit" | TypographySize | "d1" | "d1-alt" | "d2" | "subhead" | "body-lg" | "body-sm" | "cta" | TypographySize.Body | No | How large should the text be? This also affects the font-face for display text. |
weight | "medium" | "light" | "bold" | TypographyWeight | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "thin" | "normal" | "extrabold" | "black" | TypographyWeight.Normal | No | How heavy should the text be? |
Enums
TypographySize
| Key | Value |
|---|---|
Inherit | "inherit" |
D1 | "d1" |
D1Alt | "d1-alt" |
D2 | "d2" |
H1 | "h1" |
H2 | "h2" |
H3 | "h3" |
Subhead | "subhead" |
Body | "body" |
BodyLg | "body-lg" |
BodySm | "body-sm" |
Caption | "caption" |
Meta | "meta" |
CTA | "cta" |
TypographyWeight
| Key | Value |
|---|---|
W100 | 100 |
W200 | 200 |
W300 | 300 |
W400 | 400 |
W500 | 500 |
W600 | 600 |
W700 | 700 |
W800 | 800 |
W900 | 900 |
Thin | "thin" |
Light | "light" |
Normal | "normal" |
Medium | "medium" |
Bold | "bold" |
Extrabold | "extrabold" |
Black | "black" |