CSSのfont-stretchプロパティ完全ガイド！テキストの幅を自在に調整する方法

CSSのfont-stretchプロパティを使うと、テキストを細く（コンデンスド＝狭い字幅）したり、太く広げたり（エクスパンデド＝広い字幅）することができます。

このようなフォントは、一般的に「コンデンスド（縦長・細身）フォント」や「エクスパンデド（横長・拡張）フォント」と呼ばれています。

コンデンスドフォントとエクスパンデドフォントの違い

• コンデンスドフォント：ストローク（線の太さ）が細く、通常のフォントに比べて文字間隔（レタースペーシング／リーディング）がかなり狭くなっています。限られたスペースに多くの情報を収めたい場合に便利です。
• エクスパンデドフォント：高さに対してストロークが通常より太く設計されており、見出しなどで存在感を出したい場面に適しています。

font-stretchプロパティで指定できる値

font-stretchプロパティには、以下の9段階の値（フォントフェイスの種類）を指定できます。

• ultra-condensed（極端に狭い）
• extra-condensed（非常に狭い）
• condensed（狭い）
• semi-condensed（やや狭い）
• normal（標準）
• semi-expanded（やや広い）
• expanded（広い）
• extra-expanded（非常に広い）
• ultra-expanded（極端に広い）

また、キーワードの代わりに50%～200%までのパーセンテージ値でも指定可能です（normalは100%に相当します）。

コード例

h1 {
  font-family: sans-serif;
  font-stretch: expanded;
}

h2 {
  font-family: sans-serif;
  font-stretch: condensed;
}

使用時の注意点

重要なポイント：ほとんどの書体（フォントファミリー）には、コンデンスドやエクスパンデドのフォントフェイスが用意されていません。

そのため、CSSスタイルシートでfont-stretchプロパティを使用する前に、利用しているフォントファミリーに目的のコンデンスドまたはエクスパンデドのフォントフェイスが含まれているかどうかを必ず確認しましょう。

なお、選択したフォントファミリーに該当するフォントフェイスが存在しない状態でfont-stretchプロパティを使っても、何も起こりません。擬似ボールドや擬似イタリックのような、不格好な合成フォント（コンピューター生成のフォント）が表示されることはありません。

ただし、ブラウザの技術は常に変化しているため、将来的な挙動の変化のリスクを考えると、対応フォントを事前に確認しておくのが安全です。