Icon-plus-label controls must keep their alignment after type scales

What it is

Buttons, rows, and nav items are often one icon plus one label. Type enlarges, the label’s line box grows and may wrap, and the icon is still sitting in its twenty-four-pixel cell. The relationship — to the first-line baseline, to the block’s vertical centre, to the top of the line box — still has to make sense after the scale. Icon-label alignment under Dynamic Type is about that pair’s relative position, not about whether the page reflows.

Why it happens

Icons are usually a fixed pixel or a fixed vector grid; labels follow Dynamic Type. The two quantities grow at different rates. At default size, “vertically centre the icon on a single-line label” looks centred. Once the label is two lines, centering on the block hangs the icon between the lines: it no longer points at the first line and no longer reads as a row marker. If the icon scales linearly with type, it blows the row height or collides with the icon on the next row. Absolute positioning is worse: icon pinned sixteen pixels from the top, label starting twelve pixels down — two magic numbers that coincide at default and diverge under scale. Alignment needs an anchor that still means something after scaling: on a wrapped label, the icon should meet the first line’s cap height or x-height, not the geometric centre of the block.

Where it stops holding

Icon-only buttons are not this problem; they care about hit area, not mixed alignment. When the icon is a large illustration and the label is a caption, the caption should not force the illustration to grow. Short controls whose meaning depends on icon and word sitting on one optical line (segmented controls, toolbars) are more brittle under drift. In a long list where the icon is only a row ornament, a slight centre bias can pass, but a first line that does not line up still hides the start of the row from a scan.

Applying it

• At maximum type, inspect three things on mixed controls: does the icon still face the label’s first line, is it trapped between two wrapped lines, do neighbouring icons overlap.
• Anchor the icon to the first line when the label wraps; single-line rows may still centre vertically.
• Do not hard-code “icon top: 8, text top: 12.” Centre on the cap height of the first line, or on a single line box, and let both quantities resolve with type size.

Related

• Same group: F4.16.1 Scale testing must include the system’s largest type bucket, not only the usual range · F4.16.3 Large type may be on together with other assistive settings · F4.16.4 Interfaces that ignore Dynamic Type lose low-vision and older users
• Nearby: F6.02 Icon plus text · F4.09 Dynamic Type
• Search terms: icon label alignment · Dynamic Type · baseline alignment