タイポグラフィ | 1人design system advent calender 6日目

デザインシステムにおいてタイポグラフィをどのように管理していくか。

構成要素

まずタイポグラフィはどのような要素で構成されるか。代表的なものをあげると大体以下のようなものになる。

font-family
font-size
font-weight
line-height

この他colorやletter-spacingなども含めて、文字に関わるスタイルはタイポグラフィの構成要素と見なせる。

タイポグラフィの構成要素を個別ではなくセットで管理する

プロダクトにおいて使用されるfont-familyが色に比べれば圧倒的に少ないことはほぼ間違いないので、カラーパレットでの全ての色を洗い出すようなプロセスは必要ないはず。

一方で、色はbackground-colorとcolorの組み合わせがアクセシビリティの観点で問題なければ、比較的多くの組み合わせが許容されると思うけど、タイポグラフィはfont-sizeやline-height、font-familyを無数に組み合わせ可能にはしない方が良さそう。font-sizeだけ10パターン用意して、line-heightも10パターン用意するとそれだけで100通りの組み合わせが可能になってしまい、そういった状況になると管理が困難になる。例えば、Lexiconでは、全部で以下の８パターンのみを用意している。それぞれApp TitleやBody Textなど比較的明確な名前とパターンが8つのみであることを考えると、管理しやすい構成と考えられる。

App Title Regular
Main Title Regular
Body Text Regular
Body Text Semibold
Secondary Text Regular
Secondary Text Semibold
Small Text Regular
Small Text Semibold

プロダクトの事情によって増減はするだろうけど、基本的にはfont-size、line-height、font-weightなどのタイポグラフィの要素をセットでデザイントークンに定義しておいた方が管理上は良いはず。

Sketch plugin

デザイントークンでタイポグラフィを定義している場合、Sketchにjsonでimport/exportできるプラグイン textstylがあるので、これでプロダクトとデザインツールとでトークンの共有が可能になりそう。

www.textstyl.es

3日遅れで6日目はタイポグラフィについて書いた。7日目はマージンについて書く。