タイポグラフィ
1行の文字数
Measure
1行の文字数とは、テキスト1行に入る文字の数、つまり1行あたりの横幅のことで、長い文章の読みやすさを大きく左右します。
The quick brown fox jumps over the lazy dog while the sleepy cat watches the rain fall softly on the window.
60ch · 理想的（45〜75文字）定義
1行の文字数(measure)とは、テキスト1行に入る文字の数、つまり1行あたりの横幅の ことです。1行が長すぎると、目が行末まで進んだあとに次の行の始まりをうまく見つけ られず、たびたび読む位置を見失ってしまいます。逆に短すぎると、数文字も読まないうちに 行が終わってしまい、読むリズムが何度も途切れてしまいます。画面が広いからといって テキストを端から端までびっしり並べると、かえって読みにくくなるのはこのためです。 1行の文字数は目立たない値ですが、長い文章の読みやすさを大きく左右する要となります。
なぜ重要か
人の目は、1行を読み終えたあとに次の行の先頭へ戻る動きをくり返しています。この戻る 距離が長すぎると負担が大きくなり、読み間違いも増えます。1行が長すぎると次の行を 見失ったり同じ行を読み返したりしやすく、短すぎると今度は頻繁に行を変えることになって 目が疲れてしまいます。ちょうどよい1行の文字数は、この2つの負担のあいだでバランスを 取ってくれます。とくにブログ記事やドキュメントのように長く読み続ける画面では、1行の 文字数を整えるだけで体感の読みやすさが大きく変わります。広いモニターで本文の幅を ほどよく制限することが大切なのも、結局はこの原理で説明できます。新聞や書籍がページを いくつかの段に分けるのも、1行が長くなりすぎないようにするための昔からの知恵で、 画面でも同じ原理がそのまま通用します。
よくある間違い
- 本文に最大幅を設けず、大きな画面で1行が果てしなく長くなってしまうことです。 デスクトップの全幅をテキストでびっしり埋めると、1行が100文字を軽く超えてしまい、 とても読みづらくなります。
- 読みやすさのための幅制限を、カードやサイドバーのような狭い要素にまでそのまま かけてしまうことです。すでに十分に狭い領域の幅をさらに縮めると、1行が短くなり すぎて不自然になってしまいます。
- 見出しやリストのような要素にまで、本文用の幅制限を同じようにかけてしまうことです。 短い見出しや1行だけの項目はもともと折り返しがほとんどなく、幅を狭めても得るものが なく配置が不自然になるだけです。
実務のヒント
- 本文の1行は45〜75文字くらいが理想的です。CSSのch単位やmax-widthでこの幅を制御 でき、先に見たコンテナの最大幅は、まさにこの1行の文字数を守るための道具です。
- 幅は固定のpxよりも、文字幅を基準にしたch単位で指定してみてください。60chのように 決めておくと、フォントや文字サイズが変わっても1行に入る文字数がほぼ一定に保たれ、 どんな環境でも狙った行の長さを安定して守れます。
- 1行が長くなりがちな広い画面では、行間も少し余裕をもたせてください。行の長さと行間は たがいに組みになって動くべきもので、こうすることで行が長くなっても目が次の行の 先頭を楽に見つけられます。
AIに頼む
下に貼り付けるCSS/JSXから本文テキスト領域を探して、max-widthがなくて1行が100文字を超えている箇所を選んで。各本文コンテナに1行45〜75文字が保たれるよう、max-widthを固定pxではなくch単位(例：60ch)で指定して、行が長くなった分だけline-heightも一段ゆったりと一緒に上げて。見出し・リスト・カードのように、すでに狭かったり改行がほとんどない要素にはこの制限をかけず、変えた箇所と理由を表にまとめて。
この画面は[コンテンツの性格 — 例：じっくり読むブログ本文]なんだ。これに合う1行の長さを設計して。本文の1行が45〜75文字に収まるようにch単位のmax-widthを一つ決めて(例：65ch)、なぜその値なのかをコンテンツの性格と結びつけて説明して。その幅に合うline-heightもペアで一緒に提案して、結果を--measureのようなCSS変数として抽出して。
下に貼り付けるコードから、max-widthやchで設定した幅制限を全部見つけて、それがかかっている場所がどこなのかを分類して。サイドバー・カードのようにすでに狭い領域や、見出し・1行リストに本文用の幅制限が誤ってかかって、1行が45文字より短くなったりレイアウトだけ不自然になった箇所は制限を外して。幅制限は実際に複数行へ折り返される本文だけに残して、どこをなぜ外したのかを根拠と一緒にまとめて。