ウェブフォントの選び方と使い方

デザインの大切な要素のひとつがフォントです。

特に文字要素の多いWebサイトを作るときには、フォントがサイト全体の印象を決めると言っても過言ではありません。

Webに最適なフォントの選び方とWebフォントの上手な使い方を紹介します。

style

grid width 8, m spacing

background

#ebebeb

Webに最適なフォントの選び方

デザイナーには適切なフォントを選ぶ力が求められます。Webに最適なフォントの選び方を紹介します。

style

reading width, m spacing

標準フォントを表示させるべきか

まず、標準フォントとは、もともとコンピュータに入っているフォントのことです。デバイスフォント、システムフォントとも呼ばれます。

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

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

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

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

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

style

reading width

style

three up

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

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

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

style

reading width, l spacing

明朝体よりゴシック体？スクリーンに適したフォントを選ぶ

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

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

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

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

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

style

reading width

緩急が豊かな明朝体のフォント例

緩急が豊かな明朝体

線がほぼ均一なゴシック体のフォント例

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

style

two up

明朝体：DNP 秀英初号明朝 Std　ゴシック体：

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

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

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

style

reading width, m spacing

スクリーン幅の違い（改行位置）を考える

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

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

「多彩なマチエール」

明朝体：DNP 秀英初号明朝 Std　ゴシック体：

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

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

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

style

reading width, m spacing

スクリーン幅の違い（改行位置）を考える

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

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

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

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

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

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

style

reading width, l spacing

システムフォント以外のフォントをWebで使う方法

システムフォント以外のフォントをWebで使うための、主な2つの方法を紹介します。

style

reading width, m spacing

1.フォントを画像にして使う(非推奨）

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

style

reading width, s spacing

スクリーンサイズや解像度対応が難しい

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

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

style

reading width, s spacing

文字が読みづらい、修正ができない

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

画像からフォントを作成すると文字が小さくなって読みにくくなったことがわかる画面例

style

reading width, s spacing

Webアクセシビリティに配慮できない

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

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

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

style

reading width, s spacing

SEO効果が得られにくい

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

画像からフォントを作成するとSEO効果が得られにくいことをイメージした画

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

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

style

reading width, m spacing

2. Webフォントを表示させる

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

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

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

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

style

reading width, l spacing

きれいにフォントを表示させるCSSの指定方法

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

きれいにフォントを表示させるCSSの指定例

style

reading width, s spacing

font-family

font-familyとは、フォントの種類を指定するプロパティです。

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

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

style

reading width, s spacing

color

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

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

style

reading width, s spacing

font-weight

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

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

style

reading width, s spacing

font-style

font-styleとは、フォントのスタイルを指定するプロパティです。

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

style

reading width, s spacing

font-size

font-sizeとは、フォントの大きさを指定するプロパティです。

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

style

reading width, s spacing

line-height

line-heightとは、フォントの行間を指定するプロパティです。

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

style

reading width, s spacing

letter-spacing

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

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

style

reading width, s spacing

font-feature-settings

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

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

style

reading width, s spacing

writing-mode

writing-modeとは、縦書きと横書きを切り替えるプロパティです。

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

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

style

reading width, l spacing

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フォント」として利用できます。

style

reading width, l spacing

最後に

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

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

フォントの形から伝わるイメージと、Webサイトはユーザーによって可変であるという特性を意識しながらフォントを選べるようになると、Webデザインそのものがぐっとレベルアップします。

メイン画像の使用フォント

貂明朝テキスト https://fonts.adobe.com/fonts/ten-mincho-text

中ゴシックBBB

Ro篠Std

TBシネマ丸ゴシック

見出ミンMA31

style

reading width, xl spacing

style

reading width

Adobe Fontsを始めましょう。

無料で始める

ウェブフォントの選び方と使い方

目次

Webに最適なフォントの選び方

標準フォントを表示させるべきか

明朝体よりゴシック体？スクリーンに適したフォントを選ぶ

スクリーン幅の違い（改行位置）を考える

スクリーン幅の違い（改行位置）を考える

システムフォント以外のフォントをWebで使う方法

1.フォントを画像にして使う(非推奨）

スクリーンサイズや解像度対応が難しい

文字が読みづらい、修正ができない

Webアクセシビリティに配慮できない

SEO効果が得られにくい

2. Webフォントを表示させる

きれいにフォントを表示させるCSSの指定方法

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

最後に

Adobe Fontsを始めましょう。

関連記事

無料のフリーフォントで広がるデザイン

Adobe Fontsのおすすめフォント - デザインイメージに合わせた選び方

文章が読みやすいおすすめフォントの選び方

ウェブフォントの選び方と使い方

目次

Webに最適なフォントの選び方

標準フォントを表示させるべきか

明朝体よりゴシック体？スクリーンに適したフォントを選ぶ

スクリーン幅の違い（改行位置）を考える

スクリーン幅の違い（改行位置）を考える

システムフォント以外のフォントをWebで使う方法

1.フォントを画像にして使う(非推奨）

スクリーンサイズや解像度対応が難しい

文字が読みづらい、修正ができない

Webアクセシビリティに配慮できない

SEO効果が得られにくい

2. Webフォントを表示させる

きれいにフォントを表示させるCSSの指定方法

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

最後に

Adobe Fontsを始めましょう。

関連記事

無料のフリーフォントで広がるデザイン

Adobe Fontsのおすすめフォント - デザインイメージに合わせた選び方

文章が読みやすいおすすめフォントの選び方

あなたの感性はどちらを選ぶ？