its-swiss 0.3.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 07e25008eecb7b3bdc7e35b37c934d1c948e30f36bca49283798499740fc6c14
-  data.tar.gz: 987b4c9b997effa03a2b2071a7d7072580b36d3655d3f760a6299b5e80e3eab4
+  metadata.gz: 2a5ab32d42d182f1c9e0c8efa403cd4f90857e9c8c1b955ba31023330b1095a8
+  data.tar.gz: 0f39bbc46d60b4374c1334b644c28e4d061cc9778b08b2f9a474cbb4aa824341
 SHA512:
-  metadata.gz: 2651041e9048e42c29b62456ebd9d9c8f3ad4077315ea8b73c5e839442c7994031d3e7336efcf02435326da91daa3d5ec853919d906664350fc9537c9a799a08
-  data.tar.gz: 8ec6e22df73670a4a118cf10d60a87fc756f5fdae210a2134f3a9c3a38be5210ef30187518046f638a58abff2e4c02b463f809ee7a57d22de32eaf8bd17573db
+  metadata.gz: 80cff5ca6de7fa9aa649fcf1146e78b9315d61531ef4968875e895db0abd8bd636fd07b33df90b41b38a6374a530945459e4032534c303f599774abd347182c3
+  data.tar.gz: 3090006b7c520d07a88c2527a73b18f94cac3a484d225c393d88e8956a1bb8af559e26dafc8bc384922659892f0577638fa9174d2c03a168b23e43fb8f7d4171

data/CHANGELOG.md

@@ -2,6 +2,258 @@
 
 Semver. Consumers pin `~> 0.1`.
 
+## Unreleased
+
+### Fixed
+
+- **A pinned specimen stopped existing.** Pages replaces the whole site on
+  every deploy, so a version-stamped page survives only if the run writes it
+  again. The step meant to carry them forward read them back off the live
+  site, for released tags only — so it preserved nothing that a deploy had
+  already dropped, and nothing at all for a version that was never tagged.
+  `0.6.0.html`, which a published post points at, was gone the next time main
+  moved; the deploy after it uploaded `index.html` and `0.6.1.html` and
+  nothing else.
+
+  Pinned versions are kept in `published/` and copied into the site each
+  deploy, so what is published is reproducible from the repository rather than
+  from itself. `0.6.0.html` is restored there, rendered from the 0.6.0 commit
+  by that version's own `bin/specimen`.
+
+## 0.7.0 — Unreleased
+
+Every baseline on the grid, in every browser, whatever the font.
+
+- **The type is set in faces the library declares.** A line box puts its
+  baseline half the leading down and then the font's ascent, and the ascent
+  is a number in the font file the library has never been told — so every
+  line of type sat on a baseline the library could not move, and a page on
+  the grid in one font was off it in the next. `faces.css` declares the
+  machine's grotesque three times over `src: local()`, once per ratio of
+  leading to size the ladder produces, each with `ascent-override` set to
+  that ratio and `descent-override` and `line-gap-override` set to nothing.
+  The baseline is then the under edge of the line box, in every line and in
+  any browser that honours a `@font-face` descriptor. A register names its
+  face — `font-family: var(--face-200), var(--font-family)` — and the tokens
+  `--face-150`, `--face-200` and `--face-100` are the three. Chromium and
+  Firefox honour the descriptors.
+- **Safari does not, so there the trim is the grid.** WebKit loads the face
+  and keeps the font's own metrics. Every text block is still trimmed to its
+  cap and its baseline and padded back up — to its *own* leading now,
+  `round(up, 1cap, 1lh)`, so a subhead set on two lines is no longer trimmed
+  to one, and less the cap as WebKit trims it, which is rounded to a pixel —
+  and only where it is needed, and only when told: a trimmed box is a 64th
+  short as often as not on the engine the correction is written for and
+  half a pixel out on one that trims to the exact cap, which down a column
+  is a visible drift, so one line of script ahead of the stylesheets marks
+  the document `no-metric-overrides` where the faces are not honoured and
+  the trim steps in there alone. `its_swiss_stylesheet_tags`
+  writes it; anything linking the stylesheets by hand should too, and the
+  README has the line. Buttons, cells and the copy button are trimmed as
+  well now, with the correction in their own paddings. A control's own text
+  is the one thing neither mechanism reaches in Safari.
+- **Text lives in text elements.** A box that holds blocks is trimmed
+  through its first and last child and would be corrected twice, so the trim
+  is asked of headings, paragraphs, cells, labels, buttons and the like, and
+  of list items and definitions only when they hold text. The shell puts
+  the `:footer` slot's text in a paragraph.
+- **Nothing inside a line changes the line.** `code`, `kbd`, `samp`, `small`,
+  `sup` and `sub` are given no leading, so a second size on a line never
+  asks it for room; the glyphs still sit on the strut's baseline.
+- **No row asks the browser to find a baseline.** `.run` and `.field--inline`
+  align on their over edge and `.choice` on its under edge, and a table cell
+  on `top`: every box's baselines are whole lines below its own over edge,
+  so starting items on one line puts their baselines on one line, without a
+  question that a button, a form and a block of text answer three ways.
+- **A button is a box, with its label centred in it.** Two lines tall, on
+  the grid, and the label's baseline is the one baseline in the library that
+  is not on a line, on purpose: a button is read as a shape, and a label set
+  on the second line of a two-line box reads as a field with a rule under
+  it. Centred by cap where the faces are honoured, since a face puts the
+  label's baseline on the under edge of its line; by the font's own metrics
+  otherwise. The keyline is an inset shadow rather than a border, so the box
+  is the label's line and two paddings and nothing else. A table cell is a
+  line the type is set on and a line the rule closes, with nothing above its
+  type.
+- **Each bold face names the regular ones after its own.** A face whose
+  every `local()` fails does not load, and the browser goes on to the next
+  family — the grotesque stack, with its own metrics — for every heading on
+  the page while the body stays on the grid. Falling through to the regular
+  file keeps the metrics and loses the weight.
+- **The specimen measures itself.** A third button asks the page the
+  question the suite asks: which mechanism this browser is on, which faces
+  it loaded, and every box and run of type off the grid, printed on the
+  page to be read or pasted.
+- **`its_swiss_typeface`** writes an application's own font under the
+  library's face names with the library's descriptors, from a regular and a
+  bold file or one variable file, and a monospace if there is one.
+- **The guards measure type, not boxes standing in for it.** Every run of
+  text on the page has its baseline on a line: the under edge of a trimmed
+  block less its padding, or the under edge of the rectangle the engine
+  reports for an untrimmed run, which with no descent is the baseline and
+  with the font's own is a descent off it. The question is one function; a
+  Playwright job asks it of the published specimen in Chromium, WebKit and
+  Firefox, and the Chromium suite asks it again with the faces taken away,
+  which is Safari's page. A page that trims is measured box by box rather
+  than from the top, so the 64ths are let go and every whole pixel is not.
+
+Why: 0.5.0 made the baseline real with a property one engine had, and 0.6.1
+found three ways the page came apart in the others and fixed the three. The
+faces replace the font's metrics with the ladder's, which is the only thing
+that was ever going to hold in a browser nobody had checked.
+
+A consumer that set a register of its own with a size and a leading should
+add the face for their ratio; a consumer that declared `--font-family` and
+nothing else keeps a readable page in step, and adds `its_swiss_typeface` to
+register it.
+
+## 0.6.1 — 2026-09-02
+
+Three ways the column came apart in a browser that was not Chromium.
+
+- **`.footer` and `.field__error` take their leading from `--line`.** The
+  footer was led on `--space-3` and the field error on `--space-2`. The first
+  happens to be twenty-four pixels and so was only wrong to read; the second
+  is sixteen, and put eight pixels into the column that everything below it
+  then carried.
+- **The leading guard is asked of every stylesheet, not only `type.css`.** It
+  passed for as long as it did because a register can be declared in any file
+  and it was only ever looking in one.
+- **The masthead, the nav and the pagination align on their under edge
+  rather than on a baseline.** A trimmed block's under edge *is* the baseline
+  of its last line, and every child of those three rows is one line — so
+  aligning the edges aligns the baselines by construction, instead of asking
+  the browser to find a baseline. Browsers do not agree on that answer once
+  trimming is involved, and the masthead is where it shows: it puts a block
+  beside a flex container, and a browser that synthesizes those two a few
+  pixels apart grows the row past its three lines and carries the difference
+  down every section below it. The rows that keep `baseline` are the ones
+  that need it, where a line of type sits beside something taller — `.run`,
+  `.field--inline`, `.choice`.
+- **The grid is measured without `text-box-trim` as well as with it,** and the
+  published page is measured at all. A trimmed box is its cap rounded up to a
+  whole line whatever the leading under it says, so trimming hides exactly
+  this class of error; a browser without it got a page that came apart from
+  the form down. The check now runs twice, and the file `bin/specimen` writes
+  is loaded in a browser over `file://` rather than only read as text.
+
+Why: the vertical grid was a claim about Chromium. All three were in
+`components.css`, none was visible to the guard that exists to catch it, and
+none was visible on screen in the one browser everything was checked in —
+which is three ways of saying the same thing, and the reason the fix is
+mostly test. The baseline one is the sharpest version of it: the box check
+exempts an item placed by a baseline row, on the grounds that a row is where
+a short thing legitimately sits off the line. So for as long as the masthead
+asked for a baseline, nothing measured where its two halves landed. It does
+not ask any more, and now they are measured like anything else.
+
+## 0.6.0 — 2026-09-02
+
+The specimen is published, so nothing has to keep a copy of it.
+
+- **`bin/specimen`** writes the page as one static file: the six stylesheets
+  inlined verbatim, the engine's own markup, and the accent and the baseline
+  as buttons rather than as a second rendering. It needs nothing to display —
+  no Rails, no network, no stylesheet it has to go and fetch.
+- **A Pages workflow publishes it on every push to `main`**, keeping every
+  released version alongside the current one:
+
+  | | |
+  | --- | --- |
+  | `bobbymeyer.github.io/its-swiss/` | the current specimen |
+  | `bobbymeyer.github.io/its-swiss/0.6.0.html` | the one a post can pin |
+
+  Point a post or a release note at the version-stamped copy. A page that
+  silently changes what it depicts is worse than one a little behind.
+
+Why: the specimen is ERB rendered by Rails, so anything that cannot run Rails
+has had to keep a copy made by hand. Two did, and both drifted — one declared
+a `--baseline` the library had renamed and a `--measure` it never had. A copy
+made by hand is a copy that will be wrong; the fix is to publish the real one.
+
+The page also broadcasts its own height by `postMessage`, so an iframe can
+size itself rather than have a height guessed at one width and wrong at every
+other.
+
+## 0.5.0 — 2026-09-02
+
+Asking the specimen to show everything found that it did not, and that one
+rule had quietly stopped doing anything.
+
+- **`.micro--tap` is gone**, with the rule it led. It gave micro type a taller
+  line box so a 14px tap target cleared 24px — and 0.4.0 put `.micro` on a
+  whole line, which made every selector in that rule a restatement of what
+  the body already said. Nothing caught it: the guards ask whether a leading
+  is a whole number of lines, and a redundant rule answers yes.
+- **`.stack`, `.form--inline`, `.field--inline`, `.pairs--stacked` and
+  `.figure--cover` are on the specimen**, which is where a component the
+  library ships is documented and guarded. They were shipped and shown
+  nowhere.
+- **A label beside a control opts out of trimming**, as `.choice label`
+  already did. A row that aligns on the baseline cannot align a trimmed box
+  against an untrimmed one: it lands on a half pixel and takes the column
+  with it, which is what the new inline field did.
+
+### Guards
+
+- **Every class the library defines appears on the specimen.** Two documented
+  exceptions: `button_to`, which is Rails' wrapper, and `visually-hidden`,
+  which is offered to applications and has nothing to show. This is the guard
+  that would have caught `.micro--tap`, and it is what makes the specimen a
+  claim about coverage rather than a page that happens to be long.
+- The box test exempts a flex item in a baseline-aligned row from the
+  column check, as it already exempted an inline-block: both are placed by
+  something other than the column. The row itself is still measured, so a row
+  that breaks the column still fails.
+
+## 0.4.0 — 2026-08-31
+
+**Breaking.** The baseline is now the line, not a third of it. Applications
+setting `--baseline` need to set `--line` instead; everything else follows.
+
+### The grid
+
+0.3.0 put the type on a baseline grid and then registered it to eight pixels —
+a third of the body line. A block could be a whole number of thirds and still
+land every line of type after it somewhere new, which is what a label on a
+sixteen-pixel leading and a section head on thirty-two did, all the way down a
+column. A third of a line is a spacing unit. It is not a baseline.
+
+- **`--line` (24px) replaces `--baseline` (8px)** as the interval everything
+  vertical registers to. It is also the body leading, because in a baseline
+  grid those are one number.
+- **Every leading is a whole number of lines.** `h1` and `h2` move from 40 and
+  32 to 48; the page title from 48 to 72; labels and captions from 16 to 24.
+  The page is airier, and that is what the convention looks like.
+- **`--line-2`, `--line-3`, `--line-4`, `--line-6`** for whole-line spacing.
+  `--space-*` survives, renamed at its root to `--space-unit`, as the
+  **horizontal** step: an inline gap has no baseline to miss.
+- **`--half-line` and `.subgrid`**, the one subgrid, for a block of small
+  type. It halves `--line` for the block's *children* — the block's own
+  margins belong to the column outside it and are owed whole lines. Declaring
+  it on the block itself halved the gap above it and landed the column half a
+  line out, which the specimen caught.
+
+### Pictures, rules, controls
+
+- **`.figure` puts a picture on the line at any width.** Its box is the
+  natural height taken up to the next whole line with `round()`, recomputed as
+  the container resizes; the picture is fitted inside with `contain`, so
+  nothing of it is lost. `.figure--cover` crops instead. `--ratio` is the
+  application's to declare. Tested at four widths.
+- `hr` is a line-tall box rather than a rule with margins either side.
+- A text control is two lines of box: one the text sits on, one the rule
+  closes. A checkbox is reset out of that, since the browser draws it at a
+  size of its own.
+
+### Guards
+
+- The box test measures in lines, and honours `.subgrid` — a block that
+  declares a half-line may use one; the block itself still owes whole lines.
+- A picture is measured at 1400, 1100, 903 and 712 pixels wide.
+- `--baseline` may not reappear in the library. A token that no longer means
+  what it says is worse than one that is gone.
+
 ## 0.3.0 — 2026-09-01
 
 The vertical rhythm, twice: once to put every box on the baseline, and again
@@ -131,7 +383,19 @@ upgrading.
 - The leading guard now admits `0`, the one value that is not a measurement:
   an inline box that takes no part in the line it sits on.
 
-## 0.2.0 — 2026-08-31
+## 0.2.0 — 2026-08-31 · never published
+
+**This version is tagged but is not on RubyGems, and will not be.** Its
+release run passed the tag check, Rubocop and the suite, then failed at
+`rubygems/release-gem`, which runs `bundle exec rake release` — a task the
+Rakefile did not define until 0.3.0 added `require "bundler/gem_tasks"`. By
+the time that was fixed, 0.3.0 was the next release, and publishing an older
+version after two newer ones is worse than the gap.
+
+Nothing here is lost: 0.3.0 was cut from a `main` that already contained all
+of it, so every published version since carries these fixes. Only the version
+number is missing — `~> 0.2.0` resolves to nothing, and `~> 0.1` skips over
+it. Everything below shipped in 0.3.0.
 
 Everything here was found by the second consumer inside a day of building on
 0.1.0, which is roughly the point of having one.

data/README.md

@@ -2,9 +2,9 @@
 
 A Swiss typographic style for Rails applications, in two layers.
 
-The **core** is plain CSS and one small piece of JavaScript: tokens, a reset,
-typography, grid primitives, components and view transition rules. It needs
-nothing but a `<link>` tag.
+The **core** is plain CSS and one small piece of JavaScript: tokens, faces, a
+reset, typography, grid primitives, components and view transition rules. It
+needs nothing but a `<link>` tag.
 
 The **engine** ships that core through `app/assets`, plus a base layout shell,
 partials, a form builder, helpers and an install generator.
@@ -23,6 +23,12 @@ bin/rails generate its_swiss:install
 
 Then open `/its-swiss/specimen`.
 
+The current specimen is also published, for anywhere that cannot run Rails:
+**[bobbymeyer.github.io/its-swiss](https://bobbymeyer.github.io/its-swiss/)**.
+`bin/specimen out` writes it as one static file, and a Pages workflow does
+that on every push to `main`, keeping each released version alongside the
+current one at `/<version>.html` for anything that needs to pin.
+
 ## What is in the gem, and what stays in the application
 
 | In the gem | Stays in the application |
@@ -32,7 +38,7 @@ Then open `/its-swiss/specimen`.
 | A base layout shell with `content_for` slots | Page layouts beyond the shell |
 | View transition names and durations | Which pages transition to which |
 | The value scale and the accent slot | Any hue, any palette knowledge |
-| A fallback grotesque stack | The typeface |
+| The machine's grotesque, declared to sit on the baseline | The typeface |
 
 A pattern enters the gem after it appears in two applications, not before.
 
@@ -44,11 +50,11 @@ specificity — so the application always wins, without having to out-specify
 anything or reach for `!important`.
 
 ```
-@layer its-swiss.tokens, its-swiss.reset, its-swiss.type,
+@layer its-swiss.tokens, its-swiss.faces, its-swiss.reset, its-swiss.type,
        its-swiss.grid, its-swiss.components, its-swiss.transitions;
 ```
 
-Each file declares its own layer, so linking the six files individually (what
+Each file declares its own layer, so linking the seven files individually (what
 `its_swiss_stylesheet_tags` does) and linking the single `its-swiss.css` that
 imports them resolve identically.
 
@@ -60,47 +66,162 @@ holding all of them. Nothing here has a default the gem could pick honestly.
 | Slot | What it is |
 | --- | --- |
 | `--accent`, `--accent-ink` | State and emphasis only. Unset, the accent is ink |
-| `--font-family` | The typeface. The gem ships none — declare `@font-face` and name it |
+| `--font-family` | The typeface. The gem ships none — declare yours with `its_swiss_typeface`, and this is what a machine without it falls through to |
 | `--value-chroma`, `--value-hue` | Warms the whole value scale together. Neutral as shipped |
-| `--columns`, `--gutter`, `--baseline` | How many fields this problem has, and the unit everything vertical is measured in |
-| `--cap-correction` | Read, not set: what a trimmed register adds above its cap to reach the next baseline |
+| `--columns`, `--gutter` | How many fields this problem has |
+| `--line` | The baseline: the interval everything vertical registers to |
+| `--ratio` | A picture's aspect ratio, per figure — the library cannot read one |
+| `--face-150`, `--face-200`, `--face-100` | Read, not set: the face a register names for its ratio of leading to size |
 
 ### The baseline
 
-Everything vertical is measured in baselines, and the type sits on them rather
-than merely in step with them.
+`--line` (24px) is the interval everything vertical registers to, and the
+leading of the body text. In this style those are one number, because that is
+what a baseline grid is: Müller-Brockmann's horizontal lines are one line of
+text apart and a field is a whole number of them.
+
+Every leading is `var(--line)` or a whole multiple of it — `--line-2`,
+`--line-3`, `--line-4`, `--line-6`. Every margin, padding and gap on the
+vertical axis is too. `--space-*` survives as the **horizontal** step: an
+inline gap has no baseline to miss.
+
+Boxes in step are only the easy half. Where a line's baseline falls inside its
+line box is the font's decision: half the leading down, then the font's own
+ascent, and the ascent is a number in the font file that the library has never
+been told. A caption and a paragraph can both be in step and still be out of
+register with each other, and a page on the grid in one font is off it in the
+next. 0.5.0 trimmed every register to its type with `text-box-trim`, which
+registered the page in the one browser that trims and left the rest to their
+fonts.
+
+So the library sets every register in a face of its own. `faces.css` declares
+the machine's grotesque three times over `src: local()`, each time with its
+ascent set to a ratio of leading to size and its descent and line gap set to
+nothing:
+
+```css
+@font-face {
+  font-family: "its-swiss-150";
+  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans"), …;
+  ascent-override: 150%;
+  descent-override: 0%;
+  line-gap-override: 0%;
+}
+```
 
-Boxes in step are the easy half: line boxes and spacing are whole numbers of
-`--baseline`, so blocks that start together stay together down the column.
-That alone is not a baseline grid — where a line's baseline falls inside its
-line box depends on the font's ascent and the leading either side of it, so a
-caption and a paragraph can both be in step and still be three pixels out of
-register with each other.
+A line box is then exactly the ascent tall, there is no half-leading for the
+type to sit inside, and the baseline is the under edge of the line box — in
+every line, whatever the font underneath, in a browser that honours the
+descriptors. Chromium and Firefox do. The ladder produces three ratios and
+there are three faces: body, subhead and page title are set on one and a half
+times their size, the small register and the section on twice it, and the
+subgrid puts the small register on its own size. A register is three
+declarations, and the third is what makes the first two a grid:
+
+```css
+.micro { font-family: var(--face-200), var(--font-family); font-size: var(--size-1); line-height: var(--line); }
+```
 
-So every text register is trimmed to its own type: `text-box: trim-both cap
-alphabetic` makes a block's over edge the cap of its first line and its under
-edge the baseline of its last, and one padding rounds the cap height up to the
-next baseline —
+Safari loads the faces and ignores what they say about their metrics, so
+there every text block is also trimmed to its type: `text-box: trim-both cap
+alphabetic` makes the block's over edge the cap of its first line and its
+under edge the baseline of its last, and one padding rounds the cap up to the
+block's own leading —
 
 ```css
-padding-block-start: calc(round(up, 1cap, var(--baseline)) - 1cap);
+padding-block-start: calc(round(up, 1cap, 1lh) - round(1cap, 1px));
+```
+
+— measured by the browser in cap and line units, so the library still never
+has to be told the font's metrics. The cap is rounded to a pixel because that
+is the cap WebKit trims to, and WebKit is the browser this is for. It is
+published as `--cap-correction`: a component that puts padding above its type
+adds it. Only where it is needed, though, and only when told: a trimmed box
+is a 64th of a pixel short as often as not on the engine the correction is
+written for, and half a pixel out per block on one that trims to the exact
+cap, which down a long column is a visible drift. So one line of script ahead
+of the stylesheets marks the document `no-metric-overrides` where the faces
+are not honoured, and the trim steps in there and nowhere else;
+`its_swiss_stylesheet_tags` writes it, and anything linking the stylesheets
+by hand should too:
+
+```html
+<script>if (!("ascentOverride" in FontFace.prototype)) document.documentElement.classList.add("no-metric-overrides")</script>
+```
+
+Without it the page is on the faces alone: exact in Chromium and Firefox, and
+in Safari in step but not registered. The faces are the mechanism and the
+trim is the fallback. Three things follow.
+
+Anything that changes size *inside* a line — `code`, a `small`, a
+superscript — is given no leading at all, so it never asks the line for room;
+its glyphs still sit on the strut's baseline, which is the grid's.
+
+No row asks the browser to find a baseline. Every box's baselines are whole
+lines below its own over edge, so a row that starts its items on one line has
+put their baselines on one line; `.run` aligns on `flex-start`, the masthead
+and the nav on `end`, a table cell on `top`, and none of them on `baseline`,
+which is a question three kinds of box answer three ways.
+
+Text lives in text elements. The trim is asked of headings, paragraphs,
+terms, cells, captions, labels, list items and definitions that hold text,
+nav links, pagination, buttons — and not of the boxes that hold those, since
+a box that holds blocks is trimmed through its first and last child and would
+be corrected twice. Plain text dropped straight into a `<footer>` or a `<div>`
+is in step and, in Safari, off the baseline; put it in a paragraph. The shell
+does, for the `:footer` slot.
+
+A control is two lines: one the type is set on, one the rule closes, with the
+rule's width taken out of the second. A button is a box, two lines tall with
+its label centred in it, and its label's baseline is the one baseline in the
+library that is not on a line — on purpose, since a label set on the second
+line of a two-line box reads as a field with a rule under it. Its keyline is
+an inset shadow rather than a border, so the box is the label's line and two
+paddings and nothing else. A control's own text is the one thing neither
+mechanism reaches in Safari: an input, a select or a textarea cannot be
+trimmed, and with the faces ignored its text sits where the font puts it, a
+few pixels above the line. The box is on the grid; the type in it is the
+font's until WebKit honours the descriptors.
+
+#### Your own typeface
+
+Declared under the same names with the same descriptors, and the helper writes
+it:
+
+```erb
+<%= its_swiss_typeface regular: "inter-regular.woff2", bold: "inter-bold.woff2" %>
+<%= its_swiss_typeface variable: "inter.woff2", mono: "jetbrains-mono.woff2" %>
 ```
 
-— which the browser computes in cap units, so the library still never has to
-be told the font's metrics. It is published as `--cap-correction`: a component
-that sets its own padding on trimmed text adds it, as
-`calc(var(--space-1) + var(--cap-correction))`, which is the right padding
-whether or not the browser trims.
+Put it after the library's stylesheets. The declarations are unlayered, and a
+name defined outside a layer beats the same name defined inside one — the way
+the application's rules beat the library's — but a browser that resolves a
+name by order rather than by layer wants it last too. `--font-family` is only
+what a machine with none of the faces falls through to: the page is still
+readable and still in step, and no longer registered.
 
-Two things opt out, with `text-box: normal; padding-block-start: 0`: a control,
-whose box is the target and whose label is centred in it, and any block whose
-content is not type — an image, a swatch, a diagram.
+The faces are the ladder's. Re-proportion `--line` or a size and the ratios
+move with them, and the faces have to be declared again for the ratios the new
+ladder produces.
+
+#### The one subgrid
+
+A block of small type may sit on a half-line — a dense run of captions, a
+table of figures:
+
+```html
+<div class="subgrid">…</div>
+```
+
+It halves `--line` for the block's **children** and moves the small register
+onto the face for its new ratio, and the leadings and the spacing follow. The
+children, not the block: a block's own
+margins belong to the column outside it and are owed whole lines. Set on the
+block itself it halves the gap above it and lands the column half a line out.
+
+A block, and only a block. An inline `<small>` shares its paragraph's line and
+must not change it.
 
-It is behind `@supports`, and the fallback is the box rhythm above. Chromium
-and Safari trim; Firefox does not yet. The two do not render identically:
-trimming takes the leading out of a block's own box, so a trimmed page is a
-few pixels tighter per block and the ladder means what it says rather than
-what it says plus half a line. Both stay on the grid.
 
 ### The value scale
 
@@ -136,6 +257,27 @@ Within three units a channel, which is the cost of the four hand-picked
 values becoming one ladder with a single chroma and a single hue. Measured in
 Chromium, not calculated.
 
+### Pictures
+
+The one case that nearly does not transfer from print. A picture's height is
+its fluid width over its ratio, so without help one picture puts the whole
+column below it off the grid at every width but a few.
+
+```html
+<figure class="figure" style="--ratio: 1.618">
+  <img src="…" alt="…">
+  <figcaption class="micro">…</figcaption>
+</figure>
+```
+
+The box is the picture's natural height taken up to the next whole line, by
+`round()`, recomputed as the container resizes. The picture is fitted inside
+it — `contain` by default, because a library must not crop an image it did not
+choose. `.figure--cover` crops instead, which is the Müller-Brockmann move and
+yours to make where you own the picture.
+
+`--ratio` is yours to declare; CSS cannot read an intrinsic one.
+
 ### The grid
 
 The gem ships primitives and never a grid.
@@ -182,7 +324,7 @@ run while a view is rendering, and these slots are set once for the whole
 application — naming the shell on the controller renders it but leaves
 nowhere to fill it, so every view ends up writing the same masthead.
 
-Note the `:head` slot links `theme.css`. The shell links the library's six
+Note the `:head` slot links `theme.css`. The shell links the library's seven
 stylesheets and stops; the accent and the grid live in yours, and nothing
 links it but this.
 
@@ -197,7 +339,7 @@ Slots, all optional:
 | `:main_class` | What the page's main region is, if it is a grid |
 | `:footer` | Whatever belongs after the page |
 
-The shell writes the view transition opt-in, the six stylesheet links, the
+The shell writes the view transition opt-in, the seven stylesheet links, the
 importmap tags, a skip link, and the flash. It stops there — a page layout
 beyond the shell is the application's, for the same reason its grid is.
 
@@ -205,7 +347,8 @@ beyond the shell is the application's, for the same reason its grid is.
 
 | | |
 | --- | --- |
-| `its_swiss_stylesheet_tags` | The six links, tracked for Turbo |
+| `its_swiss_stylesheet_tags` | The seven links, tracked for Turbo |
+| `its_swiss_typeface(regular:, bold:)` | The application's typeface, declared under the library's face names |
 | `nav_link_to(name, url, current:)` | A destination, with `aria-current` when you are at it |
 | `copy_button(value)` | A value that copies itself |
 | `its_swiss_form_with(...)` | `form_with`, already holding the library's builder |
@@ -263,8 +406,9 @@ It is the documentation and the regression fixture.
 ## Tests
 
 ```sh
-bin/test                                  # everything; browser tests skip
+bin/test                                     # everything; browser tests skip
 CHROME_BINARY=... CHROMEDRIVER=... bin/test   # including the browser tests
+bin/specimen tmp/specimen && node test/browsers/grid.mjs tmp/specimen/index.html   # chromium, webkit, firefox
 ```
 
 Tests come first, and a guard is only kept if removing what it guards makes it
@@ -279,10 +423,18 @@ The rest needs a browser, because a rule on the wrong selector reads correctly
 in the CSS and does nothing on a page. Those assert what Chromium actually
 resolved: that an unlayered declaration beats the library's layered one, that
 the accent unset is ink, that quiet ink clears 4.5:1, that every box on the
-specimen starts on a baseline and is a whole number of them tall, that every
-register's last baseline lands on one, that nothing escapes the page at 390px,
-and that the measure lands on a field line the browser really laid out. They
-skip loudly rather than pretending to have checked.
+specimen starts and ends on a line, that every run of type on it has its
+baseline on one, that nothing escapes the page at 390px, and that the measure
+lands on a field line the browser really laid out. They skip loudly rather
+than pretending to have checked.
+
+The two grid questions are one function, `test/support/on_the_grid.js`, and
+`test/browsers/grid.mjs` asks it of the published specimen in Chromium, WebKit
+and Firefox through Playwright. CI runs all three; a grid checked in one
+browser is a claim about that browser. Chromium is also asked with the faces
+taken away and the document marked, which is the page as Safari lays it out,
+so the trim is measured on every push and not only in the one job that has
+WebKit.
 
 There are no pixel tests.
 
@@ -298,7 +450,8 @@ ladder; the names are the library's rather than the application's.
 | `--ink-quiet`, `--ink` | unchanged |
 | `--accent` | unchanged — still the application's to set |
 | `--font` | `--font-family` |
-| `--size-1..5`, `--space-N`, `--baseline`, `--measure`, `--page-max` | unchanged |
+| `--size-1..5`, `--space-N`, `--measure`, `--page-max` | unchanged |
+| `--baseline` (8px) | **gone.** `--line` (24px) is the baseline now — see 0.4.0 |
 | `.masthead__nav` | `.nav` |
 | `.channels` | `.pairs` |
 | `.form`, `.field`, `.button*`, `.copy`, `.errors`, `.hint`, `.empty` | unchanged |

data/app/assets/stylesheets/its-swiss.css

@@ -3,12 +3,13 @@
  * The layer order is stated before the first import rather than left to the
  * order the files arrive in, so a slow network cannot reorder the cascade.
  * Every file states its own layer as well, which is what makes this file and
- * six separate <link> tags resolve identically — the Rails helper writes the
- * six, and anything else can point at this.
+ * seven separate <link> tags resolve identically — the Rails helper writes
+ * the seven, and anything else can point at this.
  */
-@layer its-swiss.tokens, its-swiss.reset, its-swiss.type, its-swiss.grid, its-swiss.components, its-swiss.transitions;
+@layer its-swiss.tokens, its-swiss.faces, its-swiss.reset, its-swiss.type, its-swiss.grid, its-swiss.components, its-swiss.transitions;
 
 @import url("its_swiss/tokens.css");
+@import url("its_swiss/faces.css");
 @import url("its_swiss/reset.css");
 @import url("its_swiss/type.css");
 @import url("its_swiss/grid.css");