文章の見やすさや、読みやすさを左右する要素として、文字サイズや、行間、文字間といったものがあります。文章の意味や重要性、また文章の長さなどにもよって文字サイズや行間を変えていくことで、見やすく読みやすいサイトにするのに役立ちます。

視認性や可読性に考慮し、ユーザにストレスを与ることなく、文章を読んでもらうための、文字を調整するプロパティを使いこなして、見やすいページにしましょう。

この記事では、文字サイズを指定するfont-sizeプロパティ、文章の行の高さを指定するline-heightプロパティ、文字間を指定するletter-spacingプロパティについて解説していきます。

文字サイズを指定するfont-sizeプロパティ

font-sizeプロパティは、文字サイズを指定するプロパティです。値には「数値＋単位」で指定することができ、指定した大きさは、文字の高さに反映されます。

font-sizeプロパティの値に指定できる単位

大きさの指定には、まざまな単位を使うことができます。

単位：px（ピクセル）で指定

px はモニターの画素（ピクセル）を1とする単位で、親要素の設定に影響を受けない絶対を指定する単位です。16pxと指定した際には、必ずそのサイズで表示されます。

p {
    font-size: 16px;
}

%（パーセント）値で指定

% は親要素のサイズを基準とした相対値を、百分率で指定する単位です。親要素のサイズが変更されると子要素のサイズも変化してしまいます。

親要素のfont-sizeプロパティを指定されていない場合に、%で指定すると、「ルート」要素に対して相対値を指定していることになります。ルート要素とは最上位要素であるhtml要素のことを指します。ルート要素に指定されているブラウザのフォントサイズのデフォルト値は16ピクセルですので、「100% = 16px」となります。
次の例のように、値に200%を指定した場合のフォントサイズは「16px × 200%」となり、32ピクセルで表示されることになります。

p {
    font-size: 200%; /* 32pxで表示される */
}

親要素にフォントサイズを指定されている場合を見てみましょう。親要素のフォントサイズに36pxが指定されている場合、50%が指定されていると、「36px × 50%」となり、18ピクセルで表示されることになります。

body {
    font-size: 36px;
}
p {
    font-size: 50%; /* 18pxで表示される */
}

単位：em（エム）で指定

em は親要素の文字サイズからの相対値で、親要素の文字サイズを1とする単位です。%と同じく親要素のサイズが変更されると子要素のサイズも変化してしまう単位になります。%と違ってemはフォントのサイズに特化した単位です。

p {
    font-size: 2.0em;
}

%と同様に、親要素にfont-sizeプロパテが指定されていない場合、ルート（html）要素に対して相対値を指定していることになりますので、1em = 16pxとなります。
値に2.0emと指定した場合のフォントサイズは「16px × 2.0em」となり、16ピクセルの2倍の32ピクセルで表示されることになります。

親要素にフォントサイズを指定されている場合を見てみましょう。

body {
    font-size: 36px;
}
p {
    font-size: 1.5em;
}

この場合のフォントサイズは「36px × 1.5em」となり、36ピクセルの1.5倍の54ピクセルで表示されることになります。

%とemを単位とした場合、相対的な値であるのでPCや携帯端末などのデバイスに応じて大きさも相対的に変化するので、レスポンシブデザインに対応するには最適な単位だと考えられます。

%とemの違い

ここまで見ている限り、%とemの違いは百分率と割合の違いだけのように見えますが、大きな違いは%は親のサイズを基準にしているのに対し、emは親の文字サイズを基準にしているということです。

例えば親要素のボックスの幅（widthプロパティ）が1000ピクセルの場合、子要素の幅を50%で指定すると500pxと指定した場合と同じになります。

emをフォントサイズ以外にに適用した場合はどうなるでしょう。
親要素のボックスの幅が1000ピクセルの子要素の幅をに2emを指定したとします。これは子要素の幅は2000ピクセルにはなりません。emは親要素のフォントサイズが基準となるのですが、font-sizeプロパティ以外で使用すると自身のフォントサイズの相対値になってしまいます。ですので、文字サイズが16ピクセルであれば2.0emを指定されたボックスの幅は32ピクセルになってしまうことになります。

単位：rem（レム）で指定

rem はルート要素のフォントサイズを1とする単位です。ルート要素であるhtml要素で指定されたフォントサイズ対する相対が値反映されます。remは「root em(ルート エム)」の略です。

次の例のようにremでサイズを指定します。

p {
    font-size: 1.5rem;
}

この場合、ルート（html）要素に対して相対値を指定していることになりますので、「1rem = 16px」となります。
この場合のフォントサイズは「16px × 1.5rem」となり、16ピクセルの1.5倍の24ピクセルで表示されることになります。

body {
    font-size: 14px;
}
p {
    font-size: 1.5rem;
}

remで指定した場合、親要素にフォントサイズを指定しても、やはり1.5倍の24ピクセルで表示されることになります。親要素の文字サイズを指定しても結果に変化はありません。

remでの指定は、emと異なり総体の対象がルート一つですのでわかりやすというメリットがあります。これは、ルートのフォントサイズを変えなければ絶対値の単位のようにも使えますし、ルートのフォントサイズを変えることでサイト全体のフォントサイズをコントロールすることもできます。

ルートのフォントサイズを10pxにしておくremのテクニック

ルートのデフォルトフォントサイズは16ピクセルですから「1rem = 16px」ということになります。ではもしフォントのサイズを18ピクセルにしたいと思ったとき何remに指定すればよいでしょう。答えは1.125remです。これは非常にわかりにくいですね。

ですのでremを単位に指定するときにわかりやすくするためのテクニックとしてルートのフォントサイズを10pxにしておくというものがあります。

html {
    font-size: 62.5%;
}

デフォルトフォントサイズが16ピクセルですので「16px × 62.5% = 10px」になります。この指定によりremで指定する時もpx指定する時と同じように、直感的に指定できるようになります。

p {
    font-size: 1.8rem; /* フォントサイズ 18px */
}

文章の行の高さを指定するline-heightプロパティ

line-heightプロパティは、文章の行の高さを設定するためのプロパティです。行の高さを変えることで行間を調整したいときに使用します。line-heightプロパティで指定される高さは、文字の高さ＋上下の余白です。

行間は、line-heightプロパティで設定した数値からフォントサイズ（文字の高さ）を引いた大きさになります。

line-heightプロパティの値に指定できる単位

line-heightプロパティには様々な値が指定できますが、それぞれフォントサイズとの関係が重要になります。

値：normal（ノーマル）

「normal」は規定値です。Webブラウザの標準スタイルで自動で設定されます。

<p>line-heightプロパティは、文章の行の高さを設定するためのプロパティです。行の高さを変えることで行間を調整することができます。文章の見やすさや、読みやすさには文字の大きさと行間との関係が重要になります。</p>

p {
    font-size: 18px;
}

単位：px（ピクセル）で指定

px で指定した際にはフォントサイズに関わりなく、行の高さがピクセルで固定されます。

p {
    font-size: 18px;
    line-height: 36px;
}

line-heightプロパティに36px設定し、フォントサイズを18pxにすると、「36px（行の高さ） – 18px（フォントの大きさ） = 18px」となり、実際に行間は18ピクセル空く計算になります。

pxで指定した場合、フォントサイズを変更すると行の高さも調整する必要があり、line-heightを指定しなおす必要があります。特に、レスポンシブに対応するためフォントサイズが相対値で指定されることが多くなり、あまり適さない指定方法といえます。

単位：%（パーセント）で指定

% で指定すると、自身のフォントサイズを基準にどのくらいの大きさなのかの比率を指定する相対値になります。

p {
    font-size: 18px;
    line-height: 200%;
}

フォントサイズを18pxのとき、line-heightプロパティに200%を設定すると、行の高さは「18x（フォントの大きさ） × 200% = 36px」となり、「36px（行の高さ） – 18px（フォントの大きさ） = 18px」で実際に行間は18ピクセル空く計算になります。

%で指定した場合、pxでの指定と違って、フォントサイズを基準に行の高さが決まっているので、フォントサイズが変更された場合にもline-heightプロパティを指定しなおす必要がありません。

単位：em（エム）で指定

em で行の高さ（行間）を指定すると、%と同様にフォントサイズを基準に大きさを指定する相対値になります。フォントのサイズを1とする単位で、1であれば「文字の高さ = 行の高さ」になります。

p {
    font-size: 18px;
    line-height: 1.5em;
}

フォントサイズを18pxのとき、line-heightプロパティに1.5emを設定すると、行の高さは「18x（フォントの大きさ） × 1.5 = 27px」となり、「27px（行の高さ） – 18px（フォントの大きさ） = 9px」で実際に行間は9ピクセル空く計算になります。

emで指定した場合も、%と同様にフォントサイズを基準にすると行の高さが決まっているので、フォントサイズが変更された場合にもline-heightプロパティを指定しなおす必要がありません。

「em、%」で指定する際の注意点

em、%で指定した際には注意が必要です。親要素のline-heightプロパティ設定が子要素に引き継がれてしまうことです。

親要素と子要素のフォントサイズが異なると、行間が崩れてしまう可能性があります。

<div class="parent">
    <p>line-heightプロパティの値をemや%で指定する場合、親要素と子要素のフォントサイズが異なると行間が崩れてしまう可能性があります。</p>
    <p class="child">line-heightプロパティの値をemや%で指定する場合、親要素と子要素のフォントサイズが異なると行間が崩れてしまう可能性があります。</p>
</div>

.parent {
    font-size: 32px;
    line-height: 1.5em;
}
.child {
    font-size: 18px;
}

子要素のフォントサイズを変更した場合、親要素のline-heightプロパティの値を継承しているため文字の大きさに対して行間が空きすぎてしまっています。

親要素を見ると、フォントサイズを32pxのときline-heightプロパティを1.5emにすると、行の高さは「32px（フォントの大きさ） × 1.5 = 48px」となり、「48px（行の高さ） – 32px（フォントの大きさ） = 16px」で実際に行間は16ピクセル空く計算になります。

しかし、子要素のフォントサイズを18pxに変更すると行の高さ48pxが継承されてしまい、「48px（行の高さ） – 18px（フォントの大きさ） = 30px」となり、行間は30ピクセル空くことになってしまいます。

em、%で指定した場合、値を継承した子要素では文字サイズに適さない行間になってしまうことがあります。

数値のみの指定

特に単位を記載せずに数値だけを指定すると、フォントサイズを基準とした相対値の指定になります。emと同様にフォントのサイズを1として計算し、1だと「文字の高さ = 行の高さ」になります。

em同じように見えますが、数値のみで設定することには大きなメリットがあります。
単位をつけずに指定するとline-heightプロパティの値が子要素に継承されないということです。これにより親要素のフォントサイズに左右されずに行間が適切に設定されます。

.parent {
    font-size: 32px;
    line-height: 1.5; /* 数値のみの指定 */
}
.child {
    font-size: 18px;
}

より小さいフォントサイズを指定した子要素の行間を見てみると、子要素のフォントのサイズに対しての相対的な行間になっており、適切な行間であるといえるでしょう。

この指定方法であれば、フォントサイズを変更するたびにline-heightプロパティの値を調整する必要はありません。

レスポンシブに対応したデザインでは、line-heightプロパティを使用する際に単位をつけずに数値のみの指定方法が有効です。

文字間を指定するletter-spacingプロパティ

letter-spacingプロパティは、文字と文字の間の余白を設定するためのプロパティです。字間を調整したいときに使用します。

letter-spacingプロパティには以下のような値が指定できます。

値：normal（ノーマル）

これが規定値です。大抵のWebブラウザでは「0」になっています。これが初期値なのであえて指定することは少ないですが、レスポンシブデザインなどで規定値に戻したい場合などに指定することがあります。

単位：px（ピクセル）で指定

ｐxを単位に値を指定することで、フォントサイズに関係なく固定されたピクセル値の字間をあけることができます。

値が大きくなれば文字間が広くなります。マイナスの値を設定することができ、その場合は文字間は狭くなります。

<p>letter-spacingの値は「normal」です</p>
<p class="spacing-1">letter-spacingの値は「1px」です</p>
<p class="spacing-2">letter-spacingの値は「2px」です</p>
<p class="spacing-3">letter-spacingの値は「-0.5px」です</p>

p {
    font-size: 18px;
}
.spacing-1 {
    letter-spacing: 1px;
}
.spacing-2 {
    letter-spacing: 2px;
}
.spacing-3 {
    letter-spacing: -0.5px;
}

単位：em（エム）で指定

em を単位に値を指定しておくと、フォントサイズに応じた比率（相対的）で文字間が設定されます。

letter-spacingプロパティでは「1em＝文字の高さ」となります。例えば、0.5emを指定すると文字の高さの1/2の大きさの字間ができるということになります。

<p>letter-spacingの値は「normal」です</p>
<p class="spacing-1">letter-spacingの値は「0.1em」です</p>
<p class="spacing-2">letter-spacingの値は「0.2em」です</p>
<p class="spacing-3">letter-spacingの値は「-0.1em」です</p>

p {
    font-size: 18px;
}
.spacing-1 {
    letter-spacing: 0.1em;
}
.spacing-2 {
    letter-spacing: 0.2em;
}
.spacing-3 {
    letter-spacing: -0.1em;
}

emはフォントサイズに対しての相対的な単位ですので、フォントサイズが変わると、それに応じて文字の間隔も変更されます。

<p class="font-1">font-sizeが16pxで、letter-spacingは0.1emです</p>
<p class="font-2">font-sizeが32pxで、letter-spacingは0.1emです</p>

p {
    letter-spacing: 0.1em;
}
.font-1 {
    font-size: 16px;
}
.font-2 {
    font-size: 32px;
}

フォントサイズを切り替えることが多いレスポンシブデザインでは、emを使うことで自動的に文字間が調整され、文字サイズとのバランスを維持してくれますので、効率の良いコーディングができます。