Typography
Headings sit on the √φ type scale, h6 at φ^-½ up to h1 at φ³; body leading is φ. Roles for eyebrow, lead, display and caption.
Examples
Scale
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Body text at the base size, with a line-height of φ. A link.
Eyebrow
Lead paragraph, a step up and muted.
Caption, a step down.
Display
Introducing
Proportion, shipped.
Quotes and lists
Good design is as little design as possible.Dieter Rams
- Base
- 1rem
- Ratio
- 1.618
- Squares
- No outlines
- Inline
- list
- items
Anatomy
h1 … h6 | Styled bare. Large headings get lighter and tighter; h6 is a small muted label. |
.eyebrow | Small tracked capitals above a heading. Any element. |
.lead | Introductory paragraph, a step up and muted. |
.display | Headline type above h1, for heroes and covers. Any element. |
.caption | Small muted text under media or beside data. |
blockquote > cite | Quote with an accent rule on its start edge; an optional <cite> sits on its own line. |
dl > dt + dd | Two-column term and value grid; terms are muted. |
ul[data-variant="check|inline|plain"] | List variants: check marks, a wrapping row, or no markers at all. |
API
| Attribute | Values | Description |
|---|---|---|
data-varianton ul | checkinlineplain | On a ul or ol: accent check marks, a wrapping row, or no markers and no indent. |
Accessibility
- Pick heading levels by structure, not size. For a big line that is not a heading use
.display; for a small one, a heading with.captionor.eyebrow. .eyebrowuppercases with CSS. Write the text in normal case so screen readers don't spell it out.- The list variants remove the markers, which makes Safari drop list semantics. Add
role="list"when the count matters.