【HTML】フォントの基本から応用までを徹底解説

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLでフォントを指定する方法は何だろうか？」
「HTMLのフォント指定の書き方を学びたい」
「HTMLでのフォント指定の具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

HTMLでのフォント指定の基本的な使い方
フォント指定を活用するためのテクニック
HTMLでのフォント指定を用いた具体的な使用例

当記事では、HTMLでのフォント指定の基本的な使い方だけでなく、フォントファミリーの指定方法や、カスタムフォントの使用方法など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/09/11 13:58:24時点 Amazon調べ-詳細)

HTMLとフォントについての基本

こちらでは、HTMLとフォントについて基本的な説明をします。

HTMLでフォントを指定する理由についても見ていきましょう。

HTMLとは何か？
フォントとは何か？
HTMLでフォントを指定する理由

HTMLとは何か？

HTML（HyperText Markup Language）はウェブページの基本的な構造を作るためのマークアップ言語です。

ウェブページの各部分をどのように表示するかを決める役割を果たします。

タイトル、ヘッダー、パラグラフ、画像、リンクなど、ウェブページ上の要素はすべてHTMLタグを使用して作成されます。

フォントとは何か？

フォントは、文字を表示するためのデザインやスタイルを指します。

同じ文字でも、フォントによってその見た目や印象は大きく変わります。

ウェブデザインにおいて、適切なフォントの選択は非常に重要で、そのページの雰囲気やメッセージを視覚的に伝える役割を果たします。

HTMLでフォントを指定する理由

HTMLでフォントを指定する理由はいくつかあります。

主なものを挙げると以下のとおりです。

視覚的なデザインと一貫性の確保: 適切なフォントを指定することで、ウェブページの視覚的なデザインを制御できます。フォントはウェブサイトの雰囲気やスタイルを表現する重要な要素であり、選択したフォントはウェブページ全体で一貫して使用することで統一感を生み出します。
可読性の向上: 適切なフォントを選択することで、ウェブページのテキストが読みやすくなります。フォントのスタイル、文字の大きさ、行間、文字間などの要素がテキストの可読性に影響を与えます。適切なフォントを選択し、テキストのレイアウトを調整することで、ユーザーが情報を簡単に読み取れるようになります。
ブラウザのデフォルトフォントの影響を回避: ブラウザはデフォルトのフォントファミリーを持っており、ユーザーの環境に応じて異なるフォントが適用されます。しかし、異なるオペレーティングシステムやブラウザごとにデフォルトフォントが異なる場合があり、ウェブページのデザインや表示に一貫性が欠ける可能性があります。フォントを明示的に指定することで、デフォルトのフォントに依存せずに一貫性のある表示を実現できます。
ブランドイメージの醸成: フォントはブランドイメージの一部となります。特定のフォントを使用することで、ウェブページが特定のブランドや企業を象徴するような独自のスタイルを持つことができます。ブランドの個性や特徴を反映するフォントの選択は、ユーザーにブランドの認知と親近感を与える重要な要素です。

HTMLフォント指定の基本と実例

こちらでは、「HTML フォント指定」の基本的な方法と実例を詳しく解説します。

初めての方でも理解いただけるよう、順番に説明していきます。

「font」タグについて（HTML5では非推奨）
CSSを使用したフォント指定
「font-family」プロパティの使い方
フォント指定の候補設定
実践例：フォント指定の利用

「font」タグについて（HTML5では非推奨）

HTMLの初期のバージョンで使われた「font」タグは、現在非推奨とされています。

代わりにCSS（Cascading Style Sheets）を使うべきです。

CSSを使用することで、フォントのスタイルを一元管理しやすくなるなどのメリットがあります。

CSSを使用したフォント指定

CSSを使用すると、HTML内の特定の要素に対してフォントを指定することが可能です。

例えば以下のように記述すると、全ての段落（pタグ）に対してフォントを指定できます。

p {
    font-family: "Times New Roman", Times, serif;
}

この例では、ブラウザは指定された順番にフォントを探し、最初に見つけたフォントを適用します。

「font-family」プロパティの使い方

「font-family」プロパティは、適用するフォントを指定するためのものです。

複数のフォントを指定することが可能で、ブラウザは指定された順番にフォントを探し、最初に見つけたものを適用します。

/* フォントの指定 */
.custom-font {
  font-family: "Arial", "Helvetica", sans-serif;
}

指定するフォントがユーザーのシステムにない場合、ブラウザのデフォルトのフォントが使用されます。

フォント指定の候補設定

HTMLのフォント指定では、複数のフォントを指定しておくことが推奨されます。

なぜならすべてのユーザーが、同じフォントを持っているわけではないからです。

複数指定したことにより、指定したフォントがない場合でも、適切なフォントが表示されます。

例えば、以下のように指定することで、最初に”Times New Roman”を試し、それがなければ次に”Times”を、それもなければ”serif”を使用します。

p {
    font-family: "Times New Roman", Times, serif;
}

実践例：フォント指定の利用

以下に、フォント指定を利用した具体的なHTMLとCSSの記述例を示します。

HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-family: "Times New Roman", Times, serif;
}

この例では、全体のフォントとしてArialを、その代替としてHelveticaやsans-serifを指定しています。

また、見出し(h1)には”Times New Roman”を指定しています。

フォント指定は非常に直感的で、サイト全体の見た目を大きく変えることができます。

フォントの種類とその指定方法

こちらでは、ウェブ上で使用可能な主要なフォントの種類と、それぞれの指定方法について解説します。

ウェブセーフフォントとは？
Google Fontsの利用方法
カスタムフォントの利用方法
デバイスフォントとWebフォントの違い
総称フォント名の使用
フォントファミリー名の使用
英字表記と日本語表記のフォント指定の差異

ウェブセーフフォントとは？

ウェブセーフフォントとは、ほとんどのコンピューターシステムでデフォルトでインストールされているフォントのことを指します。

これらのフォントを使用することで、デザインが大幅に崩れることなく、一貫した見た目を確保できます。

Arial

font-family: Arial, sans-serif;

Verdana

font-family: Verdana, sans-serif;

Times New Roman

font-family: "Times New Roman", serif;

Courier New

font-family: "Courier New", monospace;

Georgia

font-family: Georgia, serif;

Google Fontsの利用方法

Google Fontsは、無料で使用できる多くのフォントを提供しているオンラインのフォントライブラリです。

これを利用することで、ウェブページに独自のスタイルを追加することが可能になります。

Google Fontsの利用方法は簡単で、以下の手順で進めます。

Google Fontsのウェブサイトから使用したいフォントを選択
選択したフォントに対応するリンクタグをHTMLファイルのヘッド内に挿入
CSS内で、選択したフォントを指定

カスタムフォントの利用方法

カスタムフォントを利用することで、ウェブサイトに個性を出せます。

これらのフォントはユーザーのシステムには存在しないため、ウェブサイト自体がフォントデータを提供しなければなりません。

具体的には、@font-face規則を使用してCSSにフォントファイルをリンクすることにより、カスタムフォントをウェブページで利用できます。

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.ttf');
  /* 追加のフォントフォーマットを指定する場合 */
  /* src: url('path/to/font.woff') format('woff'), */
  /*      url('path/to/font.woff2') format('woff2'), */
  /*      url('path/to/font.eot') format('embedded-opentype'); */
}

.custom-text {
  font-family: 'CustomFont', sans-serif;
}

デバイスフォントとWebフォントの違い

デバイスフォントとは、ユーザーのデバイスにプレインストールされているフォントのこと。

Webフォントはウェブ上からダウンロードして使用するフォントです。

デバイスフォントはユーザーがすでにインストールしているため、読み込み速度が速くなる一方、Webフォントは豊富な種類があるという利点があります。

総称フォント名の使用

総称フォント名は、特定のフォント名ではなく、一般的なフォントカテゴリを指定するためのもの。

例えば、「serif」や「sans-serif」などがこれにあたります。

これを使用することで、指定した具体的なフォントがユーザーのシステムに存在しない場合でも、同じ種類のフォントが適用されるようにすることができます。

フォントファミリー名の使用

フォントファミリー名は、特定のフォント集合を指す名前です。

フォント名	説明	CSSでの設定例
Arial	シンプルで読みやすいサンセリフフォント	`font-family: Arial, sans-serif;`
Helvetica	スタイリッシュで洗練されたサンセリフフォント	`font-family: Helvetica, Arial, sans-serif;`
Times New Roman	伝統的でクラシックなセリフフォント	`font-family: "Times New Roman", serif;`
Georgia	見やすく、優雅なセリフフォント	`font-family: Georgia, serif;`
Verdana	大文字と小文字の区別がしやすいサンセリフフォント	`font-family: Verdana, Geneva, sans-serif;`
Tahoma	コンパクトで読みやすいサンセリフフォント	`font-family: Tahoma, Geneva, sans-serif;`
Roboto	モダンで洗練されたサンセリフフォント	`font-family: Roboto, sans-serif;`
Open Sans	温かみのあるサンセリフフォント	`font-family: "Open Sans", sans-serif;`
Lato	ユニバーサルなサンセリフフォント	`font-family: Lato, sans-serif;`
Montserrat	エレガントでモダンなサンセリフフォント	`font-family: Montserrat, sans-serif;`

これを指定することで、そのフォントファミリー内のデフォルトフォントが適用されます。

英字表記と日本語表記のフォント指定の差異

ウェブサイトの多言語対応には、異なる言語でのフォント表記に注意が必要です。

例えば英語と日本語では同じフォント名でも、表示される形状が大きく異なることがあります。

この問題を解決する一つの方法は、CSSの :lang 擬似クラスを使用して、特定の言語に対してフォントを指定することです。

以下がその一例です。

body:lang(ja) {
    font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

body:lang(en) {
    font-family: Arial, Helvetica, sans-serif;
}

上記の例では、日本語（:lang(ja)）と英語（:lang(en)）で異なるフォントを指定しています。

このように、言語によるフォントの違いを正しくハンドリングすることで、多言語対応のウェブサイトでも一貫したデザインを保つことが可能になります。

フォントサイズと行間の調整

この章では、それらの調整方法について詳しく解説します。

なぜならフォントスタイルだけでなく、フォントサイズや行間もウェブデザインに大きな影響を与えるからです。

フォントサイズの指定方法
行間（line-height）の調整方法
フォントサイズと行間の関係性
実践例：フォントサイズと行間の調整

フォントサイズの指定方法

CSSを使用すると、フォントサイズを直接指定できます。

フォントサイズは通常、以下のような単位で指定します。

「px」（ピクセル）
「em」
「rem」
「%」（パーセンテージ）

行間（line-height）の調整方法

行間はCSSの「line-height」プロパティを使用して調整します。

行間を調整することで、テキストの読みやすさを大幅に改善可能です。

p {
  line-height: 1.5;
}

フォントサイズと行間の関係性

フォントサイズと行間は密接に関連しています。

一般的に、フォントサイズが大きくなると、行間も同様に大きくなることが望ましいです。

なぜならテキストの視認性と読みやすさを維持できるから。

一方、行間が大きすぎるとテキストが離れすぎてしまい、逆に読みにくくなることもあります。

適切な行間はフォントサイズ、フォントスタイル、そしてテキストの内容によります。

p {
  font-size: 16px;
  line-height: 1.5;
}

実践例：フォントサイズと行間の調整

以下に、フォントサイズと行間を調整した具体的なHTMLとCSSの記述例を示します。

HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    line-height: 1.2;
}

この例では、以下をおこなっています。

body全体：16pxのフォントサイズと1.5の行間を設定
見出し(h1)：24pxのフォントサイズと1.2の行間を設定

行間は数字だけで指定した場合、その値がフォントサイズに掛けられ、結果が行間となります。

フォントスタイルとウェブデザインの全体性

フォントスタイルは、ウェブデザインの重要な要素のひとつです。

ただしそれだけでは全体のデザインは完成しません。

フォントとブランドイメージ
フォントとユーザーエクスペリエンス
フォントの色と背景色の選択
フォントスタイルの統一性
レスポンシブデザインとフォントサイズ
実践例：フォントとデザイン全体の調和

フォントとブランドイメージ

フォントスタイルはブランドのイメージを大きく左右する要素のひとつです。

セリフ体のフォント：伝統的で信頼性のあるイメージ（和文でいう明朝体）
サンセリフ体のフォント：現代的でクリーンなイメージを表現（和文でいうゴシック体）

また、フォントの太さや形状も感情や印象を伝える役割を果たします。

例えば、細いフォントは洗練された、または華奢なイメージを、太いフォントは強い、または大胆なイメージを与えます。

フォントとユーザーエクスペリエンス

フォントはユーザーエクスペリエンス（UX）にも大きな影響を与えます。

読みやすいフォントと適切なフォントサイズを選ぶことは、ウェブサイトの利用者にとって情報を理解しやすくする重要な要素です。

特に、長文のテキストを表示する場合や、小さな画面（モバイルデバイスなど）で閲覧する場合には、フォントの選択は特に重要となります。

フォントの色と背景色の選択

フォントの色と背景色は、テキストの視認性とウェブデザイン全体の雰囲気に影響を与えます。

一般的に、テキストと背景は十分なコントラストがあることが望ましいです。

これは、特に視覚障害を持つユーザーや高齢者にとって、ウェブサイトの利用を容易にするために重要です。

フォントスタイルの統一性

ウェブサイト全体でフォントスタイルを統一することは、プロフェッショナルで一貫したイメージを作り出すために重要です。

たとえば、ヘッダー、ボディテキスト、ボタンなどの異なる要素で異なるフォントを使用する場合でも、同じフォントファミリーを保つことで統一感を出せます。

レスポンシブデザインとフォントサイズ

デバイスの画面サイズに応じてフォントサイズを調節することは、レスポンシブデザインの一部。

画面が小さいデバイス（例えばスマートフォン）では、フォントサイズを大きくしてテキストの視認性を確保することが重要です。

一方、大きな画面（例えばデスクトップ）では、適度なフォントサイズを保つことで情報を効率的に表示できます。

CSSメディアクエリを使用して、デバイスの画面幅に基づいてフォントサイズを動的に調整しましょう。

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;  /* for large screens */
}

@media (max-width: 768px) {
    body {
        font-size: 18px;  /* for medium screens (tablets) */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 20px;  /* for small screens (phones) */
    }
}

上記の例では、画面幅が768px以下の場合にはフォントサイズを18pxに、480px以下の場合にはフォントサイズを20pxに変更しています。

実践例：フォントとデザイン全体の調和

フォントスタイルとウェブデザイン全体がどのように調和するかを示す実践的な例を見てみましょう。

たとえば、あるウェブサイトが「楽しさ」と「親しみやすさ」を重視するブランドイメージを持っているとします。

この場合、手書き風やラウンド形状のフォントを選択することでブランドイメージを反映できます。

また、色彩も重要な要素であり、明るい色を選ぶことで「楽しさ」を表現することが可能です。

同様に、ユーザーインターフェースのデザイン（ボタン、フォームなど）も「親しみやすさ」を強調する形状や色を選ぶことで一貫性を保てます。

このように、ウェブデザイン全体の視点からフォントスタイルを考えることで、ブランドイメージを強化し、ユーザーエクスペリエンスを向上させることが可能になります。

レスポンシブデザインとフォント

このセクションでは、レスポンシブデザインとフォントについて詳しく見ていきます。

以下の内容をカバーします。

レスポンシブデザインとは？
メディアクエリとフォントサイズの調整
フォントサイズの単位について：px, em, rem, vw, vh

レスポンシブデザインとは？

レスポンシブデザインとは、ウェブサイトのレイアウトがユーザーのデバイス（デスクトップ、タブレット、スマートフォンなど）の画面サイズに自動的に適応するデザインのことを指します。

このようなデザインは、どのデバイスからアクセスしても最適なユーザーエクスペリエンスを提供できます。

レスポンシブデザインでは、各デバイスの画面サイズに合わせてフォントサイズや行間、段落の幅などを調整することが重要です。

特にフォントサイズは、読みやすさに直接関わるため、適切なサイズとスケーリングが求められます。

メディアクエリとフォントサイズの調整

メディアクエリはCSS3から導入された機能で、特定の条件（例えばビューポートの幅）に合わせてスタイルを動的に適用することができます。

これを利用して、画面サイズに応じてフォントサイズを調整することが可能です。

以下に、メディアクエリを用いて異なるデバイスでフォントサイズを変更する例を示します。

body {
    font-family: Arial, sans-serif;
    font-size: 16px;  /* Default font size for desktop */
}

@media (max-width: 768px) {
    body {
        font-size: 14px;  /* Smaller font size for tablets */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;  /* Even smaller font size for mobile phones */
    }
}

このコードでは、デフォルトのフォントサイズは16pxで設定されていますが、ビューポートの幅が768px以下の場合は14pxに、480px以下の場合は12pxに変更されます。

フォントサイズの単位について：px, em, rem, vw, vh

フォントサイズの指定には、いくつかの単位が使われます。

代表的なものはこちら。

px（ピクセル）
em
rem
vw（ビューポートの幅に基づくパーセンテージ）
vh（ビューポートの高さに基づくパーセンテージ）

pxは画面上の絶対的な単位で、特定のデバイスやビューポートに依存せず一定の大きさを保ちます。

しかし、これはスケーラビリティに問題があり、レスポンシブデザインには向いていません。

emは相対的な単位で、親要素のフォントサイズに依存します。

例えば親要素のフォントサイズが20pxで、子要素のフォントサイズを1.5emと指定すると、そのサイズは30pxです。

これは要素が自身のコンテキストに適応できるようにするのに便利。

rem（root em）も相対的な単位で、ルート要素（通常はhtml要素）のフォントサイズに基づいています。

これはサイト全体で一貫したスケーリングを可能にします。

vwとvhはビューポートの幅と高さに対するパーセンテージを表し、1vwはビューポート幅の1％、1vhはビューポート高さの1％を意味します。

これらはデバイスの画面サイズによって動的に変わるため、レスポンシブデザインに非常に有用です。

フォントのパフォーマンス最適化

次に、フォントのパフォーマンス最適化について見ていきます。

以下のトピックをカバーします。

フォントファイルの最適化
フォントの読み込みの最適化
フォントの表示の最適化

フォントファイルの最適化

ウェブサイトのパフォーマンスを向上させるためには、フォントファイルの最適化が重要です。

最適化には、フォントファイルのサイズを小さくするために、不要な文字やグリフを削除する、適切なフォーマット（WOFF2など）を選択するなどの方法があります。

特に、ウェブフォントを使用する場合は、必要なスタイルと文字セットのみを含めるように注意しましょう。

例えば、サイトで利用される言語や文字が限定されている場合、それに対応する文字セットだけを含むフォントを選択することで、ファイルサイズを大幅に削減することが可能です。

フォントの読み込みの最適化

フォントの読み込みにかかる時間もウェブページのパフォーマンスに大きな影響を及ぼします。

フォントの読み込みはページのレンダリングをブロックする可能性があり、これが遅延するとユーザーエクスペリエンスが低下します。

これを防ぐための一つの方法は、font-displayプロパティを使用することです。

このプロパティにはいくつかの値があり、swapやfallbackなどを設定することで、フォントの読み込み時に何が表示されるかを制御できます。

もしくはフォントを非同期に読み込むことで、ページのレンダリングをブロックすることなく、フォントの使用が可能です。

これはlink要素のpreload属性や、JavaScriptのFontFaceObserverなどを利用して実現できます。

フォントの表示の最適化

フォントの表示品質もまた重要な考慮点です。

これには、アンチエイリアシング（文字のエッジを滑らかにする技術）、ヒント情報（小さなサイズでの文字のレンダリングを改善する情報）、およびサブピクセルレンダリング（ディスプレイの物理的な特性を利用して文字の鮮明さを向上させる技術）などの技術が関与します。

これらの設定は大抵の場合、ブラウザやOSが自動的に適用しますが、CSSのfont-smoothプロパティを使用して、一部の制御を手動でおこなうことも可能です。

「fontface」タグの使い方と例

次に、@fontfaceルールの使用方法と実例について見ていきます。

以下の内容をカバーします。

「fontface」タグの概要
「fontface」タグの使用例

「fontface」タグの概要

@fontfaceルールはCSS3で導入され、ウェブデザイナーがウェブページにカスタムフォントを埋め込むことを可能にします。

これにより、ユーザーのシステムにインストールされていないフォントでも、そのフォントをウェブサイト上で表示することができるのです。

@fontfaceルールを使用するときは、次のような構文を使用します。

@font-face {
  font-family: "MyCustomFont";
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
}

ここでfont-familyはフォントの名前を定義し、srcプロパティはフォントファイルへのパスを指定。

また、format関数を使用して、フォントファイルの形式を指定します。

「fontface」タグの使用例

@fontfaceルールを使用して、実際にカスタムフォントをウェブページに適用する例を見てみましょう。

次の例では、先程定義した”MyCustomFont”をヘッダータグに適用しています。

@font-face {
  font-family: "MyCustomFont";
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
}

h1 {
  font-family: "MyCustomFont", Arial, sans-serif;
}

この例では、h1タグのテキストは”MyCustomFont”が使用されます。

もし”MyCustomFont”がロードできなかった場合、ブラウザはフォールバックとしてArialまたはsans-serifフォントを使用します。

これが@fontfaceの基本的な使用方法ですが、さらに詳しく知りたい場合はCSSリファレンスや関連する資料を参照してください。