# Typography

Sets the typeface, the reading ramp, the product ramp, tabular figures and the rules for setting text in Werklist products and pages.

* Kind: foundation
* Page: https://design.werklist.com/foundations/typography
* Version: 2.1.2

## Rules

* Satoshi on the product, the website, documents and slides.
* The reading ramp (--type-*) on pages, documents and slides. The product ramp (--type-product-*) on WerkOS screens.
* Reading ramp, size/line height in px, weight, tracking: display 56/60, 700, -0.022em; title-1 44/52, 700, -0.02em; statement 40/48, 500, -0.015em; title-2 28/34, 700, -0.012em; lede 22/32, 400; title-3 20/28, 500; body 16/26, 400; small 14/22, 400; nav 14/20, 500; caption 13/20, 400.
* Below 768 px: display 32/38, statement 24/32, title-1 28/34, title-2 22/28, title-3 18/26, lede 18/28, body 16/24. The other steps keep their values.
* Product ramp, size/line height in px, weight, tracking: title-1 26/32, 700, -0.02em; title-2 22/28, 700, -0.02em; title-3 17/24, 700, -0.01em; subtitle 15/22, 700; body 14/20, 400, regular, medium on controls; dense 13/18, 400, regular, medium on headers and figures; caption 12/16, 400, regular or medium; caption-small 11/14, 500.
* No size between two steps, such as 13.5 px.
* Nothing in the product is smaller than 11 px.
* On touch screens, text people type is at least 16 px, so the browser does not zoom the page.
* Tabular figures on everything that lines up: columns, totals, timers, counters.
* Tabular figures: font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "ss01", "cv01", "cv11"; font-kerning: none. Apply them to a whole column.
* Keep running text between 45 and 75 characters a line.
* Weight 400 for reading text and values.
* Weight 500 for control labels, navigation, grid headers, row figures and title-3 of the reading ramp.
* Weight 700 for every other heading. No weight 600: Satoshi does not have it.
* Bold only on headings, never on words inside running text.
* Sentence case. No capitals and no letter spacing. Negative tracking only on the steps that list it.
* Align text to the left and never justify it. No italics in the interface.
* Headings, labels and buttons wrap. An ellipsis cuts text only in a grid cell whose full text opens with the row.
* Choose a heading level by the outline of the page and its size from the ramp. Do not skip a level to get a smaller heading.
* Text in Cyrillic, Greek or Devanagari is set in Noto Sans.
* Outgoing email is set in Arial (--font-email) at 13/18 px, because email clients remove web fonts.

## Accessibility

* Text meets 4.5 to 1 against its ground at every size, headings included.
* --text-muted sits closest to that floor. Keep it off tinted and darker grounds.
* Emphasis never depends on bold or italics alone.
* Text a reader may need elsewhere stays selectable: an error message, a passport number, an email address.

## Tokens

* --font-sans
* --font-mono
* --font-email
* --type-display
* --type-title-1
* --type-statement
* --type-title-2
* --type-lede
* --type-title-3
* --type-body
* --type-small
* --type-nav
* --type-caption
* --type-product-title-1
* --type-product-title-2
* --type-product-title-3
* --type-product-subtitle
* --type-product-body
* --type-product-dense
* --type-product-caption
* --type-product-caption-small
* --text
* --text-label
* --text-muted
* .tabular