ウェブフォントの選び方と使い方
デザインの大切な要素のひとつがフォントです。
特に文字要素の多いWebサイトを作るときには、フォントがサイト全体の印象を決めると言っても過言ではありません。
Webに最適なフォントの選び方とWebフォントの上手な使い方を紹介します。
目次
Webに最適なフォントの選び方
デザイナーには適切なフォントを選ぶ力が求められます。Webに最適なフォントの選び方を紹介します。
標準フォントを表示させるべきか
まず、標準フォントとは、もともとコンピュータに入っているフォントのことです。デバイスフォント、システムフォントとも呼ばれます。
商品やサービスのイメージや世界観に合ったフォントを探したり、選んだりするのは楽しくもありますが、Webサイトのデザインをする場合には「ユーザーの閲覧環境の違い」を意識してフォントや実装方法を決める必要があります。
「閲覧環境」とは、たとえばOSの違いです。
同じWebサイトを見ていても、サイト側でフォントが何も指定されていない場合（※1）ユーザーが最初から持っている標準フォントが表示されます。
たとえばWindowsでは「メイリオ」、macOSやiOSでは「ヒラギノ角ゴシック」、Androidであれば、6.0以降で「Noto Sans CJK JP」が表示される仕組みとなっています。
つまり意図して実装しない限りは、同じサイトであっても同一の文字は表示されないのです。
各社が標準で搭載しているこれらの「標準フォント（デバイスフォント、システムフォント）」は、いずれもスクリーンでの可読性が高いフォントですが、同じゴシック体でも印象が異なることがわかります。
そこで、実際のWebサイト制作では別のフォントを指定するケースも多くあります。
（※1 フォントの種類を指定するCSS（font-familyプロパティ）が設定されていない状態）
明朝体よりゴシック体？スクリーンに適したフォントを選ぶ
それでは、スクリーンで見る文字に適したフォントとはどのようなものでしょうか。
まずは明朝体とゴシック体について考えてみましょう。
特に指定がない場合に表示されるフォントは、いずれもゴシック体です。システムフォントの中には明朝体もありますが、なぜゴシック体が優先されて表示されるのでしょうか。
明朝体は、細い横画やウロコ、はらいといったの緩急豊かな形が特徴です。
印刷物で利用すると読みやすくて情趣ある美しいフォントも多い一方で、細くて小さいサイズの明朝体を解像度の低いスクリーンで見ると、細い部分がかすれたように表示され、読みづらく感じられることがあります。
緩急が豊かな明朝体
線がほぼ均一なゴシック体
明朝体：DNP 秀英初号明朝 Std ゴシック体：
それに対してゴシック体は、線がほぼ均一なので読みやすさが解像度に左右されにくいという特徴があります。そのためアンチエイリアス（※2）処理の無い低解像度のディスプレイが多数を占めていた時代から、多くのWebサイトで用いられていたため、今日でもたくさんのWebサイトがゴシック体を採用しています。
近年はスクリーンの高解像度化とブラウザやCSSの進歩により、フォントの精細な表現も実現可能になりました。しかしながら、ユーザーによってスクリーンの解像度がまちまちなことを考えると、Webサイトにおける長いパラグラフ（本文）については、まずはゴシック体を検討するのがおすすめです。
（※2 斜めの線などをなめらかに見せる処理）
スクリーン幅の違い（改行位置）を考える
解像度の違いのほかにも、スクリーン幅の違いにも気を配る必要があります。
PC、タブレット、スマートフォンといった異なる画面幅に応じてレイアウトを変える「レスポンシブWebデザイン」は幅に応じて改行位置が変化するので、印刷物のように厳密な字切り（改行）の管理が難しいのです。
明朝体：DNP 秀英初号明朝 Std ゴシック体：
それに対してゴシック体は、線がほぼ均一なので読みやすさが解像度に左右されにくいという特徴があります。そのためアンチエイリアス（※2）処理の無い低解像度のディスプレイが多数を占めていた時代から、多くのWebサイトで用いられていたため、今日でもたくさんのWebサイトがゴシック体を採用しています。
近年はスクリーンの高解像度化とブラウザやCSSの進歩により、フォントの精細な表現も実現可能になりました。しかしながら、ユーザーによってスクリーンの解像度がまちまちなことを考えると、Webサイトにおける長いパラグラフ（本文）については、まずはゴシック体を検討するのがおすすめです。
（※2 斜めの線などをなめらかに見せる処理）
スクリーン幅の違い（改行位置）を考える
解像度の違いのほかにも、スクリーン幅の違いにも気を配る必要があります。
PC、タブレット、スマートフォンといった異なる画面幅に応じてレイアウトを変える「レスポンシブWebデザイン」は幅に応じて改行位置が変化するので、印刷物のように厳密な字切り（改行）の管理が難しいのです。
デバイスの種類（幅）によって文字の改行も変化することを前提にサイトを設計する
こうしたスクリーンの解像度や幅の違いも「ユーザーの閲覧環境の違い」のひとつとして考えるべきでしょう。最終成果物（紙）のサイズがひとつしか存在しない印刷物のデザインと違って、Webデザインではサイズは千差万別です。
こうした違いをふまえてフォントの種類と実装方法を選んでいく必要があります。
システムフォント以外のフォントをWebで使う方法
システムフォント以外のフォントをWebで使うための、主な2つの方法を紹介します。
1.フォントを画像にして使う(非推奨）
デバイスフォント以外のプロが使う高品質のフォントをWebサイトで使うためには、かつてはAdobe IllustratorやAdobe Photoshop内で作ったテキストを画像として貼り付けるという方法が主流でした。ただし、デメリットが多いやり方となっています。
スクリーンサイズや解像度対応が難しい
ところがこの方法は改行や文字詰めがデザイナーの思い通りになる反面、無数にあるスクリーンサイズやその解像度すべてに対応するのは難しいという問題点があります。
たとえば、従来のディスプレイ解像度に合わせた文字画像（72ppi）を、いまのMacやスマートフォンの高画素密度のディスプレイで見ると、ボヤケて読みづらくなります。
文字が読みづらい、修正ができない
ほかにも画像化した文字がスクリーン幅によっては小さくて読みづらい、文字のコピー＆ペーストができない、特定のフォントが入ったマシンでないと文字の修正ができないといった不便さやトラブルもあります。
Webアクセシビリティに配慮できない
また、Webサイトを実装する上では、特に障がいや高齢という理由で視覚に制約があるユーザーに対する「Webアクセシビリティ(a11y)」に配慮する必要性もあります。
WebアクセシビリティはJISで国内標準が策定されていて多種多様な対応ポイントがありますが、HTMLファイルを読み上げソフト（スクリーンリーダー、音声ブラウザ）で読み上げた際に音として意味がきちんと伝わるかどうかがポイントのひとつです。
これを考慮せずに「制作者のPCで見たときの美しさ」だけを優先して文字を画像として扱うと、結果として多くの人に情報を伝える機会を失うことにもなりかねません。
SEO効果が得られにくい
また、文字は文字として情報を持たせておいたほうが検索にひっかかりやすいため、検索結果を上位に表示させるための「SEO」（※3）の観点からも、文字情報は極力画像化せずに、HTMLの中できちんと記述されるのが望ましいと言えます。
しかしながら、システムフォントだけでは表現の幅が狭くなってしまうことは否定できません。WebアクセシビリティやSEOに配慮しつつ、印刷物のデザインのように美しいフォントを使ってWeb上で文字を組むのは多くのWebデザイナーが長年望んでいた技術でした。
（※3 SEO：Search Engine Optimization,検索エンジン最適化）
2. Webフォントを表示させる
そこで登場した技術が「Webフォント」です。
Webフォントとは、Webサーバーからフォントのデータを配信して表示する仕組みのことを指します。このWebフォントの登場により、ユーザーが持つシステムフォント以外の選択肢が生まれ、高品質の美しいフォントを柔軟に利用できるようになりました。
サーバーを介してフォントの情報を取得するので、文字の種類が多い日本語では読み込みが若干遅くなるというデメリットもありましたが、近年はダイナミックサブセット（※4）といったの技術によって、こうした表示の遅延問題も解消されつつあります。
（※4 必要な文字の形だけをサーバー側にリクエストする技術。Adobe FontsのWebフォントでもこれを採用している）
きれいにフォントを表示させるCSSの指定方法
システムフォントやWebフォントを問わず、Webで文字を扱うためにはCSSプロパティの理解が不可欠です。ここでは文字の設定や文字組みに関するCSSプロパティについて紹介します。
font-family
font-familyとは、フォントの種類を指定するプロパティです。
font-familyとは、プロパティの中にWebフォントの指定をすることで、Webフォントが表示されます。
font-familyプロパティは複数のフォントを指定でき、先に書いたものが優先されるという性質があります。先に欧文フォントを指定し、2番目に和文フォントを指定することで、英数字だけを特定のフォントに置き換える和欧混植も可能です。
color
colorとは、フォントの色を指定するプロパティです。
＃からはじまるHex値のほか、RGBやアルファ（透過）を含めたRGBaでも指定が可能です。色の選定にあたっては、背景色と文字色のコントラスト比も可読性の重要な要素となってきます。
font-weight
font-weightとは、フォントのウェイト（太さ）を指定するプロパティです。
bold（太字）などの指定のほかに、フォントによって数字を指定する場合もあります。
font-style
font-styleとは、フォントのスタイルを指定するプロパティです。
イタリック体（italic）や斜体（oblique）を指定できます。
font-size
font-sizeとは、フォントの大きさを指定するプロパティです。
px（ピクセル）やpt（ポイント）といった絶対値のほかに、基準のフォントサイズを1としたemやrem、ブラウザの幅や高さを基準としたvw、vhといった相対値といった値を指定することができます。
line-height
line-heightとは、フォントの行間を指定するプロパティです。
数字のみを指定して基準のフォントサイズから何倍になるかを指定するのが一般的です。読みやすい行間は文字の半分～1文字程度とされているので、1.5～2程度の指定がよいでしょう。
letter-spacing
文字の間隔を指定するプロパティです。
px（ピクセル）やpt（ポイント）といった絶対値のほかに、基準のフォントサイズを1としたemやremを指定することができます。また、マイナスの値をつけることも可能です。
font-feature-settings
font-feature-settingsとは、OpenTypeフォントが持っているプロポーショナルメトリクスを有効にして、文字詰め(カーニング)ができるプロパティです。さまざまな値が指定できますが、たとえば、約物（句読点や中黒、カギカッコ）が自動で詰まります。ほかにも欧文フォントの場合、合字やスワッシュの表示を切り替えられます。プロポーショナルメトリクスを持たないフォントでは無効です。
<参考：https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html>
writing-mode
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のページで説明されているので、利用する前に一読しておくとよいでしょう。
フォントの形から伝わるイメージと、Webサイトはユーザーによって可変であるという特性を意識しながらフォントを選べるようになると、Webデザインそのものがぐっとレベルアップします。
メイン画像の使用フォント
貂明朝テキスト https://fonts.adobe.com/fonts/ten-mincho-text
中ゴシックBBB
Ro篠Std
TBシネマ丸ゴシック
見出ミンMA31
無料のフリーフォントで広がるデザイン
製作者が無償で提供して自由に使うことのできるフリーフォントには多彩なデザインのフォントがラインナップされています。上手に使いこなせば、より一層デザインの幅を広げることができます。
Adobe Fontsのおすすめフォント - デザインイメージに合わせた選び方
デザインをする際には、かわいいデザインにしたい、おしゃれなデザインに仕上げたいと言ったイメージや伝える目的にあったフォントを選択し、レイアウトをしていくことが大切です。ここではデザインイメージに合わせたフォントの選び方や、Adobe Fontsのおすすめフォントをご紹介します。
文章が読みやすいおすすめフォントの選び方
フォントには雑誌・書籍などの長文向きのもの、記事やコピーなどの見出し向きのもの、目を引かせるディスプレイ向きのものなど、用途・目的ごとにさまざまな種類があります。ここでは長めの、読ませる文章に向く、本文用日本語フォントのおすすめや選び方について紹介します。