Typography

Contract

The type size comes from the scale, the weight from three. A heading has no right to shout louder than the data it labels.

.my-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-ui);
}

Accessibility

Scale

Seven steps, no more. Every extra one is a decision somebody will take wrongly.

A step exists only if it is seen. In the working part of the scale the ratios stay in the band 1.12–1.143. That is a threshold: below it the eye stops telling sizes apart, and neighbouring steps begin to work as one — the whole hierarchy has to be laid on colour and weight, and they have few registers. The display steps part more widely, 1.222 and 1.273, and that too is deliberate: a heading differs from a heading by a larger share than a caption from a caption.

The scale is counted from the bottom up, from the floor of 11px, rather than from the root of the document. That --text-md coincides with 16px is a convenient coincidence rather than a tie.

There are still two weights, and 700 is forbidden. So the large-scale hierarchy is carried by size alone — all the more reason for it to be distinguishable.

Type size is the only tier in rem. An interface has to respect an increased default font size in the browser: people sit in an admin panel all day, and that is the first setting somebody with weakened sight changes. Page zoom works with px too, but the "default font size" setting is ignored by px silently.

Everything else stays in px, because it is geometry rather than text: the hairline, the state dot, the gutter, the radius. A consequence that cannot be ignored: if the text grows while the control heights are set in px, the text will one day hit the ceiling — so the heights are applied as min-block-size rather than block-size.

Headings

The ladder lives inside .inst-prose and nowhere else. All headings carry --weight-medium, --leading-tight, --tracking-tight and text-wrap: balance everywhere; only the SIZE is confined.

Outside prose a heading inherits its size, and takes one from a kit class: inst-page-title, inst-section-title, inst-panel-title, inst-card-title.

The reason is that there used to be two ladders and nothing between them. One and the same <h2> was 22/600/primary bare and 12.5/400/muted with inst-section-title on it — nine and a half pixels and two ink tiers apart. An application writing a real heading got the first, one reaching for the kit class got the second, and a screen mixing them was incoherent with no gate to say so.

In prose a heading's level really is its size. In an interface the level is the outline and the size is a matter of rank. The TAG carries the outline in both, which is the part that does not move: <h2 class="inst-section-title"> is a real h2 for a screen reader and a group label for the eye.

<div class="inst-prose">
  <h2>A section heading</h2>
  <p>Inside <code>.inst-prose</code> a heading has a rhythm of its own: twice as
  much air above as below. A heading belongs to what is under it, and dividing
  the text evenly is not allowed to it.</p>
  <h3>A subheading</h3>
  <p>Without that rule a heading hangs midway between its own paragraph and
  somebody else's — and parts neither from the other.</p>
</div>

HEADINGS IN CAPITALS and Title Case are forbidden: an ordinary sentence only.

Variants

Two. 700 exists in the font and is forbidden all the same: on a layout of hairlines and air it reads as a shout.

Medium is 600 rather than 500, and that is an admission of fact. Segoe UI has no true 500, and the system stack snaps it to Semibold: a measurement over the pixels showed that 500 and 600 match line for line. On macOS SF Pro gives a true Medium — that is, the drawing differed on two platforms, and what chose it was the font rather than the author.

<div class="inst-stack inst-stack--tight">
  <span>400 — ordinary text, cells, field labels</span>
  <span style="font-weight:var(--weight-medium)">600 — a heading, a button, a table head</span>
  <span style="font-weight:700">700 — forbidden in the library: on a flat layout it reads as a shout</span>
</div>

Leading

Tracking

An optical correction rather than a style: large type looks loose by default.

Small type is never loosened: letterspacing at 11px is not an accent but the loss of a word.

Families

The font is the system one: a web font would add a network request and a flash of substitution for the sake of an effect that does not read in a flat tooling interface.

The monospaced one comes with an optical correction of 0.925em — mono is perceived as larger than a sans at the same size. The correction is declared once on code, kbd, samp, pre and .inst-u-mono: while the utility had a rule of its own, a <code class="inst-u-mono"> got 0.925 × 0.925 and went under the floor of 11px. Inside a block of code the correction is already applied by the container and is not laid on a second time.

Tabular figures

font-variant-numeric: tabular-nums stands on body, that is, on everything by default. In a tooling interface almost any number either stands in a column or updates in place, and proportional figures tug at both cases.

There is no switch the other way: tabular is everywhere anyway.

Composition

Opt-in rather than the default. The base has to be the frequent case, otherwise every component is forced to redeclare the size, and any div of an application without a class inherits the wrong one.

<div class="inst-prose">
  <p>The body of an agent's reply.</p>
  <p>The second paragraph steps away from the first by itself.</p>
</div>

There is no separate component for streaming and none is needed: the body is .inst-prose, and the mark that text is still arriving is .inst-caret.

Keys

A tool lives on the keyboard, so a key is an element of the interface rather than a nameless monospaced piece. <kbd> is styled in the base and needs no class.

<span><kbd>Ctrl</kbd> <kbd>K</kbd> — search the runs</span>
<span><kbd>Esc</kbd> — stop the run</span>

Rules

What to take and what not to

API

Related

Colour Density Block of code Metric Log row