{
  "title": "Typography",
  "path": "/foundations/typography",
  "url": "https://design.werklist.com/foundations/typography",
  "text": "https://design.werklist.com/agent/foundations/typography",
  "summary": "Satoshi, the ramp for reading, the denser ramp for the product, and how to set text and numbers.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Typography",
  "purpose": "Sets the typeface, the reading ramp, the product ramp, tabular figures and the rules for setting text in Werklist products and pages.",
  "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"
  ],
  "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."
  ]
}