Home

Type

The type scale: Inter in seven steps, from a 44px display to an 11.5px caption, with tabular figures for numbers.

ui.typeconsistency/tokens.css

Use case

For the AI

Use it to size any text a layout writes around the pieces: a page title at 28px, a card's heading at 17px, a paragraph at 15px in ink 2, a row or a button's words at 13px, a timestamp or caption at 11.5px in ink 4. Every amount, count and date that lines up in a column (an invoice total, a quantity, an order number) takes tabular figures. The pieces already set their own type; this is for what the layout adds.

Use it when

  • A page title, a card heading or a section heading
  • Body text, a hint or a caption a layout writes itself
  • A figure that has to line up: an amount, a count, a date

Use something else when

Examples

Display44 / 500 / -3%
Title28 / 500 / -2%
Heading17 / 500
Body15 / 400
Interface13 / 500, buttons and rows
Caption11.5 / 400
Figure 1,204.60tabular numbers

Inter throughout, Bencho's face.

Code

Import

/* Inter is font-sans, set on html in app/globals.css */

Usage

<h1 className="text-[28px] font-medium tracking-[-0.02em]">Invoices</h1>
<h2 className="text-[17px] font-medium tracking-[-0.01em]">Waiting to be paid</h2>
<p className="text-[15px] text-ink-2">Three invoices are past their due date.</p>
<span className="text-[13px] font-medium">Atelier Nord</span>
<span className="text-[22px] font-medium tabular-nums tracking-[-0.01em]">$1,204.60</span>
<span className="text-[11.5px] text-ink-4">Sent October 2</span>

Rules

  • Weights are 400 and 500 (font-medium): every step of the scale is one or the other, never bold.
  • Numbers that are compared or stacked carry tabular-nums.
  • Labels, headings and sentences in sentence case; Title Case only on buttons, menu items and tabs.
  • No em-dashes in text a person reads: use a colon, a comma or parentheses.
  • Inter (font-sans) throughout; font-mono is for code only.