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

The CSS Podcast - 036: テキストとタイポグラフィ

テキストはウェブの基本的な構成要素の 1 つです。

ウェブサイトを作成する際に、必ずしもテキストのスタイルを設定する必要はありません。HTML には、かなり妥当なデフォルトのスタイルが用意されています。

ただし、ウェブサイトの大部分はテキストで構成されるため、スタイルを追加して見栄えを良くすることは価値があります。いくつかの基本的なプロパティを変更するだけで、ユーザーの読書体験を大幅に改善できます。

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

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

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

コース全体を通して、CSS テクニックの理解と応用を深めるための実践的な例とヒントが提供されます。

@font-face ルール

@font-face CSS at-rule は、カスタム フォントを指定してテキストを表示できるため、ウェブデザインで重要な役割を果たします。@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 がフォールバックとして使用されます。

書体を変更する

Browser Support

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

Source

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

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

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

斜体フォントと斜体フォントを使用する

Browser Support

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

Source

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

テキストを太字にする

Browser Support

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

Source

font-weight を使用して、テキストの「太さ」を設定します。このプロパティは、キーワード値（normal、bold）、相対キーワード値（lighter、bolder）、数値（100～900）を受け入れます。

キーワード normal と bold は、それぞれ数値 400 と 700 に相当します。

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

文字のサイズを変更する

Browser Support

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

Source

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

font-size は、長さとパーセンテージの値に加えて、いくつかの絶対キーワード値（xx-small、x-small、small、medium、large、x-large、xx-large）と、いくつかの相対キーワード値（smaller、larger）を受け入れます。相対値は、親要素の font-size に対する相対値です。

行間を変更する

Browser Support

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

Source

line-height を使用して、要素内の各行の高さを指定します。このプロパティには、数値、長さ、パーセンテージ、またはキーワード normal のいずれかを指定できます。一般的には、継承に関する問題を回避するため、長さや割合ではなく数値を使用することをおすすめします。

文字の間隔を変更する

Browser Support

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

Source

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

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

単語間のスペースを変更する

Browser Support

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

Source

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 に関する記事をご覧ください。

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

Browser Support

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

Source

[`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) を使用すると、基盤となる HTML を変更することなく、テキストの大文字と小文字を変更できます。このプロパティには、`uppercase`、`lowercase`、`capitalize` のキーワード値を指定できます。

テキストに下線、上線、取り消し線を追加する

Browser Support

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

Source

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 プロパティは、上記のすべてのプロパティの短縮形です。

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

Browser Support

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

Source

text-indent を使用して、テキストの段落にインデントを追加します。このプロパティには、長さ（10px、2em など）または包含ブロックの幅のパーセンテージのいずれかを指定します。

はみ出したり隠れたりしたコンテンツに対処する

Browser Support

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

Source

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

white-space を制御する

Browser Support

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

Source

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

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

単語の分割方法を制御する

Browser Support

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

Source

word-break を使用して、単語が改行される際の処理方法を変更します。デフォルトでは、ブラウザは単語を分割しません。word-break にキーワード値 break-all を使用すると、必要に応じて個々の文字で単語を分割するようにブラウザに指示します。

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

Browser Support

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

Source

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

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

start と end を使用して、現在の書き込みモードでのテキスト行の先頭と末尾の位置を表します。したがって、start は英語では left に、右から左（RTL）に記述するアラビア文字では right にマッピングされます。これらは論理的な配置です。詳しくは、論理プロパティ モジュールをご覧ください。

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

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

テキストの折り返し方法を制御する

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

text-wrap を使用して、要素内のテキストの折り返し方法を変更します。

このプロパティで指定できるキーワードは、wrap、nowrap、balance、stable です。デフォルト値は wrap で、通常のスペースと単語の区切りでテキストを折り返して、オーバーフローを最小限に抑えます。

nowrap キーワードを使用すると、その逆の動作を実現し、テキストが複数行にわたって分割されるのを防ぐことができます。これにより、オーバーフローが発生するのを防ぐことができます。

見出しやヘッドラインを作成するときに、各行のテキスト量を同じにするには、balance キーワードを使用します。パフォーマンスを向上させるため、ブラウザはこの値を 6 行以下のテキストを含む要素にのみ適用します。

stable キーワードは wrap と同様の動作をしますが、contenteditable テキストで使用することを想定しています。text-wrap: stable を設定すると、編集中のコンテンツの上の行がプロセス内で移動しなくなります。

明確な区切りがない長い文字列は、コンテナからオーバーフローすることがあります。このタイプのテキストの改行方法を制御するには、overflow-wrap を使用します。

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

このプロパティに使用できるキーワードは、normal、break-word、anywhere です。デフォルト設定は normal で、スペースや自然な改行ポイントが含まれていない限り、テキストは次の行に折り返されません。

anywhere 値と break-word 値は、文字列内の任意の場所にブレークポイントを追加して、オーバーフローを防ぎます。キーワードは、固有の min-content サイズまたは明示的な min-content サイズに対する応答方法が異なります。anywhere キーワードを使用すると、可能なすべてのソフト ブレークの機会が提供されます。break-word の値は、テキストを最長の単語と同じ長さにします。

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

テキストに影を追加する

Browser Support

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

Source

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

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

可変フォント

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

幅と太さの組み合わせがランダムな Roboto Flex

詳しくは、可変フォントに関する記事をご覧ください。

疑似要素

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

Browser Support

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

Source

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

::selection 疑似要素

Browser Support

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

Source

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

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

font-variant

Browser Support

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

Source

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 は、行内の文字の回転を変更します。
誤り
正解です。text-orientation は、行内の文字の回転を変更します。text-align を使用して、テキストを左揃え、右揃え、中央揃えにできます（その他にもさまざまな機能があります）。

文字列の行間を変更するために使用できる CSS プロパティはどれですか？

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

リソース