Documentation CSS

この記事で学べること

  • font-stretchプロパティの概念と目的
  • ultra-condensedからultra-expandedまでの9段階の値
  • フォント幅によるデザイン調整
  • レスポンシブデザインでの活用
  • フォントの互換性と対応確認

概要

CSSのfont-stretchプロパティは、指定されたフォントの幅を調整して、タイポグラフィをより柔軟にデザインするための機能です。このプロパティを使うと、フォントの「狭さ」や「広さ」を調整し、デザインの意図に合わせた文字表現が可能になります。適切に使用することで、テキストが画面に対してバランスよく表示され、より洗練されたデザインを実現できます。

基本構文

font-stretchの基本的な構文は以下の通りです。

font-stretch: [値];

主な値

  • ultra-condensed
    非常に狭い
  • extra-condensed
    極狭
  • condensed
    狭い
  • semi-condensed
    やや狭い
  • normal
    標準（デフォルト）
  • semi-expanded
    やや広い
  • expanded
    広い
  • extra-expanded
    極広
  • ultra-expanded
    非常に広い

例

p {
    font-family: "Arial", sans-serif;
    font-stretch: expanded;
}

この例では、Arialフォントを「広い（expanded）」スタイルに設定しています。この結果、テキストが標準の幅よりも広く表示され、視覚的に目立つようになります。

font-stretchの使い方

フォント幅の調整

font-stretchを使用すると、フォントの幅を変更して、テキストがデザイン全体にどのようにフィットするかを調整できます。特定のフォントファミリーは、condensedやexpandedなど、異なる幅のバリエーションを持っている場合があります。これにより、テキストが限られたスペースに収まるように調整したり、逆に広いスペースでテキストを目立たせたりすることができます。

h1 {
    font-family: "Roboto", sans-serif;
    font-stretch: ultra-condensed;
}

このコードでは、Robotoフォントを非常に狭いスタイルにして、大きな見出しが省スペースで表示されるようにしています。

レスポンシブデザインでの活用

font-stretchは、異なる画面サイズに対応するレスポンシブデザインにも役立ちます。画面のサイズに応じてフォントの幅を変更することで、デザインのバランスを保ちながら、視認性や読みやすさを向上させることができます。

p {
    font-family: "Helvetica", sans-serif;
    font-stretch: normal;
}
@media (max-width: 600px) {
    p {
        font-stretch: condensed;
    }
}

この例では、画面幅が600px以下の場合にフォント幅を狭める設定を行っています。モバイルデバイスでは、テキストのスペースが限られるため、このようにフォントを狭くすることで、読みやすさを確保できます。

font-stretchの効果とメリット

視覚的なバランスを調整

font-stretchを使うことで、視覚的なバランスを調整し、タイポグラフィのデザインに統一感を持たせることができます。特に、見出しや強調されたテキストでは、フォントの幅を調整することで、他のテキストとの区別がはっきりし、デザイン全体の印象が強まります。

h2 {
    font-family: "Times New Roman", serif;
    font-stretch: semi-expanded;
}

この設定では、見出しに対して標準より少し広い幅のフォントが適用され、他のテキストよりも目立たせる効果があります。

テキストの可読性の向上

font-stretchは、特定のデバイスやコンテキストに応じてフォントの可読性を向上させるためにも使用されます。たとえば、フォントが狭すぎて読みづらい場合、幅を広げることで視認性が向上します。

body {
    font-family: "Open Sans", sans-serif;
    font-stretch: semi-expanded;
}

この例では、Open Sansのフォントを少し広げて、テキストが読みやすくなるようにしています。長文の記事やブログで、可読性を保ちながら美しいデザインを実現できます。

フォントの互換性と注意点

対応フォントの確認

font-stretchは、すべてのフォントでサポートされているわけではありません。特定のフォントファミリーが幅のバリエーション（condensedやexpandedなど）を持っているかを確認することが重要です。Webフォントやデバイスにインストールされているフォントの中には、font-stretchに対応していないものもあります。

ブラウザ対応

font-stretchは、主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）でサポートされていますが、古いバージョンのブラウザではサポートが不完全な場合があります。フォントの幅を調整する際は、必ずクロスブラウザテストを行い、デザインが期待通りに表示されるかを確認してください。

まとめ

CSSのfont-stretchプロパティを使用すると、フォントの幅を自由に調整し、デザインに合わせてタイポグラフィを最適化できます。フォント幅のバリエーションを使い分けることで、テキストが限られたスペースにフィットしやすくなり、また、重要なテキストを視覚的に強調することが可能です。レスポンシブデザインにも適しており、異なるデバイスに合わせた柔軟なタイポグラフィを実現できます。font-stretchを適切に活用して、洗練されたデザインを作り上げてみてください。

ポイントの振り返り

値説明幅
ultra-condensed非常に狭い50%
condensed狭い75%
normal標準100%
expanded広い125%
ultra-expanded非常に広い200%

関連プロパティ

プロパティ説明
font-weightフォントの太さ
font-styleフォントのスタイル
font-variation-settings可変フォントの調整

参考文献

円