紙、その他の媒体と比べるとまだまだ歴史が浅いwebのタイポグラフィー（文字についてのデザイン、大きさや行間、書体などの考え方）ですが2023年時点で整理したことをまとめてみます。
本文について
私自身2005年くらいからウェブ関連の仕事をしていますがその頃から現在までの経験談を書かせていただきます。
よく使われる文字の大きさ｜本文
16pxというサイズがよく使われる大きさとして言われている印象です。
個人的には20pxくらいの大きめのサイトも読みやすくて良いと考えています。特に国内のマーケットを考えた場合、相対的に高齢者の比率が高くなるのでターゲットを考えた場合にも少し大きめにするというのもありだと感じます。
指定方法
ある調査によるとremや%といった相対指定をしているサイトが多かったとのことでした。
この理由を考えるにブラウザ自体の機能でフォントサイズの指定があり、pxなどの絶対値で指定するとこれが機能しなくなるためということが考えられます。ただブラウザにはズーム機能もありこちらでは絶対値で指定してもフォントサイズが変わります。
ブラウザのフォントサイズ機能とズーム機能の違い
フォントサイズ機能でフォントを大きくするとデベロッパーツールで解析した際のcssのfont-sizeも変化します。
対してズーム機能でフォントを大きくした場合はデベロッパーツールで解析した際のcssのfont-sizeは変化しません。
remの仕様
相対的な指定ですが基準となるのはルート要素<html>タグになります。そして多くのブラウザ（Chrome, Firefox, Safari, Edge, Opera）ではhtmlのデフォルトフォントサイズは16pxになります。このデフォルトのフォントサイズはブラウザの文字サイズ機能で変化するので1remでも16pxだったり24pxだったりと変化します。
１行に含める文字数は｜行長
1行に含める文字数は全角35文字から45文字。（１例としての目安）
これは紙媒体などでも大体の標準数みたいなものが言われていますが、ざっくりした数値で諸説あるという印象です。この理由として考えられるのは、目的としての「読みやすさ」という指標自体ざっくりしていて個人個人の主観、環境によるということがあります。例えばなるべく多くの情報を一度に読みたいだったり、普段から活字慣れしている人は長い行長の方が好みという方もいらっしゃいます。対して活字慣れしていないという方にとっては文字がたくさん並んでいる時点でストレスを感じるかもしれません。また視力の良し悪し、読む環境の明るさなどの環境でも「読みやすさ」は変わるんですね。なので正解がない世界、毎回状況を確認して決めるというやり方が個人的には良い気がしています。
「読みにくい」の原因ははっきりしている
読みにくいというのは視線が移動した際に幅が広いと次の行が認識しずらいということがほとんどの原因です。これは次に解説する行間も関係してくる事になりますが視線が移動して次の行を探すというところが負担になっているんですね。
行間
行間に関してはよく言われる数値として文字サイズの150％〜200％、cssのline-heightで1.5〜2位が標準値となっている印象があります。これはウェブも他媒体も同様に語られることが多いと思います。特に理由がなければまずこの範囲の数値を当ててみて調整していくというやり方を取ることが個人的には多いです。
似たようなものとして段落と段落の間もありますがこれはサイトごとに結構バラバラだと思います。一つ言えるのはあまりに間隔が狭いと段落としての機能が曖昧になってしまうので一つの塊という認識を持たせることが重要ですね。
書体
書体／フォントについては年々幅広くなってきているのが現状です。ウェブの世界ではフォントはページ表示速度に関わる＝SEO的に影響もある要素（特に日本語などの2バイト文字の商圏では）なのでここは紙媒体と大きく違うところですね。
このような背景からなるべく標準のフォントを使うという慣習が2023年現在もまだまだ残っている印象があります。
（※ちなみに2010年くらいからウェブフォントサービスが立ち上がっていますが、大きいところでもサービスを終了したりしているのが現状です。）
反面ウェブの環境はどんどん進化しているので多様なフォントを使えるようにもなってきています。「デザインで攻めたい」などの理由で少し変化をつけたフォントを採用するのもありだと思います。
コメント