Webに最適なフォント

デザイナーには適切なフォントを選ぶ力が求められます。

商品やサービスのイメージや世界観に合ったフォントを探したり、選んだりするのは楽しくもありますが、Webサイトのデザインをする場合には「ユーザーの閲覧環境の違い」を意識してフォントや実装方法を決める必要があります。

「閲覧環境」とは、たとえばOSの違いです。

同じWebサイトを見ていても、サイト側でフォントが何も指定されていない場合（※1）ユーザーが最初から持っているフォントが表示されます。

たとえばWindowsでは「メイリオ」、macOSやiOSでは「ヒラギノ角ゴシック」、Androidであれば、6.0以降で「Noto Sans CJK JP」が表示される仕組みとなっています。

つまり意図して実装しない限りは同じサイトであっても同一の文字は表示されないのです。

各社が標準で搭載しているこれらの「システムフォント（デバイスフォント、標準フォント）」は、いずれもスクリーンでの可読性が高いフォントですが、同じゴシック体でも印象が異なることがわかります。

そこで、実際のWebサイト制作では別のフォントを指定するケースも多くあります。

（※1 フォントの種類を指定するCSS（font-familyプロパティ）が設定されていない状態）

印刷物で見る文字、スクリーンで見る文字

それでは、スクリーンで見る文字に適したフォントとはどのようなものでしょうか。

まずは明朝体とゴシック体について考えてみましょう。

特に指定がない場合に表示されるフォントは、いずれもゴシック体です。システムフォントの中には明朝体もありますが、なぜゴシック体が優先されて表示されるのでしょうか。

明朝体は、細い横画やウロコ、はらいなどの緩急豊かな形が特徴です。

印刷物で利用すると読みやすくて情趣ある美しいフォントも多い一方で、細くて小さいサイズの明朝体を解像度の低いスクリーンで見ると、細い部分がかすれたように表示され、読みづらく感じられることがあります。

緩急が豊かな明朝体

線がほぼ均一なゴシック体

明朝体：DNP 秀英初号明朝 Std　ゴシック体：A-OTF 見出ゴMB31 Pr6N

それに対してゴシック体は、線がほぼ均一なので読みやすさが解像度に左右されにくいという特徴があります。そのためアンチエイリアス（※2）処理の無い低解像度のディスプレイが多数を占めていた時代から、多くのWebサイトで用いられていたため、今日でもたくさんのWebサイトがゴシック体を採用しています。

近年はスクリーンの高解像度化とブラウザやCSSの進歩により、フォントの精細な表現も実現可能になりました。しかしながら、ユーザーによってスクリーンの解像度がまちまちなことを考えると、Webサイトにおける長いパラグラフ（本文）については、まずはゴシック体を検討するのがおすすめです。

解像度の違いのほかにも、スクリーン幅の違いにも気を配る必要があります。

PC、タブレット、モバイルなどの異なった画面幅に応じてレイアウトを変える「レスポンシブWebデザイン」は幅に応じて改行位置が変化するので、印刷物のように厳密な字切り（改行）の管理が難しいのです。

デバイスの種類（幅）によって文字の改行も変化することを前提にサイトを設計する

こうしたスクリーンの解像度や幅の違いも「ユーザーの閲覧環境の違い」のひとつとして考えるべきでしょう。最終成果物（紙）のサイズがひとつしか存在しない印刷物のデザインと違って、Webデザインではサイズはさまざまです。

こうした違いをふまえてフォントの種類と実装方法を選んでいく必要があります。

（※2 斜めの線などをなめらかに見せる処理）

Webでフォントを使うには

デバイスフォント以外のプロが使う高品質のフォントをWebサイトで使うためには、かつてはAdobe IllustratorやAdobe Photoshop内で作ったテキストを画像として貼り付けるという方法が主流でした。

ところがこの方法は改行や文字詰めがデザイナーの思い通りになる反面、無数にあるスクリーンサイズやその解像度すべてに対応するのは難しいという問題点があります。

たとえば、従来のディスプレイ解像度に合わせた文字画像（72ppi）を、いまのMacやスマートフォンの高画素密度のディスプレイで見ると、ボヤケて読みづらくなります。

ほかにも画像化した文字がスクリーン幅によっては小さくて読みづらい、文字のコピー＆ペーストができない、特定のフォントが入ったマシンでないと文字の修正ができないといった不便さやトラブルもあります。

また、Webサイトを実装する上では、特に障がいや高齢などで視覚に制約があるユーザーに対する「Webアクセシビリティ」に配慮する必要性もあります。

WebアクセシビリティはJISで国内標準が策定されていてさまざまな対応ポイントがありますが、HTMLファイルを読み上げソフト（スクリーンリーダー、音声ブラウザ）で読み上げた際に音として意味がきちんと伝わるかどうかがポイントのひとつです。

これを考慮せずに「制作者のPCで見たときの美しさ」だけを優先して文字を画像として扱うと、結果として多くの人に情報を伝える機会を失うことにもなりかねません。

また、文字は文字として情報を持たせておいたほうが検索にひっかかりやすいため、検索結果を上位に表示させるための「SEO」（※3）の観点からも、文字情報は極力画像化せずに、HTMLの中できちんと記述されるのが望ましいと言えます。

しかしながら、システムフォントだけでは表現の幅が狭くなってしまうことは否定できません。WebアクセシビリティやSEOに配慮しつつ、印刷物のデザインのように美しいフォントを使ってWeb上で文字を組むのは多くのWebデザイナーが長年望んでいた技術でした。

そこで登場した技術が「Webフォント」です。

WebフォントはWebサーバーからフォントのデータを配信して表示する仕組みのことを指します。このWebフォントの登場により、ユーザーが持つシステムフォント以外の選択肢が生まれ、高品質の美しいフォントを柔軟に利用できるようになりました。

サーバーを介してフォントの情報を取得するので、文字の種類が多い日本語では読み込みが若干遅くなるというデメリットもありましたが、近年はダイナミックサブセット（※4）などの技術によって、こうした表示の遅延問題も解消されつつあります。

（※3 SEO：Search Engine Optimization,検索エンジン最適化）

（※4 必要な文字の形だけをサーバー側にリクエストする技術。Adobe FontsのWebフォントでもこれを採用している）

Webできれいに文字を組むには

システムフォントやWebフォントを問わず、Webで文字を扱うためにはCSSプロパティの理解が不可欠です。ここでは文字の設定や文字組みに関するCSSプロパティについて紹介します。

font-family

フォントの種類を指定するプロパティです。

font-familyプロパティの中にWebフォントの指定をすることで、Webフォントが表示されます。

font-familyプロパティは複数のフォントを指定でき、先に書いたものが優先されるという性質があります。先に欧文フォントを指定し、2番目に和文フォントを指定することで、英数字だけを特定のフォントに置き換える和欧混植も可能です。

color

フォントの色を指定するプロパティです。

＃からはじまるHex値のほか、RGBやアルファ（透過）を含めたRGBaでも指定が可能です。色の選定にあたっては、背景色と文字色のコントラスト比も可読性の重要な要素となってきます。

font-weight

フォントのウェイト（太さ）を指定するプロパティです。

bold（太字）などの指定のほかに、フォントによって数字を指定する場合もあります。

font-style

フォントのスタイルを指定するプロパティです。

イタリック体（italic）や斜体（oblique）を指定できます。

font-size

フォントの大きさを指定するプロパティです。

px（ピクセル）やpt（ポイント）といった絶対値のほかに、基準のフォントサイズを1としたemやrem、ブラウザの幅や高さを基準としたvw,vhといった相対値などを指定することができます。

line-height

フォントの行間を指定するプロパティです。

数字のみを指定して基準のフォントサイズから何倍になるかを指定するのが一般的です。読みやすい行間は文字の半分〜1文字程度とされているので、1.5〜2程度の指定がよいでしょう。

letter-spacing

文字の間隔を指定するプロパティです。

px（ピクセル）やpt（ポイント）といった絶対値のほかに、基準のフォントサイズを1としたemやremを指定することができます。また、マイナスの値をつけることも可能です。

font-feature-settings

OpenTypeフォントが持っているプロポーショナルメトリクスを有効にして、文字詰めができるプロパティです。さまざまな値が指定できますが、たとえば、約物（句読点や中黒、カギカッコ）などが自動で詰まりvます。ほかにも欧文フォントの場合、合字やスワッシュの表示を切り替えられます。プロポーショナルメトリクスを持たないフォントでは無効です。

<参考：https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html>

writing-mode

縦書きと横書きを切り替えるプロパティです。

値にvertical-rlを設定することで縦書きかつ右から左に流れる組みとなります。

text-orientationプロティを併用することで、文字の向きをコントロールすることも可能です。

Adobe FontsをWebフォントとして使う

Adobeのメンバーシップであれば、Adobe FontsからWebフォントを利用できます。

手順は以下のとおりです。

1. Adobe Fontsにアクセスし、「フォント一覧」から使いたいフォントを検索します。

https://fonts.adobe.com/?locale=ja-JP

2.フォントのカードの下部にある</>マークをクリックすると「新規Webプロジェクトの作成」のポップアップが表示されます。

3.Webプロジェクトに名前をつけ、チェックボックスでフォントの太さとスタイルを選択し「作成」をクリックします。

4.表示される埋め込み用のコードを利用したいHTMLの<head></head>の中に記述します。

5.利用したい箇所のCSSにfont-family,font-weight,font-styleプロパティに対して、ポップアップで指定された値を記述して保存します。

Adobe Fontsでは、美しいフォントを数ステップで気軽に「Webフォント」として利用できます。

「Webフォント」の登場により、構造化された適切なHTMLをベースに、美しいタイポグラフィが実現可能になりました。こうした「Webフォント」により、更新性や利便性の高い柔軟なレイアウトを持ったWebサイトを作ることができます。

Adobe Fontsには数多くのフォントがあるので、どのフォントを選ぶべきかあれこれ悩むかもしれません。フォントを選ぶためには、それぞれのフォントに対する知識も必要になります。こうしたフォントのバックグラウンドについてもAdobe Fontsのページで説明されているので、利用する前に一読しておくとよいでしょう。