its-swiss 0.4.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d30726333f8265818004958fdb2276a6421ee240b3fbc0b7fc977adf1f39ddb3
-  data.tar.gz: 73e52320a14d39e0cb6da2fc22c8b55de7a57167d746a650232c603d12a7d7fc
+  metadata.gz: 21caf44ed83d26ed7f70b687206792252028a0120aafd843821322c776f0fd87
+  data.tar.gz: 3b3612935647de8dfc405d205a3adf6fd170b5f0493faa34d019cac02d237e4c
 SHA512:
-  metadata.gz: b8c711d2e82584e464c4bc47777a6340a118d53165e20664aff36ab5a43b582273dc60e7f13bbeb55de368054f9e7e9924d637e164d10608db09f1ef97f38631
-  data.tar.gz: 6dc95c59d9c700ac68c18c2f8915e0a44e2a79d3701fdaa30ea579ec024cb39a65379498ee40f778f09fa2d3575b3830f6c4eec9e626c586d6e1e443acb71ee0
+  metadata.gz: 478f0c8ded5c737b5370029359ab04c18b717b6398a9c2c6c3985a2289ebe8e8fc62797e3303d3e05bc593a23b0c565ae0fc88591afb53de3d4f20be638f54a5
+  data.tar.gz: 8bcebb3045f45a9d2a9a636b1544936badd47ea45c16ff6f8bcf79c45fe9706b1663da0f70b7d8ad262744d70589f8ede84fca40f30ca4289f4944df30c35ed6

data/CHANGELOG.md

@@ -2,6 +2,221 @@
 
 Semver. Consumers pin `~> 0.1`.
 
+## 0.7.1 — 2026-09-04
+
+### Fixed
+
+- **A control's text was clipped at the rule.** The faces put every
+  baseline on the under edge of its line by giving the type no descent, and
+  a browser centres an input's text in a box of its own and clips it there
+  — so with `font: inherit` every descender in a field, a select or a
+  textarea was cut off. A control's text is now set in `--font-family`
+  itself, with the font's own metrics, on one line inside the two-line box:
+  the box stays on the grid and the type is deliberately off the baseline,
+  the way a button's label is. `its_swiss_typeface` takes `family:` and
+  declares the typeface under its own name as well, so that `--font-family`
+  resolves to it.
+
+- **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 — 2026-09-04
+
+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
@@ -179,7 +394,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,12 +66,12 @@ 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` | 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 |
-| `--cap-correction` | Read, not set: what a trimmed register adds above its cap to reach the next baseline |
+| `--face-150`, `--face-200`, `--face-100` | Read, not set: the face a register names for its ratio of leading to size |
 
 ### The baseline
 
@@ -80,31 +86,131 @@ 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 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 out of register with
-each other. 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 line —
+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%;
+}
+```
+
+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); }
+```
+
+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(--line)) - 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>
 ```
 
-— 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(--half-line) + var(--cap-correction))`, which is the right padding
-whether or not the browser trims.
+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 — an input, a select, a textarea — is the other run of
+type the library takes off the baseline, and it does so on purpose too. A
+browser sets that text in a box of its own, centres it there and clips it
+there, and on a face with no descent every descender was cut off at the
+rule. So the text is set in `--font-family` itself, with the font's own
+metrics, on one line inside the two-line box: the box is on the grid, the
+line is the ladder's, and where the baseline falls inside the line is the
+font's. Which means the typeface has to exist under its own name as well as
+under the faces; `its_swiss_typeface` declares it there when given
+`family:`, and `--font-family` names it.
+
+#### 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" %>
+<%= its_swiss_typeface variable: "inter.woff2", family: "Inter" %>
+```
 
-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.
+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.
 
-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. Both stay on the grid.
+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
 
@@ -115,8 +221,9 @@ table of figures:
 <div class="subgrid">…</div>
 ```
 
-It halves `--line` for the block's **children**, and the leadings, the spacing
-and the cap correction all follow. The children, not the block: a block's own
+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.
 
@@ -225,7 +332,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.
 
@@ -240,7 +347,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.
 
@@ -248,7 +355,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 |
@@ -306,8 +414,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
@@ -322,10 +431,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.
 

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");