主干

The stem is the primary vertical stroke of a letter — the structural backbone around which the rest of the letterform is built. It appears as the main upright in 'l', 'b', 'd', 'h', 'n', 'p', and forms the vertical strokes in uppercase letters like 'H', 'I', 'F', 'E'. In most Latin typefaces, the stem is the heaviest stroke in the letterform.

Stem weight is the primary determinant of font weight — when you increase font-weight, you're fundamentally thickening the stems. This is why the CSS font-weight scale from 100 to 900 maps directly to how heavy the stems appear. At weight 400 (regular), stems have a moderate thickness appropriate for body text. At weight 700 (bold), stems are roughly twice as thick.

/* Stem weight progression visible in variable fonts */
.weight-demonstration {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Regular — moderate stem thickness */
}

.weight-demonstration-bold {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Bold — stems significantly thicker */
}

/* Variable fonts allow any stem weight on the axis */
.variable-weight {
  font-family: 'Roboto', sans-serif;
  font-variation-settings: 'wght' 550; /* Between Regular and Medium */
}

The stem-to-counter ratio is a critical legibility metric. For body text, there should be a clear distinction between the stem width and the white space inside letters. When fonts get compressed (either by design in condensed faces, or artificially via transform: scaleX() — a practice to avoid), stems and counters crowd together and legibility collapses.

Stem quality also reveals craft in type design. Look at the optical corrections at the junction of stems and crossbars in letters like 'n', 'h', 'm': skilled type designers add subtle width variations at these points to prevent optical blurring where strokes meet — keeping the joints visually crisp.

The stem is also the locus of hinting — the instructions embedded in font files that guide pixel-level rendering on low-resolution displays. Quality hinting ensures that stems snap cleanly to the pixel grid at small sizes, preventing the blurry, antialiased smearing that can make text hard to read. This is why fonts like Roboto and Source Sans 3, which were designed with extensive hinting work, remain crisp and readable in UI contexts where other fonts might feel soft.