Descender

Descenders are the strokes of lowercase letters that hang below the baseline — the tails and loops in letters like 'g', 'j', 'p', 'q', and 'y'. They are the mirror counterpart to ascenders and equally important in determining how much vertical space a font consumes.

The depth of descenders varies dramatically between typefaces. Classical serifs tend to have long, elegant descenders. Modern typefaces designed for compact UI layouts often have short descenders to minimize the total line height needed.

/* Deep descenders require generous line-height to prevent clashing */
.generous-leading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.8; /* Without this, 'g' descenders touch 'h' ascenders below */
}

/* A font with controlled descenders can sit tighter */
.compact-ui {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

The double-story 'g' (with its closed lower loop) versus the single-story 'g' (a simple curve) is one of the most visible descender distinctions between typefaces. Fonts like Inter use the double-story 'g' deliberately for improved legibility, since the enclosed bowl provides more visual differentiation from 'q'.

Descenders matter in practical layout decisions too. When placing text in a button, card, or any bounded container, the descenders determine whether you need asymmetric padding — more at the bottom to optically balance the visual weight. A common technique is to add slightly more padding-bottom than padding-top to account for descenders making text look visually higher than its geometric center.

When clipping text with overflow: hidden or text-overflow: ellipsis, deep descenders on the last line may be unexpectedly cropped. Testing with letters like 'g', 'p', and 'y' on the last line is always a good habit.

Descender depth also influences font pairing. When combining a body font and a heading font, mismatched descender lengths can make the pairing feel unbalanced. A heading font with deep, expressive descenders next to a compact body font creates a hierarchy that may feel inconsistent in scale. Checking how both fonts' descenders behave at their respective sizes is a useful step in evaluating whether a pairing truly works.