The correct Inter in practice

Prototemplate sets one face, the rsms InterVariable 4.1, self-hosted from public/fonts/. The roman file is 352,240 bytes with sha1 f55b18fd, and it has two axes: optical size (opsz, 14 to 32) and weight (wght, 100 to 900). Most of the work is keeping the browser from replacing that file or degrading it, and the browser reports none of these failures. The measurements below come from a type audit on 2026-10-05 (Chrome for Testing, dark theme, 1440 and 390 wide, read after document.fonts.ready) and from a probe of these docs on 2026-10-21. The gt-brand skill holds the rules, and scripts/lint/type.mjs enforces them.

The bindingCopy Anchor Link

Bind a self-hosted font to an identifier that no installed font carries. next/font under Turbopack names the CSS family after the JavaScript identifier, so a binding named inter produces font-family: inter. CSS family names are case-insensitive, which makes that family the same name as a desktop "Inter".

On a machine with desktop Inter 3 installed, a failed file therefore renders Inter 3, which has no optical-size axis and different metrics. The same collision happens between pages of one site. Eight of the hub's /d/ direction pages declared const display = localFont(...), Turbopack gave every one the family display, and a client-side navigation could swap one page's face for another's. Give every localFont call a unique identifier.

The hub binds the roman's latin subset as ptInter in src/lib/fonts.ts and publishes it as --font-inter. In a page, getComputedStyle(document.body).getPropertyValue('--font-inter') starts with "ptInter". The type lint's rule T3 fails any other binding in that file.

Subsets and glyph namesCopy Anchor Link

Keep glyph names when you subset a variable font. pyftsubset's default writes a format 3 post table with no glyph names, and Chrome on macOS rasterises such a subset a shade differently from the full file at every weight. scripts/build/subset-inter.py passes glyph_names, and its subsets match the full file pixel for pixel.

The latin subset also carries the arrows, the command key, the check, the play glyph, the star, the bullet and the comparison signs that the shell draws beside Latin text, so a page of Latin text needs no symbols file. pnpm build:inter writes the subsets. Every localFont call outside src/lib/fonts.ts and the nameplate's src/lib/brand-fonts.ts sets preload: false, and lint rule T3 holds that.

Contextual alternates under letter-spacingCopy Anchor Link

Name calt in the feature list of any tracked text. Chrome turns off contextual alternates under any non-zero letter-spacing unless the feature list names calt. Without them a tracked heading loses the -> arrow, the colon centred between digits, the hyphen raised between capitals and the parentheses fitted to capitals.

The tracked width equals the tracked width with calt off, so the tracking had already turned the feature off. rsms.me's own stylesheet writes font-feature-settings: 'liga' 1, 'calt' 1 with the comment "fix for Chrome".

font-feature-settings is one property, and a rule that sets it replaces the inherited list. Every element in the hub therefore reads one of two tokens from src/components/viewer/tokens.css.

A rule that needs aligned figures adds font-variant-numeric: tabular-nums, which composes with either token. The brand deck's headings still list 'cv11', 'ss01' without calt, and the 2026-10-05 audit named that as the deck's only type defect. Lint rule T4 fails a feature list outside the two tokens, and the live rule L7 fails tracking without calt.

Optical sizeCopy Anchor Link

Let the optical-size axis do the tracking. With font-optical-sizing: auto the browser sets opsz to the font size in CSS pixels, clamped to 14 to 32, and the audit found that mapping on every run. From 32px the Display design is in effect, and the axis narrows glyphs and spacing together.

The widths are for "General Translation Motion brand" at weight 500. The axis tightens the spacing by about -0.004em a character at 16px, -0.022em at 24px and -0.039em from 32px. Inter 3's Dynamic Metrics formula is obsolete under Inter 4, and rsms.me no longer serves that page.

Never write font-variation-settings. It pins opsz and wght for the element and everything that inherits from it, and the automatic mapping stops. font-optical-sizing: none stops it too. Lint rule T5 fails both.

Tracking by roleCopy Anchor Link

Tracking tightens with size and weight, and weight 400 text is never tracked. Nothing on Inter is tracked positive in the hub's shell, and lint rule T8 fails a positive value.

The deck's -0.025em on display sizes is a house choice on top of the Display design, and nothing goes tighter. A first pass of a dashboard used one flat -0.028em at every size, and Kevin's review of 2026-09-25 read "kerning needs to be adjusted". Literal tracking values are ratcheted per file by the lint's rule R2.

MeasureCopy Anchor Link

Set a measure in em. The ch unit is the advance of the zero, about 0.63em in Inter, while Inter prose averages about 0.45em a character, so a measure in ch holds about 35 to 40% more characters than its number suggests.

The brand deck's book-view lead used 62ch and measured 84 characters a line over four lines at 1440. On 2026-10-05 the /motion lead ran seven lines at 1440 and fourteen at 390. A lead should read in two or three lines. skills/gt-aesthetic/scripts/measure-type.mjs --strict exits 1 on prose wider than 75 characters, and the live lint's L8 warns on a head lead past three lines.

Scripts and the Arial fallbackCopy Anchor Link

Set a script's stack on its own rule when the script needs its own face. next/font writes a fallback face for each binding (ptInter Fallback) as local("Arial") with size-adjust: 107.89%. Arial has Hebrew and Arabic glyphs, so in any stack that starts with the Inter variable those scripts render in Arial, and a Hebrew or Arabic face listed later never sees them. Chinese, Japanese, Korean and Devanagari are absent from Arial and fall through to the faces listed after it.

The fix is a stack with no Inter variable in front, applied by a :lang() selector or a class. The brand deck's .lang .ar rule does this for Arabic. On /motion, Hebrew renders in Arial by design, and src/app/motion/motion.css says so. Inter itself covers Latin, Greek and Cyrillic.

Weight and stack trapsCopy Anchor Link

Each of these rendered a different weight or face than the stylesheet appeared to ask for.

Lint rule T6 fails a weight above 500 outside the nameplate and the specimens, and T2 fails a bare Inter.

Seating display typeCopy Anchor Link

Seat each line of a heading by its first glyph's ink. A heading box is not where its ink sits, and Inter's metrics give the offsets.

Seating only the first line of a two-line heading leaves the second wherever its first glyph's side bearing puts it. Set the heading at the leftmost line's position and step the other lines in.

Chrome rounds the ascent and descent to whole pixels and floors the half-leading, so a heading's lift above its label steps with its size. On a GT blog page the descent of an h2 over 26.95px rounds from 6 to 7px, which happens from 1348px wide. There the heading sat 1.85px above its label instead of 1px. A 0.15px trim inside that media query measured 1.0px at 1360 and up. Fix a rounding step with a trim in the range where it occurs, and leave the cap ratio alone, because no single ratio fits a step function.

Canvas textCopy Anchor Link

A 2D canvas ignores font-feature-settings. A heading with two single-storey a's painted on a canvas with plain Inter came out 12px shorter than the same heading in the DOM. Build a FontFace from the Inter file with featureSettings (cv11 for headings, tnum for figures) and load it before the first paint.

WebKit adds two more differences. Its canvas picks the optical size from the painted pixel size, so an export paints with copies of the font pinned to one opsz. text-rendering: optimizeLegibility turns automatic optical sizing on in WebKit even under font-optical-sizing: none, so canvas text uses text-rendering: auto. geometricPrecision softens Chromium's small text. The gt-films skill carries the film kit's version of this rule.

Preloads that leak across routesCopy Anchor Link

Preload only the face every route draws. next/font preloads every face a module declares on every page that imports the module, and Turbopack shares CSS chunks between routes, so a face meant for one page reaches others.

Of Inter, the hub preloads only the roman latin subset, and the nameplate's two faces are its only other preloads. Every other face sets preload: false, and a face used on one route gets a family name that only that route's CSS names, so it cannot leak. The performance page has the measurement recipe.

The rendered instanceCopy Anchor Link

Read the instance Chrome rasterised. The DevTools protocol's CSS.getPlatformFontsForNode names it, with both axes in 16.16 fixed point.

The 17px lead on that page reads opsz110000, which is 17. A run that reports any other family is a defect unless the exceptions below name it. Check the files with shasum public/fonts/InterVariable*.woff2. The brand deck inlines the roman as a data URI, and decoding it gives the same bytes. The live lint (pnpm lint:type:live) reads the same values at 1440 and 390 for every visible text group.

Glyphs outside the subsetsCopy Anchor Link

A character the font does not map falls through to a system face without any warning. The theme button's half-disc ◑ (U+25D1) is outside every Inter subset and renders in Hiragino Sans on macOS, on the hub and in these docs. The live lint's rule L1 reports a Latin run in another face, and its range (INTER_RANGE in scripts/lint/type.mjs) stops at U+25A0 to U+25A1 in that block, so it never reports this glyph. Read a symbol's face with CSS.getPlatformFontsForNode.

The nameplate and the docs headerCopy Anchor Link

The hub's nameplate is the one place its chrome leaves Inter. span.pt-brand-word sets proto in Fraunces 600 and template in Space Grotesk 500 at 14.5px, loaded by src/lib/brand-fonts.ts. The probe read proto at -0.2175px tracking in Fraunces SemiBold and template at -0.435px in Space Grotesk Medium, both with font-feature-settings: normal. On 2026-10-21 the docs header drew [data-docs-nameplate], the word "Prototemplate" in Inter 15px at weight 500, so these pages did not show the nameplate. The design canon lists every chrome exception in its section 15.

Where these docs standCopy Anchor Link

On 2026-10-21 these docs drew the right file and missed the house type. The type base in tokens.css sits on the shell's roots, and fumadocs' root (#nd-notebook-layout) is not one of them. Every docs element therefore inherits Tailwind preflight's html rule, font-feature-settings: normal. The live lint found 288 problems on five docs routes at 1440 and 390.

A 28px title also lands at opsz 28, an intermediate instance short of the Display design. A fix that adds the docs root to the base rules and gives docs.css a ladder section was injected into the rendered pages and measured on /docs/handbook/design at 1440.

The cascade behind the normal features, and why the obvious one-token fix leaks to every route after a client navigation, are on the docs site traps page.