Web植字の救世主、CSSプロパティleading-trim

行の上下にある空き(half-leading)とフォント自身が持つ余白によって、テキストボックスと別の要素とのマージンがCSS上の値より大きく見える問題。これを解決する策定中のプロパティleading-trimについて。

ボタンのテキストラベルが上下にずれて見える問題にも有効。また、フォント間で高さやベースラインの位置、文字の大きさが異なっていても、視覚的に位置をそろえることができる。

ちなみに、行間を意味する“leading”は、植字するときに読みやすさのため行間に鉛(lead)の帯を置いていたことが由来。

Leading-Trim: The Future of Digital Typesetting | by Ethan Wang | Microsoft Design | Medium medium.com