F4.16.2icon-label alignment under Dynamic Type设计
图标与文字混排的控件在字号放大后需要保持对齐关系
别名: 图标文字对齐 · scaled icon label · 放大后错位
概念解释
按钮、列表行、导航项常常是一枚图标加一句标签。字号一放大，标签的行盒长高、可能折成两行，图标还停在原来的二十四像素格子里。二者的对齐关系——相对第一行基线、相对整块垂直居中、相对行盒顶——必须在放大后仍然说得通。混排控件的缩放对齐（icon-label alignment under Dynamic Type）管的是这一对元素的相对位置，不是整页要不要重排。
机制
图标多半是固定像素或固定栅格的矢量，标签跟动态字体走。两个量的增长速度不同。默认档上「图标垂直居中于单行标签」看起来居中；标签变成两行之后，居中于整块会让图标悬在两行中间，既不指向第一行，也不再像行首标记。若图标跟着字号线性放大，行高会被图标撑破，或与邻行的图标撞在一起。更糟的是绝对定位：图标钉在行顶 8 像素，标签从上边距 12 像素起排，两个魔数在默认档碰巧对齐，放大后一个动一个不动。对齐要选一个在缩放后仍有意义的锚：多行时图标对准第一行的帽高或 x 高度，而不是对准块的几何中心。
边界
没有标签的图标按钮不在这里，它们要解决的是命中区，不是混排。图标本身是大插画、标签只是图注，图注放大不应强迫插画跟着长。表意依赖「图标与词在同一条光学线上」的短控件（分段开关、工具栏）对错位更敏感；长列表里图标只是行首装饰时，略微偏中可以接受，但第一行对不齐仍会让扫读找不到行的起点。
怎么落地
- 混排控件在最大字号下看三件事：图标是否还对着标签第一行、标签折行后图标有没有卡在两行夹缝里、邻行图标有没有重叠。
- 多行标签把图标锚在第一行，不要锚在整块中心；单行仍可垂直居中。
- 不要写死「图标 top: 8、文字 top: 12」。用第一行的 cap height 或居中于单行行盒，让两个量随字号一起解。