Font System

Typography is governed by system design tokens. Components consume standard sizes and font families defined by the design system; they should not define arbitrary pixel values or reach for monospace fonts to solve spacing problems.

1. Dynamic Numbers and Width Jitter

When a number dynamically ticks—such as in a live counter, timer, download progress indicator, or financial ticker—the box around it frequently jitters.

• ❌ The Error: Using default proportional figures or switching the whole font to font-mono. In proportional typefaces, each digit has a different width (e.g. 1 is much narrower than 8), causing the container width to shake on every tick. Switching to font-mono stops the shaking, but changes the letterforms and breaks typographic consistency with surrounding text.
• ✅ The Fix: Add tabular-nums (font-variant-numeric: tabular-nums). This activates the typeface's built-in tabular figures feature, giving every digit an identical width while preserving the font's aesthetic design.

"use client";

import { useEffect, useState } from "react";

💡 Usage Boundary: Do not apply tabular-nums globally to body paragraphs. Proportional figures are designed for reading rhythm in prose; reserve tabular-nums specifically for counters, timers, data tables, and metrics.

2. The Type Scale Ladder

Stick strictly to the established typographic scale instead of arbitrary one-off pixel values:

A higher level on the ladder should differ by size, font weight, and line-height simultaneously. A heading that only changes in font size without proportional weight often competes with the body text below it rather than commanding the hierarchy.