タイポグラフィとデザインルール設計についての記事です。Webサイトの文章の読みやすさに焦点を当てています。

このWebサイトをご覧いただいた方に感想を聞いてみたところ、ありがたいことに「読みやすいですね」であったり、「見やすくて良いですね」と言っていただけることがあります。読みやすいと感じていただけるのは、とても嬉しいことです。その一方でなぜ「読みやすい」と感じていただけたのか、「読みやすい」とは具体的にはどういうことなのかを改めて考えたいと思います。

「読みやすさ」を決める要素を分解することでタイポグラフィの理解が深まると考え、このWebサイトの構築にあたって意識したことや設計方法について書き出してみました。

意識したことはWebサイト全体の統一感と秩序の維持

このサイトを構築するにあたって、タイポグラフィのルール設計で意識したのは「サイト全体の統一感と秩序の維持」です。情報の優劣がわかりやすく伝わることを意図して設計しました。

当サイトの使用フォント

当サイトのフォント指定は以下のようにしています。

• 欧文と和文（日本語）を合わせて表示する箇所（本文やキャプション部分など）は、Noto Sans JPを優先したフォントを指定。
• 欧文（ラテンアルファベット）のみで表示する箇所は、Isidora Sansを優先したフォント指定。

当サイトではNoto Sans JPを使用していますが、この記事の内容は他のフォントを使用していても当てはまる汎用的なものと考えています。

読みやすさを決める要素と「文章が読みやすい状態」の定義

文章の読みやすさを決める主な要素として、以下のような項目があります。

• 読者の状態（視力・体調・年齢・主な使用言語など）
• 読者が読み慣れている環境への相似度
• 読者周辺の光源状況
• フォントの種類
• 文字サイズ
• 文字の太さ
• 文字色と背景色の関係性
• 行間の開け方
• 1行あたりの文字数
• 余白
• レイアウト
• 文字が表示される媒体
• 画面解像度（スクリーン上の場合）

「文章が読みやすい状態」とは、以上の要素+αが高い水準でバランス良く組み合わさった状態のことだと考えています。ではどのように組み合わせれば良いのでしょうか。

これらの要素で画面解像度や読者の状態、読者が読み慣れている環境への相似度、読者周辺の光源状況などは利用者（読者）側の環境に大きく依存するため、デザイナーが手を出しずらい要素です。

一方でそれら以外の要素（フォントの種類、文字サイズ、文字の太さ、文字色と背景色の関係性、行間の開け方、1行あたりの文字数、余白、レイアウト）はデザイナーが調整できそうです。

当サイトを事例に挙げると、制作実績（Work）とブログがメインのコンテンツとなるため、それらのコンテンツをわかりやすく伝えるUI（ユーザーインターフェイス）として、Webサイトをデザインする必要がありました。

要素をレイアウトするにあたり、まずは「制作実績やブログ詳細ページの本文の文字サイズ」、「1行あたりの文字数」、「表示する画像の最大横幅」の設計から始めています。

1行あたり35文字を基準として設計

制作実績やブログ詳細ページの文章ボックスは、PCおよびタブレットの画面解像度において「本文の文字サイズが18px」かつ「1行の文字数が約35文字になること」を基準として、タイポグラフィのルールを定めました（2022年5月7日現在、コンテンツ幅を720pxかつ本文の文字サイズを19pxに変更しました。詳細は後述）。

このタイポグラフィのルールをWebサイト全体のレイアウト設計のベースとしています。1行あたり約35文字とした主な理由は、以下の2点です。

• 読者の視線移動の負荷が少なく、心地よく読み進められる文字数が1行あたり約35〜38文字と考えるため。
• 本文の文字サイズを18pxと指定したときに約35文字の横幅になる文章ブロックの大きさが640pxであり、画像や動画と組み合わせて表示する際にバランスが良いと判断したため（640pxは8の倍数ピクセルであり、コンテンツ幅として柔軟性が高いことも理由に含まれる）。

本文の文字サイズを18pxにした理由は、ブログのように長文になりがちなコンテンツにおいて、読者が読み進めやすい文字サイズだと考えたためです。実際には20px、19px、18px、17px、16pxの5種類の文字サイズで見え方を検証し、その中で最もバランスが良いと判断したのが18pxでした。

PC版のTwitterは1行あたり36文字で改行

1行あたり35〜38文字で組まれているサービスの例では、Twitterがあります。TwitterをPC版のChromeで見ると、日本語の場合は1行あたり36文字表示されるように文字が組まれています。

文字サイズルールの設計

制作実績やブログに用いる文字サイズは、PCおよびタブレット用の文字サイズ設定では本文を18pxと定め、本文の文字サイズとの強弱を意識しながら見出しや注釈などの文字サイズルールを定めました。例えばブログコンテンツにおいては、基本の文字サイズを以下のように設定しています。

PCおよびタブレット用の文字サイズ設定

• 記事タイトル：40px（大見出しとのサイズ差：9px）
• 大見出し：31px（小見出しとのサイズ差：7px）
• 小見出し：24px（本文とのサイズ差：6px）
• 本文：18px
• 画像のキャプション：14px
• 注釈：14px

スマートフォン用の文字サイズ設定

• 記事タイトル：24px（大見出しとのサイズ差：2px）
• 大見出し：22px（小見出しとのサイズ差：2px）
• 小見出し：20px（本文とのサイズ差：4px）
• 本文：16px
• 画像のキャプション：14px
• 注釈：14px

※スマートフォン用の文字サイズも用途に応じた使い分けができるように、コーディング上でコンポーネント化（機能ごとに部品化）して設計しています。

※2020年6月9日以降に文字サイズルールを見直して、PCおよびタブレット用の解像度では1.31倍の倍率を基本として文字サイズを調整しました（文字サイズのバランスは仮説と検証を繰り返しており、閲覧時点のWebサイトの文字サイズルールとは異なる可能性があります）。

文字サイズ強弱の仮説と検証

文字サイズ強弱の付け方について、仮説と検証のメモを別の記事でもまとめています（1.56倍や1.525倍の倍率による比較など）。

関連記事：Webサイトで明快なデザインと運用しやすいコーディングを両立する文字サイズ強弱の仮説と検証

自身のポートフォリオサイトで文字サイズ倍率（フォントスケーリング）を検証中。PC用ではベース文字サイズを18pxとして1.31倍の倍率で設計すると、コンテンツ幅が640pxのブログ用ブロックでも扱いやすく、読みやすさとメリハリを両立しやすいと感じる。画像は文字サイズ設計と変数化の途中経過です。 pic.twitter.com/VQLFzUAscI

— 木下 裕哉 / Yuya Kinoshita (@yuyaink) June 7, 2020

調和数列を元にしたタイポグラフィを検証中（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スプレッドシートで自分用につくったフォントサイズ算出シートを使いながら比較してみました。

今後も状況に応じて調整していきたいと思います。

背景色と文字色のコントラストを意識する

背景色が白もしくは白に近い場合は、文字色はグレーから黒を指定すると読みやすくなります。重要なのは背景色と文字色の差（コントラスト）です。このサイトでは本文の文字色は濃度85%の黒色に近いグレーを指定し、見出しは濃度100%の黒色を指定しています（2019年1月30日時点）。

文字色がグレーに近づくと優しい印象になる利点があるのですが、利用者のディスプレイ品質によっては想定以上に文字色が薄く表示されてしまう可能性があるため、複数のディスプレイで検証した上で文字色を定めたほうが良いと考えています。

ディスプレイ品質の影響をなるべく抑えて安定した可読性（読みやすさ）を維持するため、自分の場合は本文の文字色に濃いグレーや黒を用い、注釈には薄いグレーを用いて強弱（濃淡）をつけることが多いです。

コンポーネント設計によるコーディング上のルール管理

文字サイズをサイト全体で管理できるようにコンポーネント化（機能ごとに部品化）したコーディングルールを定めました。コーディングルールはFLOCSSをベースに設計しており、Sassの@extendを用いて管理をなるべく効率化しています。例えば以下のようなコード設計になっています。

本文用の文字サイズを指定したCSS（Sass）

// __common-setting.scss

// font-size-pc-and-tablet
$text-5xs: 10px !default;
$text-4xs: 11px !default;
$text-3xs: 12px !default;
$text-2xs: 13px !default;
$text-xs: 14px !default;
$text-sm: 16px !default; 
$text-base: 18px !default;
$text-lg: 20px !default;
$text-xl: 24px !default;
$text-2xl: 31px !default;
$text-3xl: 40px !default;
$text-4xl: 53px !default;
$text-5xl: 70px !default;
$text-6xl: 91px !default;

// font-size-smartphone
$text-mb-4xs: 10px !default;
$text-mb-3xs: 11px !default;
$text-mb-2xs: 12px !default;
$text-mb-xs: 13px !default;
$text-mb-sm: 14px !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;

// line-height
$leading-none: 1 !default;
$leading-x-tight: 1.25 !default;
$leading-tight: 1.5 !default;
$leading-snug: 1.6 !default;
$leading-normal: 1.7 !default;
$leading-relaxed: 1.8 !default;
$leading-loose: 2 !default;

@import "../../__common-setting.scss";

.c-text{
  margin: 0 auto 1.5em;
  line-height: $leading-loose;
  @include lineHeightCrop($leading-loose);
  font-size: $text-base;
  @media screen and (max-width: $screen-sp){
    font-size: $text-mb-base;
  }
}

.c-text--xl{
  @extend .c-text;
  font-size: $text-xl;
  @media screen and (max-width: $screen-sp){
    font-size: $text-mb-xl;
  }
}

.c-text--l{
  @extend .c-text;
  font-size: $text-lg;
  @media screen and (max-width: $screen-sp){
    font-size: $text-mb-lg;
  }
}

.c-text--s{
  @extend .c-text;
  font-size: $text-sm;
  @media screen and (max-width: $screen-sp){
    font-size: $text-mb-sm;
  }
}

.c-text--xs{
  @extend .c-text;
  font-size: $text-xs;
  @media screen and (max-width: $screen-sp){
    font-size: $text-mb-xs;
  }
}

.c-text--xxs{
  @extend .c-text;
  font-size: $text-3xs;
  @media screen and (max-width: $screen-sp){
  }
}

.c-text__br{
  @media screen and (max-width: $screen-sp){
    display: none;
  }
}

※厳密にはコーディングの基準となるclassは「.c-text」で、その文字サイズは16pxとしています。ブログコンテンツの本文用文字サイズの18pxに該当するclassは「.c-text–l」です。これはサイト全体における文字基準サイズを16pxで設計しているためです。

見出し用の文字サイズを指定したCSS（Sass）の一部

@import "../../__common-setting.scss";

.c-heading-lv3{
  color: $color-bk;
  font-size: $text-4xl;
  line-height: $leading-x-tight;
  font-weight: $font-bold;
  @media screen and (max-width: $screen-sp){
    font-size: $text-mb-3xl;
  }
}

.c-heading-lv3--mix{
  @extend .c-heading-lv3;
  font-family: $font-family-mix;
  letter-spacing: $letter-spacing-2;
  margin-right: - $letter-spacing-2;
}

.c-heading-lv3--jp{
  @extend .c-heading-lv3;
}

※使用頻度の高い項目は変数化しています。例えば$font-family-mixは和欧混植のフォントファミリーを定義したもので、$letter-spacing-1は文字間の開き具合を定義したものです。

やってみて良かったこと

• 「本文用文字サイズ18px」かつ「1行あたり35文字」をカラム幅の基準としてサイト全体を設計する方法は、読みやすさとレイアウトのルールを維持する方法として有効だと感じた。
• サイト全体を通したタイポグラフィのルールを設計し、それをコーディングのルールに落とし込んでデザインシステムを設計できたこと。
• 文字サイズのCSSルールを定める際に、ブラウザでの検証とリファクタリングを繰り返しながらルールの精度を高めていけたこと。

Illustratorでデザインした画面デザインと実際のブラウザに表示される状態は微妙に異なるので、コーディングによる調整が最終的な品質を左右します。例えばline-heightは0.1単位で、p要素やli要素のmarginは0.1em（pxの場合もある）単位で調整することが品質向上につながります。

※ごく一部においては0.05em単位で調整しているところもありますが、このあたりまでくると趣味の領域に入っている気もするので、時間との兼ね合いで判断したいところです。

まとめ

• 「1行あたり35文字」をカラム幅の基準としてサイト全体を設計する方法は、読みやすさとレイアウトのルールを維持する方法として有効だと感じた。
• ブログなどの読み物コンテンツの本文用文字サイズは、PCおよびタブレット環境であれば18px、スマートフォンでは16pxが良いと判断した。
• 基準となる文字サイズを決めて、情報の優劣によって文字サイズや余白の大きさを定めると秩序を維持しやすい。
• コーディングによる調整が最終的な品質を左右する。例えばline-heightを0.1単位で、marginを0.1em（もしくは1px）単位で調整するようなことの積み重ねが品質向上につながる。
• 文字サイズをサイト全体で管理できるように、コンポーネント化したコーディングルール設計が必要。
• コーディング反映結果の検証とリファクタリングの繰り返しによって、読みやすさとコーディングルールの精度を向上した。

当サイトを事例として、タイポグラフィやデザインルール設計についてふり返ってみました。Webサイトの構築中に思考してしたことを文章として書き出すことで、考え方や意図を再整理できて良かったと思います。

余談

過去に嘉瑞工房の高岡先生からタイポグラフィの講義で教わった中で、特に記憶に残っている言葉があります。それは「文章とは読者に『読ませるもの』ではなく『読んでいただくもの』」という言葉です。

そのときに「読者に読んでいただくために様々な工夫をすること。謙虚な気持ちでタイポグラフィに取り組むこと」という心構えを教わりました。当時の自分が納得して強く共感したためか、教わってから4年以上経ちますが今でも覚えています。

対象物が紙であっても、スクリーン上のWebサイトやアプリであっても、「読者に読んでいただくために工夫する」という気持ちを変わらずに持ち続けたいと思っています。