Webサイトで明快なデザインと運用しやすいコーディングを両立する文字サイズ強弱の仮説・検証
2020.3.10
明快な（メリハリのある）デザインと、コーディング上も運用しやすいデザインシステムが両立する見出し文字サイズ強弱（スケーリング）を求めて立てた仮説です。これはTwitterでの投稿をまとめたものです。
用途による使い分け
製品やサービスのプロモーションのためのWebサイトの場合（1画面の情報量が少なくても良い場合）
- 製品やサービスを写真や画像を大きく配置したり、ゆったりと余白を設けて魅力的に伝えるページ構成にする。
- 見出しの文字のジャンプ率を高めにとって、ダイナミックな構成にしたほうがより魅力的に見える場合が多い。
- 画面のスクロールに対してデメリットが少ないので、見出し文字の強弱が付けやすい。
Webアプリケーションのように1画面の情報量が多い場合
- 1画面により多くの情報を表示する必要がある場合は、見出し文字のジャンプ率を大きくすることが難しい。
- そのため強弱が判別しやすい範囲でジャンプ率を小さく抑えたほうが、画面構成としてうまく収まりやすくなると考える。
- Webアプリケーションの場合は「AとBとCの情報を同時に表示したい」のような状況も多く、スクロールによるデメリットが起きる場合もある。
- 見出し文字サイズのジャンプ率は低いほうが、バランスを維持しやすいかもしれない。
仮説と概要
以下の設計方法で、デザインの明快さとコーディングのしやすさを両立するWebタイポグラフィが実現できるのではと考えています。
- 長文の文章の読みやすさを考慮して、本文の文字サイズは18pxで設計する。
- 本文の文字サイズ18pxを基準として各見出し用の文字サイズを決める。
- まず使用頻度の高い見出し1（h1タグ想定）〜見出し3（h3タグ想定）を1.56倍ずつのサイズ差で設計する（端数は四捨五入で計算）。
- 使用頻度の低い見出し4（h4タグ想定）〜見出し6（h6タグ想定）は1.56倍の基本倍率から外した例外サイズとして定義する。
- 倍率を1.56倍としているのは一定以上の強弱をつけるため。ある程度の大きさは必要であるが、1.56倍が最適かはWebサイトのデザインによって変わる。
- 通常のWebサイトでは1.3〜1.4倍あたりが運用しやすい文字サイズ倍率だと考える。今回はメリハリを重視しているため1.56倍で検証した。
- 文字サイズの種類を増やせば増やすほど細かなサイズ調整ができる。その反面ルールが増えることで、複数人でデザインシステムを運用する際の難易度が上がる。なるべくルールはシンプルにしたかったので、使用する文字サイズの種類は少なく留めておきたい。
1.56倍の文字サイズ倍率例
以下は1.56倍の文字サイズ倍率例の場合の各見出しの文字サイズ例です。見出し1が68pxと大きめなので、タイポグラフィはややダイナミックな印象になります。
- 見出し1：68px相当
- 見出し2：44px相当
- 見出し3：28px相当
- 見出し4：22px相当（使用頻度低い・例外サイズ）
- 見出し5：20px相当（使用頻度低い・例外サイズ）
- 見出し6：18px相当（使用頻度低い・例外サイズ）
- 本文：18px（基準）
- 注釈1：16px（小さいサイズ）
- 注釈2：14px（小さいサイズ）
- 注釈3：12px（小さいサイズ）
※これはPCやタブレットなど画面解像度の大きなデバイスを想定した文字サイズの指定です。スマートフォン用の画面解像度は別の文字サイズ指定をおこないます。
見出し1〜見出し3を主体として文字サイズを設計するメリット
- 見出し1〜見出し3の使用頻度の高い見出しの強弱がわかりやすい（メリハリのあるデザインとなる）。
- 3カラム以内のレイアウトの場合に見出し3をそのままの文字サイズ使える。結果的にシンプルな運用しやすいデザインシステムを維持できる（例外的なclass出し分け頻度を下げられる）。
- 使用要素を限定しているため、運用しやすい。
主なデメリット
- 見出し4〜見出し6以降の強弱をつけにくい（使用頻度が低いので許容範囲とする）。
- 見出し3の文字サイズを大きくしづらい（28px相当になる）ため、文字を大きく扱いたいときに例外的なデザインシステムの運用（例外的なデザイン用のclass）を必要とする場合がある。
総合評価
今のところはメリットがデメリットを上回っているように思いますが、実際に試して（運用して）みないとわからないことが多そうなので、まずは試してみようと思います。
文字サイズ倍率は1.56倍で計算しましたが、1.525倍の文字サイズもバランスが良いと感じます。
1.525倍の文字サイズ倍率例
- 見出し1：64px相当
- 見出し2：42px相当
- 見出し3：27px相当
- 見出し4：22px相当（使用頻度低い・例外サイズ）
- 見出し5：20px相当（使用頻度低い・例外サイズ）
- 見出し6：18px相当（使用頻度低い・例外サイズ）
- 本文：18px（基準）
- 注釈1：16px（小さいサイズ）
- 注釈2：14px（小さいサイズ）
- 注釈3：12px（小さいサイズ）
type-scale.comによる1.525倍のサンプル表示
今後も検証を重ねていく
実際に文字サイズの強弱を検証してみたところ、メリハリのあるデザインと運用しやすいコーディングの両立はできつつあると感じています。
まだ検証をはじめたところで見えていない懸念もあると思うので、今後も検証を重ねてWebタイポグラフィの品質を高めていきたいと思います。
1.31倍を基本とした文字サイズ倍率を試した（2019年6月9日追記）
2020年6月9日に文字サイズルールを見直して、PCおよびタブレット用の解像度では1.31倍の倍率を基本として文字サイズを調整しました（文字サイズのバランスは仮説と検証を繰り返しており、閲覧時点のWebサイトの文字サイズルールとは異なる可能性があります）。
各文字サイズの詳細は以下の記事に記載しています。
関連記事：読みやすいWebタイポグラフィとデザインルール設計について
調和数列を元にしたタイポグラフィを検証中（2022年5月7日追記）
現在は「音楽、数学、タイポグラフィ」という記事に書かれている調和数列によるタイポグラフィ設計も参考にしています。前からやってみたいと思っていたWebサイトの改善調整を試してみました（2022年4月5日現在）。以下は主な変更点です。
- ブログの最大コンテンツ幅を640pxから720pxに広げた。
- 本文の文字サイズを18pxから19pxに大きくして、全体的に調整。
- 一部文章やレイアウトの変更、デザインの微調整など。
文字サイズを大きくすることのデメリットとして、ブラウザの表示領域における情報量が減ることが考えられます。その対策として事前検証したところ、大きく変わらない（むしろレイアウト次第で画面内に表示できる情報量が増える）ようだったので、1度このレイアウトを試してみます。
変更前のレイアウト
変更後のレイアウト
文字サイズ部分のCSS（SCSS）
// font-size-pc
$text-5xs: 11px !default;
$text-4xs: 12px !default;
$text-3xs: 13px !default;
$text-2xs: 14px !default;
$text-xs: 15px !default;
$text-sm: 17px !default;
$text-base: 19px !default;
$text-lg: 22px !default;
$text-xl: 25px !default;
$text-2xl: 30px !default;
$text-3xl: 38px !default;
$text-4xl: 51px !default;
$text-5xl: 76px !default;
$text-6xl: 91px !default;
// font-size-smartphone
$text-mb-4xs: 11px !default;
$text-mb-3xs: 12px !default;
$text-mb-2xs: 13px !default;
$text-mb-xs: 14px !default;
$text-mb-sm: 15px !default;
$text-mb-base: 16px !default;
$text-mb-lg: 18px !default;
$text-mb-xl: 20px !default;
$text-mb-2xl: 23px !default;
$text-mb-3xl: 26px !default;
$text-mb-4xl: 29px !default;
$text-mb-5xl: 32px !default;
$text-mb-6xl: 37px !default;検証を効率化するために
画面解像度の高いデバイス用の文字サイズ強弱（タイプスケーリング）は、調和数列を用いて調整してみました。Googleスプレッドシートで自分用につくったフォントサイズ算出シートを使いながら比較してみました。
今後も状況に応じて調整していきたいと思います。
