coding tips

posted：2014.07.02

[html] 文字サイズの指定

cssを使って文字サイズを指定する方法をご紹介します。

フォントサイズを指定する単位の代表的なものにpx、em、remがあります。これらの特徴を確認しましょう。

サンプルをダウンロード
from GitHub

px指定～サイズ不変～

pxでフォントサイズを指定すると文字通りピクセルで指定がされます。

その結果、ブラウザでフォントの設定をすると適用されないようになります。

デザイン的な制限がないのであれば、ユーザーの視力を考慮して、なるべく変更が可能なemやremを使う方法を採用すると良いでしょう。

※IE確認方法 [Alt]キー（メニューバー表示）→表示→文字のサイズ→（任意のサイズ）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="fontSample01">テスト</div>
</body>
</html>

@charset "UTF-8";

.fontSample01 {
  font-size: 20px;
}

相対単位em

pxはピクセルによる単位ですので、そのサイズは絶対指定となります。それに対してemは1文字分の大きさを1.0emとする相対単位になります。

こちらを指定すると、px指定の時に動作できなかったフォントサイズの指定ができるようになります。

しかし、注意が必要です。文字列「テスト３」のようにフォントサイズがemにより、親子のボックスで指定がされていた場合、その値は累積されます。つまり、この場合は2倍×2倍となってしまうのです。フォントのサイズを指定するルールをサイト内で統一しなければなりません。

emによるfont-size指定
図1. emによるfont-size指定
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="fontSample01">テスト１</div>
  <div class="antiPatternOuter">
    テスト２
    <div class="antiPatternInner">テスト３</div>
  </div>
</body>
</html>

bodyタグにfont-sizeを62.5%で指定しています。この設定を行うと、1.0em→10px、1.3em→13pxとなりますので、サイズの把握をしやすくなります。

@charset "UTF-8";

body {
  font-size: 62.5%;
}

.fontSample01 {
  font-size: 2.0em; /* 20px */
}

.antiPatternOuter {
  font-size: 2.0em; /* 20px */
}
.antiPatternInner {
  font-size: 2.0em; /* not 20px */
}

rem（ルートem）によるフォントサイズ指定

emは先述のとおり、入れ子にした際の問題に配慮した作りをしなければなりません。 少々面倒だったのですが、CSS3からはこれをより分かりやすく指定することができるremという単位が追加されました。

remのrはルート（根）を意味し、htmlタグに指定がされたフォントサイズが基準になります。 入れ子で複数指定があったとしてもremで指定する限り、htmlでの設定に対する相対値で表示されます。

remによるフォントサイズ指定
図2. remによるフォントサイズ指定
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="fontSample01">テスト１</div>
  <div class="fontSample02">
    テスト２
    <div class="fontSample03">テスト３</div>
  </div>
</body>
</html>

@charset "UTF-8";

html {
  font-size: 62.5%;
}

.fontSample01 {
  font-size: 2.0rem;
}

.fontSample02 {
  font-size: 2.0rem;
}

.fontSample03 {
  font-size: 2.0rem;
}

組み合わせによるフォント指定方法

remを使うと、入れ子による重複設定を回避することができますが、css3に対応しているブラウザでしか機能しません。

そこで、解決策の一つとして、ほかの単位（px）と組み合わせて表示をする方法を紹介します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="fontSample01">テスト</div>
</body>
</html>

@charset "UTF-8";

html {
  font-size: 62.5%;
}

.fontSample01 {
  font-size: 20px;
  font-size: 2.0rem;
}
動作確認環境