Typography

VitNode uses each device's own system font and a type scale that already knows its letter spacing. Zero font downloads, zero layout shift.

FontCopy Anchor Link

font-sans is the system UI stack: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android. Swap --font-sans in src/styles.css for a brand font. Stick to three weights: font-normal, font-medium, font-semibold.

Type scaleCopy Anchor Link

Every text-* size carries its own tracking: tighter as it grows, a little air at text-xs. Pick the size and you're done. Don't add tracking-tight on top. Sizes are rem, so the UI scales with the reader's browser font size.

HierarchyCopy Anchor Link

A few clear steps beat many similar ones. Weight and color do as much work as size.

<h2 className="text-2xl font-semibold text-balance">Notifications</h2>
<p className="text-muted-foreground text-sm leading-relaxed">
  Choose what lands in your inbox.
</p>

Balanced headingsCopy Anchor Link

text-balance evens out heading lines, so no word is left alone. Use text-pretty on paragraphs.

Numbers that changeCopy Anchor Link

tabular-nums gives every digit the same width, so counters, prices and table columns stop jiggling.

<span className="tabular-nums">{onlineCount} online</span>

Body text rulesCopy Anchor Link

• leading-relaxed on paragraphs, never below text-sm (14px) for reading.
• max-w-prose for long text.
• text-xs only for labels, badges and timestamps.

RelatedCopy Anchor Link