Skip to content

Typography

JetBrains Mono font configuration and sizing used across @diffgazer/ui components.

@diffgazer/ui uses JetBrains Mono for all text. Monospace is not just for code -- it IS the design.

Font configuration

The docs app self-hosts its checked-in JetBrains Mono variable font. The font loads from the same origin as the page, matching the app's font-src 'self' data: Content Security Policy.

css
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}

For another app, copy a licensed font file into that app's static assets and adjust the URL. A hosted font provider is optional, not an @diffgazer/ui requirement. Choosing one adds an external request, sends visitor connection data to that service, and requires its origins in your CSP.

Apply the base font via the ui-base class or the CSS variable:

css
font-family: var(--base-font-mono);

Font stack

plaintext
"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
Menlo, Consolas, "Liberation Mono", monospace

The fallback chain ensures monospace rendering even if JetBrains Mono fails to load.

Sizes used in @diffgazer/ui

The two microtype steps below the Tailwind default scale ship as theme tokens — use the token utilities (text-2xs/text-3xs), never a raw arbitrary-pixel value like text-[Npx].

SizeTailwind ClassTokenUsed For
9pxtext-3xs--text-3xs (0.5625rem)Densest chrome microcopy
10pxtext-2xs--text-2xs (0.625rem)Tiny labels and compact metadata
12pxtext-xs—Code blocks, props tables, badges, inline code
14pxtext-sm—Body text, menu items, input text
16pxtext-base—Section headers, larger labels

Weights

WeightTailwind ClassUsed For
400font-normalBody text, code
500font-mediumControls and compact labels
600font-semiboldTypography weight="semibold", Stepper and HorizontalStepper chrome
700font-boldHeaders, labels, emphasis

No variable sizing

@diffgazer/ui does not use rem-based fluid typography or responsive font scaling. Sizes are fixed. This is intentional: terminals use fixed-size fonts.