webフォントとタイポグラフィの関連性

本記事は、サムザップ Advent Calendar 2019 #2 の12/22の記事です。

サムザップでフロントエンドエンジニアを担当している者です。
前職でDTPオペレーターをやっていた関係と現在の仕事がweb中心のため、普段からフォント関係の記事を読むのが好きだったりします。
今回は昨今のwebフォント界隈における状況と、具体的にプロジェクト内で導入してみての所感をまとめてみました。

webフォントの歴史と日本国内の状況

Information Architecture（情報アーキテクチャ）の先駆者でもあるエミール・ルーダー氏の言葉を借りれば「web design is 95% typography（webデザインの95%はタイポグラフィである）」と言われています。
文字そのものがデザインの要素として重要な役割を担っており、フォントが変わるだけで印象がグッと変わりますよね。

webフォントはざっくりな説明をすればwebサーバー上にフォントファイルを置き、製作者の意図するフォントを表示できるようにした技術です。
CSS3.0 fonts moduleから機能定義されたもので誕生したのは2010年頃ですが、2014年頃までは日本国内だけ利用率が恐ろしく低くありました。
主な理由として日本語に対応しているフォントが非常に少ないことや、アクセシビリティに影響するレベルでページの表示速度が非常に遅い（※初期のwebフォントはページ読み込みの度にフォントデータ丸ごと読み込んでいるものもあった）ところが大きかったです。
なにせ第一水準の漢字だけでも約3000文字、かたやアルファベットは26文字。容量も欧文フォントが数十kbに対し日本語フォントは10M超えるものもありました。

スマホの標準ブラウザで表示されるフォント問題

日本のwebフォントの普及率がなかなか進まない間に、スマホ端末で表示される標準フォントは年々独自仕様の嵐となります。
特にAndroid端末はOSのバージョン/発売ブランドによって全てが異なるだけではなく、GooglePlayの「iFont」でお好みのフォントをインストール可能としたため、デザイナーの意図しないタイポグラフィが当たり前のように生まれることとなりました。

あくまで一例です
◆OS
・Android 5.1 以前：マルベリ（モトヤフォント）
・Android 6.0 以降：Noto Sans CJK JP

◆ブランド
・SONY Xperia：ソニーモバイルUDゴシック (Android 5.0 lollipopから)
・SHARP AQUOS：新ゴM （モリサワフォント）
・Samsung Galaxy：Samsung Sans etc.
※GooglePlayの「iFont」でお好みのフォントをインストール可

これは所謂webサイトに限らず、webアプリケーションでも同様の問題を抱えます。

弊社のプロダクトを例にとると戦国炎舞はネイティブアプリであるものの、比較的静的な挙動で済むような項目はwebviewで制作することも多いため「特定の端末でレイアウトが崩れる」という報告が挙がるようになりました。
iPhoneでもOSのメジャーアップデートで時折フォントが変わることがあるのですが、Androidに関しては手が付けられない状況となりフロント泣かせだったのではないかと思っております。

Google Fontsの正式日本語対応

効率悪いけど目立たせたい文字は画像で作成するしかないのかなぁ、とある種の妥協をしていた日々を送っていた時です。
2018年10月にGoogleのwebフォントサービス「Google Fonts」が日本語に正式サポートされます。（アーリーアクセス版は2016年から存在）

懸念していたファイルサイズについてもフォントをまとめてダウンロードするのではなく、いくつかのファイルに分割し必要に応じてダウンロードさせるような仕組みとなっています。「これは試す価値が十分ありそうだな」と思い、まずはお試し感覚で影響範囲が少なそうな一部の機能で使ってみることにしました。
戦国炎舞は文字画像で利用するフォントは基本「小塚ゴシック Pr6N」を利用しており、同じフォントを用意するのは難しかったため、Google Fonts内の「さわらび明朝」を採用しております。

2019年現在8種のフォントが扱え、「Noto Sans JP」「Noto Serif JP」いう定番ものが入っているので、普通に使うには十分事足りるかと思います。

無論巷では有料のwebフォントサービスも多数存在します。
今回扱わなかった理由は費用面及び、一部のサービスでは終了しているようなフォント（たぶん採算的に厳しかったのかと）があったため、今後まだシェアが伸びる可能性の高い「Google Fonts」を選択した次第です。

Google Fontsの使い方

詳しい解説をされている記事がたくさんあるので今更感が強いですが、とっても簡単です。

【1】フォントの選択
Google Fontsにアクセスしお好みのフォントを選択します。
フォントを選んだら「＋」マークを押すと画面右下に「1Family Selected 」とモーダルウィンドウが表示されます。(フォントは複数追加することも可能です)
※ここでは「さわらび明朝（Sawarabi Mincho ）」を例にします

Family Selected 内の「embed」タブにあるコードを参照し、以下の２つをコピーします。

・head内で使用
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
・CSSで使用
font-family: 'Sawarabi Mincho', sans-serif;

【2】該当記述の埋め込み
該当のhtml及びテンプレートのhead内に以下を挿入します。

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap" rel="stylesheet">

次は表示したい領域のCSSに「font-family」を設定します。
全体で表示変更したいのならbodyでも問題ないのですが、サイト及びアプリケーション内で複数のフォントを扱う予定がある場合は何かしらclass名で定義してあげるのがよろしいかと思います。

body{
  font-family: 'Sawarabi Mincho', sans-serif;
}

もしくは
.(ユニークなclass名){
  font-family: 'Sawarabi Mincho', sans-serif;
}

※ちなみにライセンスは個人・商用問わずフリーであるものの、念のためアプリケーション内にライセンス表記の記載はしております。

戦国炎舞で試した結果

文字画像	Google Fonts

文字画像は若干明るすぎる所もあり少し抑えてみた結果、意外と違和感も少なくすんなりと受け入れられました。現在では数ヶ所の機能で使い始めており、既存機能でも徐々に移行を進めております。

また、利用に辺ってはCDN形式でいくのか、それともアプリケーション（LOCAL）側にDLさせて運用していくかを考慮した結果CDN形式でいくことに決めました。
大きな理由としてはフォントのアップデートが入った際のメンテナンス工数を軽減させるためです。
フォントにもよりますが平均で年1～2回前後更新が入るため、都度ダウンロードし直してアプリケーションに組み込みテストを行うとなると定期的にデバッグ工数が肥大化してしまいます。運用を前提においたプロダクトであるのなら、なるべく定常工数の負担が少なくなるような仕組みで行いたいなと考えました。

webアプリケーションでも積極的な採用を

今回掲載した箇所に限ると効果も薄いのでは…と思うかもですが、広告のような訴求画像で大量のキャッチ文字が飛び交うものに対してwebフォントを扱えば工数削減が期待できます。今まで仕様変更や文言誤りがある度にレイアウトを微調整しながら再書き出しする必要があったため、いつも大変そうだなぁと感じておりました。
画像を修正し再UPの際にブラウザのキャッシュクリアを行っても、端末そのものにキャッシュをさせている場合はファイル名にパラメータを付与したり別名でUPする必要があったりと色々な意味で手間がかかっているのが実情です。
それと単純に画像数が減らせる＝リクエスト数の削減にも繋がるかと。

余談ですが「Google Fonts」の導入が低コストで行えた関係もあり、他プロダクトでもその流れで採用できました。
横展開も安易でデメリットもほぼ存在しないものなのでおすすめです。

明日は、@kida_hironariさんの記事です。