CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfont-kerning・letter-spacing・word-spacingプロパティ徹底解説

CSSの基礎を学ぶとき、多くの人はボックスモデル、ページ上のコンポーネントの配置方法、font-familyやフォントサイズといったデザインシステムの要素に注目しがちです。しかし、フォントがページ上でどのように表示されるかをさらに深く追求したいなら、font-kerning、letter-spacing、word-spacingという3つのプロパティを理解することが欠かせません。こうした細部へのこだわりこそが、Webサイトを「平均的な仕上がり」から「プロフェッショナルな仕上がり」へと引き上げる鍵となります。

フォントカーニング（font-kerning）とは

font-kerningは、隣接する2つの文字の間隔をどのように決めるかを制御するプロパティです。カーニングが適切に調整されたフォントは、文字間隔が均一になり、視覚的な美しさが向上します。CSSのfont-kerningプロパティには、none、normal、autoの3つの値を指定できます。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Spacing</title>
       <style>
           div {
               font-size: 2rem;
               font-family: serif;
           }
 
           #nokern {
               font-kerning: none;
           }
 
           #kern {
               font-kerning: normal;
           }
       </style>
      
   </head>
   <body>
       <div id="kern">AV Ta</div>
       <div id="nokern">AV Ta</div>
   </body>
</html>

autoを指定すると、カーニングを使用するかどうかをブラウザ側で判断します。MDNによると、小さなフォントサイズでは可読性が損なわれるため、一部のブラウザではカーニングが無効化されることがあります。normalは、フォントにカーニング情報が含まれている場合にそれを適用することを意味し、noneは名前の通りカーニングを一切適用しません。上記のコードを実行すると、「AV」や「Ta」の組み合わせでこのプロパティの効果が最も分かりやすく現れます。ある文字のセリフの終端から、次の文字のセリフの始端までの距離によって、そのテキストにカーニングが効いているかどうかが判断できるのです。

letter-spacing（文字間隔）

カーニングとは対照的に、letter-spacingプロパティは、1行のテキスト内のすべての文字に対して均一な間隔を設定します。指定できるのはpx、rem、emなどのlength値で、正の値にも負の値にもできます。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Spacing</title>
       <style>
           div {
               font-size: 2rem;
               font-family: serif;
           }
 
           #big-spacing {
               letter-spacing:5px;
           }
 
           #little-spacing {
               letter-spacing: 1px;
           }
       </style>
      
   </head>
   <body>
       <div id="little-spacing">Hello World</div>
       <div id="big-spacing">Hello World</div>
   </body>
</html>

word-spacing（単語間隔）

letter-spacingと同じ考え方で、word-spacingは文字通り単語と単語の間のスペースを制御します。デフォルト値は0.25emですが、正または負のlength値を自由に指定できます。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Spacing</title>
       <style>
           div {
               font-size: 2rem;
               font-family: serif;
           }
 
           #big-spacing {
               word-spacing:5rem;
           }
 
           #little-spacing {
               word-spacing: 1rem;
           }
       </style>
      
   </head>
   <body>
       <div id="little-spacing">Hello World</div>
       <div id="big-spacing">Hello World</div>
   </body>
</html>

まとめ

この記事では、font-kerningとletter-spacingの違い、そしてletter-spacingとword-spacingの違いについて解説しました。これらのプロパティはいずれも主要なブラウザで幅広くサポートされています。ただし、Internet Explorerのみフォントカーニングには対応していない点に注意しましょう。文字間隔や単語間隔を適切に調整することで、テキストの可読性とデザインの質を大きく向上させることができます。

  1. CSSのletter-spacingで文字間隔を調整する方法

    CSSでは、letter-spacingプロパティを使用することで、文字と文字の間隔(字間)を自由に調整できます。見出しやナビゲーションメニューなど、デザインの目的に応じて字間を広げたり狭めたりすることで、テキストの読みやすさや全体の印象を大きく変えることができます。 letter-spacingの基本構文 letter-spacingプロパティの基本的な書き方は以下の通りです。 セレクタ {     letter-spacing: /*値*/ } 値には「px」「pt」「em」などの単位を指定できます。正の値を指定すると字間が広がり、負の値を指定する

  2. CSSのword-spacingプロパティで単語間隔を調整する方法

    CSSのword-spacingプロパティは、要素内の単語と単語の間隔(スペース)を指定するために使用します。英文テキストの可読性を高めたり、デザインに余白感を持たせたい場合に活用できる便利なプロパティです。構文word-spacingプロパティの基本的な構文は以下のとおりです。Selector { word-spacing: /*value*/ }指定できる主な値normal: ブラウザの標準的な単語間隔を適用します(初期値)。長さ(px、em、remなど): 数値で単語間隔を指定します。負の値を指定すると間隔が狭まります。使用例1次の例では、入れ子になったdiv要素に対してword