[ TYPOGRAPHY_PROPOSALS ]
> Every section is rendered in its own fonts. Fonts lazy-load as you scroll — no tokens changed yet.
[ DIAGNOSIS ]
- !Share Tech Mono has one weight (400). Every
font-boldheading is browser-synthesised faux bold — smeared and low-contrast. - !No pairing. `sans` and `mono` both map to Share Tech Mono, so display and body text have zero contrast.
- !No mid-weights. Hierarchy relies on size + colour alone; there is no 500/600 step for UI.
CURRENT — Share Tech Mono
LIVEFONTS ▸ READYWhat ships today on the hacker-theme branch
+ Strengths
- >Strong terminal identity
- >Already wired up
- Trade-offs
- !Only one real weight (400) — every bold heading is FAUX bold
- !sans === mono: zero typeface pairing or contrast
- !No mid-weights for UI / emphasis hierarchy
[ 2026-06-28 ] · 7 MIN READ · #typography #design-systems
Rebuilding the type system
> Why weight matters
A typeface with a real weight axis lets headings carry genuine emphasis instead of the browser faking it. The quick brown fox jumps over the lazy dog — 0123456789 — and the difference between font-bold that is drawn vs. synthesised is immediately visible at this size.
// secondary heading
Secondary copy sits a step down in weight and colour. Good systems give you at least three usable steps so hierarchy never depends on size alone.
function greet(name: string) {
console.log(`> hello, ${name}`);
}WEIGHT LADDER (real cuts)
A · Refined Terminal
LOWEST RISKFONTS ▸ NOT LOADEDStay all-mono, but on a face with a real weight axis
+ Strengths
- >Keeps the terminal/brutalist identity intact
- >JetBrains Mono ships 100–800 — bold is REAL, not synthetic
- >Drop-in: only the font tokens change, every existing class still works
- >800 display weight gives headings genuine punch
- Trade-offs
- !Still a single-voice system — limited display/body contrast
- !Long-form body text remains monospace (lower reading density)
[ 2026-06-28 ] · 7 MIN READ · #typography #design-systems
Rebuilding the type system
> Why weight matters
A typeface with a real weight axis lets headings carry genuine emphasis instead of the browser faking it. The quick brown fox jumps over the lazy dog — 0123456789 — and the difference between font-bold that is drawn vs. synthesised is immediately visible at this size.
// secondary heading
Secondary copy sits a step down in weight and colour. Good systems give you at least three usable steps so hierarchy never depends on size alone.
function greet(name: string) {
console.log(`> hello, ${name}`);
}WEIGHT LADDER (real cuts)
[ HOW_TO_ADOPT ]
1. install
pnpm add @fontsource/jetbrains-mono
2. tailwind.config.js → fontFamily
sans: ['"JetBrains Mono"', ...defaultTheme.fontFamily.mono], mono: ['"JetBrains Mono"', 'Courier New', ...defaultTheme.fontFamily.mono], // display weight 800 available via font-extrabold
B · Grotesk × Mono
RECOMMENDEDFONTS ▸ NOT LOADEDGeometric display face paired with a mono body — true contrast
+ Strengths
- >Real pairing: heavy geometric headlines vs. mono body texture
- >Both faces have full weight axes — genuine hierarchy
- >Space Grotesk reads as "techy" — keeps cyberpunk spirit
- >Mono stays where it earns its keep: body, code, metadata
- Trade-offs
- !Two font families to load & maintain
- !Headings lose the pure-terminal look (a feature for some, not all)
[ 2026-06-28 ] · 7 MIN READ · #typography #design-systems
Rebuilding the type system
> Why weight matters
A typeface with a real weight axis lets headings carry genuine emphasis instead of the browser faking it. The quick brown fox jumps over the lazy dog — 0123456789 — and the difference between font-bold that is drawn vs. synthesised is immediately visible at this size.
// secondary heading
Secondary copy sits a step down in weight and colour. Good systems give you at least three usable steps so hierarchy never depends on size alone.
function greet(name: string) {
console.log(`> hello, ${name}`);
}WEIGHT LADDER (real cuts)
[ HOW_TO_ADOPT ]
1. install
pnpm add @fontsource/space-grotesk @fontsource/jetbrains-mono
2. tailwind.config.js → fontFamily
sans: ['"Space Grotesk"', ...defaultTheme.fontFamily.sans], // display/headings mono: ['"JetBrains Mono"', 'Courier New', ...defaultTheme.fontFamily.mono], // body/code // headings switch from font-mono -> font-sans
C · Editorial Three-Role
MOST READABLEFONTS ▸ NOT LOADEDDisplay + readable sans body + mono for code only
+ Strengths
- >Best long-form reading by far (Inter body)
- >Three clear roles: display / reading / code
- >Full weight scale for nuanced UI hierarchy (400→800)
- >Mono confined to code & terminal accents — used intentionally
- Trade-offs
- !Furthest from the current all-mono aesthetic
- !Three families to load; biggest visual departure
- !Risks softening the brutalist edge if borders/colors not kept loud
[ 2026-06-28 ] · 7 MIN READ · #typography #design-systems
Rebuilding the type system
> Why weight matters
A typeface with a real weight axis lets headings carry genuine emphasis instead of the browser faking it. The quick brown fox jumps over the lazy dog — 0123456789 — and the difference between font-bold that is drawn vs. synthesised is immediately visible at this size.
// secondary heading
Secondary copy sits a step down in weight and colour. Good systems give you at least three usable steps so hierarchy never depends on size alone.
function greet(name: string) {
console.log(`> hello, ${name}`);
}WEIGHT LADDER (real cuts)
[ HOW_TO_ADOPT ]
1. install
pnpm add @fontsource/space-grotesk @fontsource/inter @fontsource/ibm-plex-mono
2. tailwind.config.js → fontFamily
sans: ['"Space Grotesk"', ...], // headings/display serif: ['Inter', ...], // (used for body via prose) mono: ['"IBM Plex Mono"', ...], // code + metadata only