03 · Foundations
Typography
Inter for everything that reads. Caveat for exactly one greeting on the homepage. The scale below is the whole system.
Inter, the system typeface
Inter is self-hosted as a variable font. All weights and optical sizes live in a single file, so the scale can shift without loading anything new.
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Some shorter words follow to give the line a sense of rhythm.
The quick brown fox jumps over the lazy dog. Most prose on the site is set at this size, in --text-secondary against the warm cream.
Captions, metadata, helper text. Used sparingly, usually in text-muted or text-faint.
Section label
Caveat, the one exception
Caveat is a handwritten script used on exactly one surface: the opening greeting on shibin.co. It never appears on any other page, in any other component, in any other context.
hey, i’m shibin.
Caveat · 48 px · --text-secondary · loaded from Google Fonts
Rules
- Sentence case for all headings, labels, buttons, and nav.
- Tight tracking on large type (−0.02em to −0.025em). Body text stays at default.
- Relaxed line-height on body (1.65–1.75). Tight on headings (1.05–1.2).
- Color discipline: headings in
--foreground, body in--text-secondary, labels in--text-faint. - No other typefaces. No Helvetica, no Roboto, no system fallback as a feature. Inter is loaded locally; it should always be available.