Scale

Contract

<html data-scale="16">               <!-- a person's setting, on the root -->
  <section data-density="compact">   <!-- a dense region inside -->

The usual arrangement is exactly this: the scale is chosen by a person and put on the root, the density is chosen by the author of the screen and put on a region. Both axes add up — the combination is described by a cell of tokens of its own.

Scale comes first

On a single match the token goes to scale: the [data-scale] blocks stand after the density blocks in the tokens, and their specificity is the same. Density takes its own back in the two-dimensional cell [data-scale][data-density].

The cell has two selectors, and the second is obligatory: the paired one catches only both attributes on one element, while a compact panel inside a large root is precisely the descendant case. Without it the panel would take the geometry of the base while keeping the large type.

Accessibility

Scale is an answer to an increased system font, but not a replacement for it. The control heights are applied as min-block-size, so text grown by a browser setting pushes a control apart rather than being cut off inside it.

Tap targets

All fifteen combinations of scale and density pass WCAG 2.2 AA 2.5.8 — cmd/targets checks it over a 5 × 3 grid.

Scale

Type size

The values are declared in rem and are exact at a root of 16px. The scale axis multiplies the browser's "default font size" setting rather than replacing it: somebody who has raised the root to 20px gets one more step on top from the step here.

Radii and heights

The ladder of radii grows in steps rather than by a multiplier: a radius has to stay even, otherwise at a pixel density of 1.5 the arc lands off the device grid. Because of that neighbouring steps here and there share one value — there is no even number between 8 and 10.

The paddings move along the --space-* scale, and that one is sparse on purpose, so their step is coarser than the type size's: neighbouring steps of scale often take one and the same step of padding.

What is NOT scaled

Rules

The ladder starts at 14 and cannot start lower. That is not a choice but the arithmetic of two rules of the kit multiplied by one another: the floor of the type size is 11px, the minimum step of the ladder is 1.12, and under the base lie two steps, 2xs and xs. Hence

the minimum base = 11 × 1.12 × 1.12 = 13.8px

and 14 is the first whole number that fits. At a base of 13 the second step down gets 10.36px, at a base of 12 it gets 9.57px; both are below the floor. The ladder can be lowered only by moving the floor, the step or the number of steps under the base — each of the three a separate decision. "Smaller" stays the work of density.

The values of the table are written by hand rather than computed. A proportional recount fails the rule of the step regularly: at a base of 16 the honest share gives xs = 14.5, that is a step of 1.103 against a norm of 1.12. Multiplication breaks the evenness of a radius, the growth of the ladder and the band of the control radius against its height alike.

A component that breaks at step 18 holds a hard-coded type size or a hard-coded height — both of them ought to be roles.

What to take and what not to

Three densities could not say "larger". On a 27″ 4K at 100% system scaling the kit was drawn small, and the one knob that looked like an answer — the comfortable density — gave air rather than size: the rows parted and the letters stayed as they were.

The test that tells an axis from a renaming is the same as for the attribute vocabularies: if two knobs give one result, it is one knob with two names. Here they part, and it shows in the numbers.

The height and the padding coincide almost exactly, the type size does not. These are two different screens rather than one seen from two sides.

API

Related

Density Typography Rhythm and shape Tokens