Ascender / descender

The parts of letters that stick up above the lowercase body (b, d, h) or hang below the line they sit on (g, p, y).

the tall bits and the tailsletters poking up and hanging downassenderthe stick on the hthe tail on the gthe part of the b that goes above the other letterswhy is the top of my text getting cut offletters overlapping between lines

See it

Live demo coming soon

What it is

Lowercase letters have a body (the x-height) plus optional parts that escape it. Ascenders rise above the x-height: b, d, f, h, k, l, t. Descenders drop below the baseline: g, j, p, q, y. How long a typeface makes them changes its whole personality. Short ascenders with a big x-height reads sturdy and screen-friendly (Verdana, Inter). Long, reaching ascenders read literary and elegant (Garamond, Baskerville).

Reach for the vocabulary when you are tuning tight type. If a stacked headline feels claustrophobic, the culprit is usually a descender from line one nearly touching an ascender from line two. If a font looks 'small' at the size you set it, its ascenders are eating the em box while the x-height stays tiny.

Gotcha: on the web, ascenders and descenders live outside the CSS content box you can see. Give an element 'overflow: hidden' plus a line-height under 1, and you will clip the top of the 'l' and the tail of the 'y'. Same trap with tight 'overflow: clip' cards and animated text reveals that mask by line box: mask by a padded box instead.

Ask AI for it

Set this display heading in a serif with long, dramatic ascenders and descenders (Playfair Display or EB Garamond) and tighten line-height to about 0.95 so the descenders of one line nearly interlock with the ascenders of the next. Add vertical padding and avoid overflow: hidden on the container so nothing clips. Keep the body copy in a high x-height sans with short ascenders for contrast.

You might have meant

x heightbaselinecap heightleadingovershoot

Go deeper