Type

Two faces

Nickel Gothic Variable for display, from Adobe Fonts. Inter for everything else, self-hosted.

Nickel has a width axis from 25 to 150 and a slant axis. It has no weight axis. A font-weight or a "wght" variation setting on it does nothing at all. This has confused more than one person, including in the portfolio deck, where display styles were set in a stand-in face because the real one was not loading.

The named widths are Compressed 25, Extra Condensed 38, Condensed 50, Narrow 75, Regular 100, Semi Wide 125, Wide 150. Site headlines sit around 62, between Condensed and Narrow.

The ramp

Display sizes are fluid, clamped between a floor and a ceiling so they scale with the viewport without a media query. Body sizes are fixed, because body copy that grows with the window gets harder to read on a large screen, not easier.

Sizes live in tokens. If you find yourself typing a pixel value for type, the ramp is missing a step and that is the thing to fix.

Weights

Inter ships in six weights here. 800 is used for labels and meta keys, and it must be loaded: at one point the CSS asked for 800 without it being present, so the browser was synthesising the weight by smearing the 700.

Rules that are not negotiable

No em dashes or en dashes anywhere on the site. This is a voice rule, not a typographic one, and it applies to every word including quotes.

Sentence case for headings. Title Case appears only where it is part of a proper name.

No contractions in professional writing. The site relaxes this where a sentence would otherwise sound stiff, but the resume and any application material do not.

The ramp is fourteen, not nine

Nine tokens did not cover what the site ships, and binding the Figma library made that impossible to ignore: five sizes in the components matched no token at all.

Five of the one-offs were not art direction. They are shared sizes the layout uses on every case study, so they are tokens now, with the same clamps they always had:

Token	Size	Where
--sdc-text-case-title	clamp(32px, 9vw, 56px)	Case study hero title
--sdc-text-block-lede	clamp(24px, 2.5vw, 32px)	The claim inside a case block
--sdc-text-quote	clamp(20px, 2vw, 28px)	Pulled quote
--sdc-text-stat	clamp(40px, 5vw, 64px)	Stat number
--sdc-text-stat-lg	clamp(48px, 6vw, 72px)	Stat number, where the numbers are the closing statement

--sdc-text-block-lede looks like a duplicate of --sdc-text-heading: both run 24 to 32. They are not the same. The lede climbs at 2.5vw and the heading at 3.2vw, so between roughly 750 and 1000px they differ. Collapsing them would quietly change the rendering at those widths, so they stay separate.

The home page keeps its own one-off sizes, and that is deliberate. Eleven clamp() values there are tuned to specific sentences on a single page. A hero sized to its own headline is not a reusable step on a scale, and forcing it into one would make it worse.

So the rule is not “never a one-off”. It is: if two pages use the same size, it is a token. If one page uses it to solve one composition, it is art direction and it stays local.

Checks before you ship

1. No new hard-coded pixel font size, and if one is needed, it goes in the list above rather than quietly into a rule.
2. No weight setting applied to the display face. The stylesheet still sets wght 400, 700 and 900 on it in three places; the face has no weight axis, so all three are inert. Do not copy that pattern into anything new.
3. No em dash or en dash in any new copy.