テキストとタイポグラフィ

The CSS Podcast - 036: Text & Typography

テキストはウェブの核となる構成要素の 1 つです。

ウェブサイトを作成するときに、テキストにスタイルを設定する必要はありません。HTML には、かなり合理的なデフォルトのスタイルが用意されています。

ただし、ウェブサイトの大部分はテキストで占められる可能性が高いため、スタイルを追加して仕上げることは価値があります。いくつかの基本的なプロパティを変更するだけで、ユーザーの読みやすさが大幅に改善されます。

このモジュールでは、カスタム フォントをウェブページにインポートできる @font-face ルールから始めます。これにより、ユーザーがインストールしたフォントとは関係なく、必要なタイポグラフィを正確に使用できます。

次に、font-family、font-style、font-weight、font-size などの重要な CSS フォント プロパティについて説明します。これらの基本を理解することで、スタイルと読みやすさの両方のためにテキストを操作する準備が整います。

また、text-indent や word-spacing などの段落固有のプロパティについても説明します。最後に、可変フォントや疑似要素などの高度なトピックについて説明します。これにより、タイポグラフィの制御をさらに細かく調整できます。

これらの CSS 手法の理解と応用を確かなものにするために、実践的な例とヒントを全体的に紹介しています。

@font-face ルール

@font-face CSS アットルールは、カスタム フォントを指定してテキストを表示できるため、ウェブデザインに役立ちます。@font-face の利点は、リモート サーバーまたはユーザーのデバイスにインストールされているフォントからフォントを取得できることです。

構文

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

記述子

ascent-override
上昇指標をカスタマイズし、ベースライン上のスペースに影響します。
descent-override
下降指標を調整し、ベースラインの下のスペースに影響します。
font-display
ダウンロード ステータスに基づいてフォントの表示動作を制御します。
font-family
フォント関連のプロパティ内で使用するフォントに名前を付けます。
font-stretch
許容される水平方向のスケーリングを設定します。単一の値または範囲で指定します。
font-style
フォント スタイルを定義し、傾斜スタイルの角度範囲をサポートします。
font-weight
フォントの太さ、または使用可能な太さの範囲を指定します。
font-feature-settings
OpenType フォント機能へのアクセスを有効にします。
font-variation-settings
可変フォント設定を微調整できます。
line-gap-override
フォントのデフォルトの線間隔をオーバーライドします。
size-adjust
フォント輪郭とメトリックにスケーリング ファクタを適用します。
src
フォントソース（ローカルまたはリモート）を定義します。これは @font-face ルールで必要です。src 内で url() と local() を組み合わせることは、ローカルフォントが使用可能な場合はローカルフォントを使用し、フォールバックとしてリモート フォント ファイルに戻す一般的な戦略です。ブラウザは宣言順序に基づいてリソースの優先順位を決定するため、通常は local() を url() の前に配置する必要があります。
unicode-range
このフォントで使用する文字を制限します。

説明

@font-face を使用すると、デザイナーはカスタム タイポグラフィを使用できるため、「ウェブセーフ」フォントによる制約から解放されます。local() 関数は、ユーザーのデバイスでフォントを検索する機能があり、インターネット接続に依存しないシームレスなエクスペリエンスを提供します。

フォントの MIME タイプ

形式 MIME タイプ
TrueType font/ttf
OpenType font/otf
Web Open Font Format（ウェブ オープン フォント形式） font/woff
Web Open Font Format 2 font/woff2

@font-face と font-family の違い

CSS では、@font-face と font-family が混同されることがありますが、目的は異なります。

前述のように、@font-face は、ウェブ アプリケーションで使用するカスタム フォントを定義するために使用されるルールです。これにより、フォントのダウンロード場所と読み込み中の表示方法をブラウザに指示し（font-display プロパティを使用）、ダウンロードする文字のサブセットを（unicode-range を使用）指定します。

一方、font-family は、特定のフォントまたはフォントリストを指定して要素に割り当てるために、CSS ルール内で使用される CSS プロパティです。font-family にリストされるフォントは、ウェブセーフ フォント、システム フォント、または @font-face で定義されたカスタム フォントです。

要約すると、@font-face はフォントを宣言して名前を付け、font-family はこの宣言されたフォントを HTML 要素に適用します。

両方の使用例を次に示します。

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

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

この例では、@font-face が「CustomFont」を定義し、その場所をブラウザに伝えます。font-family プロパティは、body 要素に適用します。また、「CustomFont」を使用できない場合は、Arial をフォールバックとして使用します。

書体を変更する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

font-family を使用してテキストの書体を変更します。

font-family プロパティは、特定のフォント ファミリーまたは汎用フォント ファミリーを参照する文字列のカンマ区切りのリストを受け入れます。特定のフォント ファミリーとは、引用符で囲まれた文字列のことです（"Helvetica"、"EB Garamond"、"Times New Roman" など）。汎用フォント ファミリーは、serif、sans-serif、monospace などのキーワードです（MDN でオプションの一覧をご覧ください）。ブラウザには、指定されたリストから利用可能な最初の書体が表示されます。

font-family を使用する場合は、ユーザーのブラウザで優先するフォントがない場合に備え、汎用フォント ファミリーを少なくとも 1 つ指定する必要があります。通常、代替の汎用フォント ファミリーは、優先するフォントと類似している必要があります。font-family: "Helvetica"（サンセリフ フォント ファミリー）を使用する場合は、代替フォントも sans-serif にする必要があります。

斜体と斜体を使用する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

font-style を使用して、テキストを斜体にするかどうかを設定します。font-style は、normal、italic、oblique のいずれかのキーワードを受け入れます。

テキストを太字にする

対応ブラウザ

  • Chrome: 2.
  • Edge: 12。
  • Firefox: 1.
  • Safari: 1.

ソース

テキストの「太字」を設定するには、font-weight を使用します。このプロパティには、キーワード値（normal、bold）、相対キーワード値（lighter、bolder）、数値（100～900）を指定できます。

キーワード normal と bold は、それぞれ数値 400 と 700 と同等です。

キーワード lighter と bolder は、親要素を基準に計算されます。この値の決定方法を示す便利なグラフについては、MDN の相対重み付けの意味をご覧ください。

文字のサイズを変更する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

テキスト要素のサイズを制御するには、font-size を使用します。このプロパティには、長さの値、割合、いくつかのキーワード値を指定できます。

font-size は、長さと割合の値に加えて、いくつかの絶対キーワード値（xx-small、x-small、small、medium、large、x-large、xx-large）といくつかの相対キーワード値（smaller、larger）を受け入れます。相対値は、親要素の font-size を基準とします。

行間のスペースを変更する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

line-height を使用して、要素内の各行の高さを指定します。このプロパティには、数値、長さ、割合、キーワード normal を指定できます。通常は、継承の問題を避けるため、長さや割合ではなく数値を使用することをおすすめします。

文字の間隔を変更する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

letter-spacing を使用すると、テキスト内の文字間の水平方向のスペースの量を制御できます。このプロパティには、em、px、rem などの長さの値を指定できます。

指定した値は、文字間の自然なスペースを増やすことに注意してください。次のデモでは、個々の文字を選択して、レターボックスのサイズと letter-spacing による変化を確認します。

単語間のスペースを変更

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

word-spacing を使用すると、テキスト内の単語間のスペースを増減できます。このプロパティには、em、px、rem などの長さの値を指定できます。指定する長さは、通常のスペースに加えて余分なスペースです。つまり、word-spacing: 0 は word-spacing: normal と同等です。

font の略記

省略形の font プロパティを使用すると、フォント関連のプロパティを一度に設定できます。使用可能なプロパティのリストは、font-family、font-size、font-stretch、font-style、font-variant、font-weight、line-height です。

これらのプロパティの順序付け方法について詳しくは、MDN の font に関する記事をご覧ください。

テキストの大文字と小文字を変更する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12。
  • Firefox: 1.
  • Safari: 1.

ソース

text-transform を使用すると、基盤となる HTML を変更せずにテキストの大文字と小文字を変更できます。このプロパティは、uppercase、lowercase、capitalize のキーワード値を受け入れます。

テキストに下線、上線、貫通線を追加する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

text-decoration を使用して、テキストに行を追加します。最もよく使われるのは下線ですが、テキストの上に線を引いたり、テキストに線を引いたりすることもできます。

text-decoration プロパティは、後で詳しく説明するより具体的なプロパティの省略形です。

text-decoration-line プロパティは、underline、overline、line-through というキーワードを受け入れます。複数の行に複数のキーワードを指定することもできます。

text-decoration-color プロパティは、text-decoration-line のすべての装飾の色を設定します。

text-decoration-style プロパティでは、solid、double、dotted、dashed、wavy のキーワードを使用できます。

text-decoration-thickness プロパティは任意の長さの値を受け取り、text-decoration-line からすべての装飾のストロークの太さを設定します。

text-decoration プロパティは、上記のすべてのプロパティの省略形です。

テキストにインデントを追加する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

text-indent を使用して、テキストのブロックにインデントを追加します。このプロパティには、長さ（例: 10px、2em）または、親ブロックの幅のパーセンテージを指定します。

オーバーフローまたは隠れたコンテンツに対処する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3。

ソース

text-overflow を使用して、非表示コンテンツの表示方法を指定します。2 つのオプションがあります。clip（デフォルト）は、オーバーフローした時点でテキストを切り捨てます。ellipsis は、オーバーフローした時点で省略記号（...）を表示します。

空白を制御する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

white-space プロパティは、要素内の空白文字の処理方法を指定するのに使用します。詳しくは、MDN の white-space に関する記事をご覧ください。

white-space: pre は、ASCII アートや慎重にインデントされたコードブロックのレンダリングに役立ちます。

単語の区切り方を制御する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

ソース

word-break を使用すると、行がオーバーフローしたときに単語を「分割」する方法を変えることができます。デフォルトでは、ブラウザは単語を分割しません。word-break にキーワード値 break-all を使用すると、必要に応じて単語を個々の文字で分割するようにブラウザに指示します。

テキストの配置を変更する

対応ブラウザ

  • Chrome: 1.
  • Edge: 12。
  • Firefox: 1.
  • Safari: 1.

ソース

text-align を使用して、ブロック要素またはテーブルセル要素内のテキストの水平方向の配置を指定します。このプロパティには、キーワード値 left、right、start、end、center、justify、match-parent を指定できます。

値 left と right は、それぞれテキストをブロックの左側と右側に配置します。

start と end を使用して、現在の入力モードでのテキスト行の開始位置と終了位置を表します。そのため、start は英語では left にマッピングされ、右から左に記述するアラビア文字（RTL）の right にマッピングされます。これらは論理アライメントです。詳しくは、論理プロパティ モジュールをご覧ください。

center を使用して、テキストをブロックの中央に揃えます。

justify の値は、テキストを整理し、単語の間隔を自動的に変更して、テキストがブロックの左右の端に揃うようにします。

テキストの向きを変更する

対応ブラウザ

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

direction を使用して、テキストの向きを ltr（左から右、デフォルト）または rtl（右から左）に設定します。アラビア語、ヘブライ語、ペルシャ語などの言語は右から左に記述されるため、direction: rtl を使用する必要があります。英語など、左から右に表記する言語の場合は direction: ltr を使用します。

テキストのフローを変更する

対応ブラウザ

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41。
  • Safari: 10.1。

ソース

writing-mode を使用して、テキストの流れと配置を変更します。デフォルトは horizontal-tb ですが、テキストを横方向に配置する場合は、writing-mode を vertical-lr または vertical-rl に設定することもできます。

テキストの向きを変更する

対応ブラウザ

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41。
  • Safari: 14。

ソース

text-orientation を使用して、テキスト内の文字の向きを指定します。このプロパティの有効な値は mixed と upright です。このプロパティは、writing-mode が horizontal-tb 以外に設定されている場合にのみ該当します。

テキストにシャドウを追加する

対応ブラウザ

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5。
  • Safari: 1.1。

ソース

text-shadow を使用すると、テキストにシャドウを追加できます。このプロパティは、3 つの長さ（x-offset、y-offset、blur-radius）と色を想定しています。

詳しくは、シャドウに関するモジュールの text-shadow セクションをご覧ください。

可変フォント

通常、「normal」フォントでは、太字、斜体、簡約など、書体のバージョンごとに異なるファイルをインポートする必要があります。可変フォントは、1 つのファイルにさまざまな書体のバリエーションを含めることができるフォントです。

幅と重量のランダムな組み合わせの Roboto Flex

詳しくは、可変フォントについての記事をご覧ください。

疑似要素

::first-letter と ::first-line の疑似要素

対応ブラウザ

  • Chrome: 1.
  • Edge: 12。
  • Firefox: 1.
  • Safari: 1.

ソース

疑似要素 ::first-letter と ::first-line は、それぞれテキスト要素の最初の文字と最初の行をターゲットとします。

::selection 疑似要素

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62。
  • Safari: 1.1。

ソース

::selection 疑似要素を使用して、ユーザーが選択したテキストの外観を変更します。

この疑似要素を使用する場合は、特定の CSS プロパティ（color、background-color、text-decoration、text-shadow、stroke-color、fill-color、stroke-width）のみを使用できます。

font-variant

対応ブラウザ

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

ソース

font-variant プロパティは、small-caps や slashed-zero などのフォント バリエーションを選択できる複数の CSS プロパティの省略形です。この省略形に含まれる CSS プロパティは、font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures、font-variant-numeric です。使用方法の詳細については、各プロパティのリンクをご覧ください。

理解度をチェックする

ウェブのタイポグラフィに関する知識をテストする

font-family 汎用フォールバックとして使用できるキーワードは次のどれですか。

serif
正解です。
monospace
正解です。
italic
もう一度お試しください。italic は font-style の有効なキーワードですが、font-family の有効なキーワードではありません。
sci-fi
もう一度お試しください。ただし、fantasy は font-family の有効な汎用代替手段です。
sans-serif
正解です。
helvetica
もう一度お試しください。"Helvetica" は汎用キーワードではなく、特定のフォント ファミリーを指します。

各単語の最初の文字を大文字に変換するには、どのステートメントを使用すればよいですか？（例: This is a sentence. ➡ This Is A Sentence.）

text-capitalize: true;
もう一度お試しください。
text-case: capitalize;
もう一度お試しください。
text-transform: capitalize;
正解です。
font-style: capitals;
もう一度お試しください。
font-variant: capitalize;
もう一度お試しください。

正誤問題: text-orientation を使用してテキストを左揃え、右揃え、中央揃えにします。

正しい
もう一度お試しください。text-orientation: 行内の文字の回転を変更します。
False
正解です。text-orientation: 行内の文字の回転を変更します。text-align を使用すると、テキストを左、右、中央に揃えることができます（その他の操作も可）。

テキストの行間のスペースを変更するために使用できる CSS プロパティはどれですか。

line-spacing
もう一度お試しください。
leading
もう一度お試しください。「先頭」はタイポグラフィにおける行間のスペースを指す正しい用語ですが、有効な CSS プロパティではありません。
baseline-distance
もう一度お試しください。
line-height
正解です。

リソース