Type & color

Inter

Self-hosted under the SIL Open Font License, so every visitor sees the same letterforms on every platform. Chosen over the two obvious alternatives partly on licensing: Helvetica Neue is commercially licensed, and SF Pro cannot legally be embedded on a website — Apple licenses it only for mocking up Apple platform UI. Inter is the closest freely embeddable analog: screen-first, tall x-height, and apertures that stay open at 13px where Helvetica's close up.

This is the variable build carrying Inter v4's optical size axis, so letterforms genuinely change shape with size the way SF's do, rather than being scaled uniformly. One file covers the whole 100–900 range, which makes 600 a real cut.

Three families, one ramp

The mono and serif are not separate ramps — they are the same three steps spoken in another voice. Put .font-mono or .font-serif on any element and it and everything inside it switches family, weight and tracking together, while every call site goes on saying font: var(--text-body).

The pairings were chosen by measurement rather than taste, because a shared ramp only holds if one step reads as one size in every family — and x-height governs perceived size far more than the nominal em does. Both companions sit within 3% of Inter's x-height, so no per-family size correction is needed. JetBrains Mono lost on exactly this point despite matching cap height almost perfectly: it runs 6.7% large in the x-height.

The same three steps in each voice — identical size and leading, only the family and its tracking differ:

Neither switch overrides weight. Roboto Mono's axis stops at 700, which used to need handling because the display steps were Extrabold and the browser would have clamped them silently. With the ramp topping out at Semibold that ceiling is nowhere near tested, so the special case was removed rather than kept against a future that may not come.

Type ramp

Three steps, and the small number is the design rather than an omission.This site has exactly one text size. --text-body sets every word on it, and hierarchy comes from weight, family, fills, rules and whitespace instead. Size is not a variable this design reaches for. Body is 10px on purpose — well below the 16px most accessibility guidance assumes, and a deliberate stylistic choice here rather than an oversight.

Three rounds of trimming got here. A ten-step ramp first lost h1–h4, lead and sm, seven of its ten steps having had no consumer outside this page documenting them. Then body dropped from 12px to 10px, which made the 10px caption step an exact duplicate of it. Then the 9px tracked-uppercase label step went too, and the caps tracking that existed only to serve it. Each time the same rule held: nothing stays in the ramp describing a distinction the site does not make.

The two fluid steps interpolate between a 375px and a 1440px viewport — resize the window and they move. Neither is spent on the site proper: the masthead above and the section heads on this page are the only things using them, and the portfolio itself is body throughout. They are kept because a large size invented later would sit outside the system rather than in it, and because the gap between heading and body is deliberately a cliff: there is no gentle ladder down, since nothing on this site needs one.

Gray ramp

Thirteen steps, pure black to pure white, spaced by even increments of CIELAB L* rather than even hex values. An even hex ramp is perceptually wrong — sRGB is gamma-encoded, so the dark end bunches into near-identical swatches while the light end spreads out. Stepping L* keeps the visual gap between neighbours constant the whole way up, which is what makes contrast pairing arithmetic: 7 steps apart clears 4.5:1 and 5 steps apart clears 3:1.

Full-contrast ratios clear 4.5:1 for body text. --gray-600 lands at 4.48 on white — it misses by a hair, so --gray-700 is the lightest step safe on white, and --gray-500 the darkest safe on black.