OpenType variable fontsは書体を増やす前に本文と見出しの使う太さを決める

OpenType variable fontsを使うなら、まず本文、見出し、buttonで必要な太さと幅を決めます。一つのfont fileから連続したvariationを扱えるため、見た目の選択肢は増えます。しかし、太さを細かく変えられることと、文章が読みやすくなることは別です。書体の演出を増やす前に、どの文字を誰がどの画面で読むのかを決めます。

Chromiumは9月20日、Chrome 62 BetaでOpenType variable fontsを扱えることを案内しました。従来は一つのfont fileがRegularやBoldなど一つのinstanceを持つのに対し、variable fontではweightやstretchなどのvariationを連続して扱えます。W3Cも7月にCSS Fonts Level 4の最初の公開Working Draftを出し、OpenType Variable fontsの扱いを追加しました。いずれも新しい仕組みです。公開siteへ入れる前に、使う書体、対象browser、fallbackを確かめます。

書体の選択肢と文章の役割を同じにしない

variable fontでは、見出しを少し太くする、狭い幅のspaceへ文字を収める、強調する語だけを変えるといった調整を考えられます。けれども、全ての文字へ同じ変化を加える必要はありません。見出し、本文、価格、住所、button、formの入力欄は、読者にとって役割が違います。

たとえば、会社siteのmain visualで短い見出しを大きく出す場合、太さや幅のvariationを使って印象を整える余地があります。一方、料金表や問い合わせformの説明まで極端に細くすると、読むための負担が増えます。見出しに使える調整を本文へそのまま持ち込まず、本文は長く読んでも疲れにくい太さと行間を先に決めます。

説明用の仮例として、住宅の施工例pageを考えます。section titleは少し太くして、写真の下にある短いcaptionと区別できます。けれども、施工内容、金額の条件、対応地域、問い合わせ先は本文として読ませる必要があります。titleを目立たせるためのvariationと、条件を正確に伝えるための本文を同じ基準で調整しません。文字の装飾が増えるほど、どこが重要な案内かがかえって分かりにくくなる場合があります。

太さを変える目的も書きます。「見出しを本文と区別する」「buttonの文言を読み落とさない」「英数字の価格を読みやすくする」のように、読者の行動へ結び付けます。「新しいfontを使う」だけでは、どのpageで確認すればよいか決まりません。目的が書ければ、太さを戻す必要が出たときにも判断できます。

variationを指定する前に書体が持つ範囲を確認する

variable fontは、どの書体でも同じvariationを持つわけではありません。太さ、幅、styleなどをどこまで扱えるかはfont fileごとに違います。CSSへ値を書いても、使うfontがそのvariationを持たなければ、意図した字形になるとは限りません。書体名だけで選ばず、fontの提供元が示す利用条件とvariationの範囲を確認します。

Chrome 62 Betaの案内では、weightやstretchなどを更新されたCSS propertyで調整でき、細かなaxisの値はfont-variation-settingsで扱えると説明されています。font-variation-settingsは、任意の数値を入れて見た目を試すための飾りではありません。書体がどのaxisを持つか、どの値が読める字形になるか、他の指定とどう重なるかを確認してから使います。

ここで、太さを変えるために複数のCSS指定を重ねすぎないようにします。見出しで太さを決め、別のruleでvariationを決め、small screenだけにさらに違う値を加えると、後からどの指定が見た目を変えたのか追えません。最初は一つのpage、一つの見出し階層、一つの変化に絞ります。変更したproperty、使った値、確認した画面幅を残します。

幅を狭くすれば、長い見出しを一行へ収められるように見える場合があります。しかし、文字を狭めることと、内容を短く書くことは別です。電話番号や日時を含む案内がsmall screenで読みにくいなら、fontを縮める前に、文章を分ける、見出しを短くする、buttonの周りへ余白を取る方法を考えます。書体のvariationで文章の設計上の問題を隠しません。

fallbackと対象browserを先に用意する

variable fontが使えないbrowserや、font fileを読み込めない状態でも、siteの本文と連絡先は読める必要があります。font fileが届かない場合は、指定したfallback fontで表示されます。variable fontで見出しの幅や太さを調整した後に、fallbackで文字が増え、line breakやbuttonの幅が変わることがあります。

通常の表示だけで確認せず、variable fontを使った状態と、fallbackだけで表示した状態を比べます。長い日本語title、英数字の価格、住所、電話番号、formのlabel、menu、buttonを同じpageで見ます。書体が変わったときにsectionの高さが増え、下のbuttonが画面外へ押し出されるなら、fontの表示だけを直して終わりにしません。

target browserも決めます。Chrome 62 Betaで使えると案内されたことは、利用者が使う全てのbrowserで同じ表示になることを示しません。公開するsiteで重要なbrowserと端末を選び、実際のfont fileを読ませて確認します。対応しない環境では、本文が通常のfallbackで読め、重要な案内が残る形を正本にします。

Web font serviceやfont fileを外部から使うなら、licenseとaccountの管理も分けます。制作会社が書体を選び、事業者が掲載内容を決め、別の担当者がfont serviceの契約を持つことがあります。更新時にfileを替えられる人、licenseを確認する人、表示を承認する人が分からなければ、書体を増やした後に保守できません。designの依頼と、fontの利用権やaccountを持つことを同じにしません。

small screenで本文と操作を実際に読む

font variationは画面幅に合わせた細かな調整に使えます。しかしsmall screenでは、見出しの演出より、本文、button、formが読めて押せることを優先します。大きな画面で美しく見える太さや幅が、狭い画面で同じように読めるとは限りません。

確認するときは、top pageだけを見ません。長いarticle、料金を含むservice page、問い合わせpage、検索結果や一覧pageを開きます。見出しが二行になったとき、本文との間隔が不自然でないか、buttonの文字が切れないか、linkを押せるかを見ます。文章量が多いpageほど、書体のわずかな幅や高さの違いが積み重なります。

公開後に修正が必要になったとき、書体のfile、CSSのproperty、template、font serviceのどこを戻すかを決めます。theme内へfont fileを置いたのか、外部serviceを読み込んでいるのか、Custom CSSで指定したのかによって、直す場所が違います。制作会社へ依頼する場合は、font名だけでなく、fileの置き場所、CSSの指定、fallback、license、確認したbrowserを受け取ります。

最初の一手は、本文、見出し、buttonのうち一つだけを選び、現在の書体と読ませる目的を書き出すことです。その部分で必要な太さや幅だけを検討し、variable fontが使えない状態でも読めるかを確認します。OpenType variable fontsは、文字を変化させるための技術です。siteの文章を読ませる目的は、書体を変えても変わりません。