UIデザインを担当している三谷（佑）です。
モビルスでは月に一度、社内LT会があり、先日line-heightに関する話をしました（プロダクト・エンジニアリングLT会 第5回）。line-heightは文字の歴史的経緯から複雑で、どういった振る舞いをするプロパティなのか理解するのが大変です。
こちらは2019年にfigmaが公開したline-heightについての素晴らしい記事で、活字組版からデジタルに至るまでが紹介されています。このタイミングでfigma内でのline-heightの仕様も変更されたそうです。
モビルスでは画面制作にfigmaを使用していますので、line-heightの解説とfigmaのツール内でのline-heightの扱いについて理解をしておくと、デザイナー・エンジニア双方での認識合わせがスムーズになります。
下記に要点と制作時に注意する点をまとめました。
line-heightとは
- CSS のプロパティで、行ボックスの高さを設定します。（行ボックスの中に複数のインラインボックスを含む場合、インラインボックスの高さはline-heightによって決まります。）
- line-height:100％;、またはline-height:1;の行ボックスの高さは、フォントサイズの100％、つまりフォントサイズ20pxの行ボックスの高さは20pxになります。
- フォントサイズと「line-height」の差を「レディング」と呼び、レディングの半分をハーフ・レディングと呼び、文字の上下に分散されます。
参考：「MDN Web Docsの行ボックス（※）とは」
※行ボックスは、テキストの各行を包むボックスのことです
コーディング時の注意点
- line-height の値は単位をつけない（親要素の値が継承され意図しない結果になるため）
- アクセシビリティを考慮して値は1.5 以上を推奨
参考：MDN Web Docsのline-height
主要な段落コンテンツでは、 line-height の値が 1.5 以上になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。developer.mozilla.org
figma制作時の注意点
- ツール内で指定できるのは、％とpxとautoになります。
- autoを指定するとDev Modeで見た時に、line-height: normal;になります。
- Dev Modeで見たときの単位を変更できないので、単位をつけない値を入れられないことに注意してください。
参考：MDN Web Docsのline-height（再掲）
- normal ユーザーエージェントに依存します。デスクトップブラウザ (Firefox を含む) は 要素のfont-family によって決まる、おおよそ 1.2 という既定値を使いますdeveloper.mozilla.org
おわりに
今回はline-heightを中心にまとめました。レイアウトへの影響が大きいプロパティですので気をつけて扱いたいですね。
モビルスでは、一緒に働く仲間を募集中です！
興味のある方は、ぜひ採用情報のページをご覧ください！
