Typography
Stack Sans Text: the one typeface, and exactly how to set it.
BrowserPod uses one typeface everywhere: Stack Sans Text. Headlines, body, UI, captions: all of it. One family keeps the voice consistent, and hierarchy comes from weight and size, not from switching fonts.
Fallback stack: "Stack Sans Text", system-ui, -apple-system, sans-serif.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*
Weights
Four weights, each with one job:
| Weight | Use |
|---|---|
| Regular (400) | Body copy, long-form text, descriptions. |
| Medium (500) | UI labels, buttons, navigation, captions, emphasis within body. |
| Semibold (600) | Subheadings (H3, H4), sublines, table headers. |
| Bold (700) | Headlines (Display, H1, H2) and nothing else. |
- Body copy is never Bold. Emphasis within body uses Medium, not Bold and not italics.
- Headlines are always Bold. Never set display-size type in Regular; it reads as unfinished.
- Never use faux bold or faux italic. If a style isn’t in the family, don’t make it up.
Type scale
The scale is a repeating ratio of 1.25, a deliberate expression of the brand’s underlying repeating logic. Each step is the previous multiplied by the same constant, the way the architecture repeats its arches.
| Style | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 61px | Bold | 1.05 | −2% |
| H1 | 49px | Bold | 1.1 | −1.5% |
| H2 | 39px | Bold | 1.15 | −1% |
| H3 | 31px | Semibold | 1.2 | −0.5% |
| H4 | 25px | Semibold | 1.3 | 0 |
| Subline | 20px | Medium | 1.4 | 0 |
| Body | 16px | Regular | 1.6 | 0 |
| Small | 14px | Regular | 1.5 | 0 |
| Caption | 12px | Medium | 1.4 | +2% |
The hierarchy in practice
Other typefaces for limited usage
The ‘Commit Mono’ font
We have a monospace font for specific uses, it is Commit Mono. The font is used for:
- Pseudoterminals (PTY)
- PTY-based output messages
- Code snippets
And where else?
Absolutely nowhere else. Including (but not limited to) not:
- On status messages
- In documentation (outside of code snippets)
- Because that’s what Jesus would do. He wouldn’t
Commit Mono in its natural habitat: a pseudoterminal at 13px. Download links are at the bottom of this page.
The ‘Caveat’ font
We have a handrwriting font. This should be used sparingly. For instance. It may be used:
- With an arrow, pointing at inline text, commenting on or expanding a point made
But never…
- Use Caveat inline
- Use Caveat more than once in a single non-scrolled view on a page
Caveat at 24px, doing the one thing it's allowed to do: an arrow and a comment on inline text, once per view.
Download the fonts
TTF is for on-device use: installing locally and working in design tools. WOFF2 is for production: self-host it and serve with font-display: swap. All three are variable fonts, so one file carries the full weight range.
| Family | On-device (TTF) | Production (WOFF2) |
|---|---|---|
| Stack Sans Text | StackSansText-Variable.ttf | StackSansText-Variable.woff2 |
| Commit Mono | CommitMono-Variable.ttf | CommitMono-Variable.woff2 |
| Caveat | Caveat-Variable.ttf | Caveat-Variable.woff2 |