line-height はどの位つけましょうか?
たまーに、本当にたまーにではありますが、複数人で話しているときに、line-height はどの位にしましょうか?という話題が出ることがあります。だいたいそんな時は各々が自分の考えを言って、それで終わってしまっていましたので、今回、ちょこっとのサイトでどんな指定をしているのか調べてみました。
(ちなみに今回調べるのに参考にしたサイトは、Web のフロントエンドで飯を食う方であれば概ね知っていたり、有名だったり、またアクセシビリティというかユーザビリティなんかも考えていらっしゃって、文字の読みやすさなんかにも気を使っているのだろうと思われるサイトです。
また、調べたページは、主に、ある程度文章量があるページを参考にしています。)
-
インフォアクシア
言わずと知れたアクセシビリティにおける日本総本山。
「実践ノウハウページ」では、1.3emが指定されています。
-
富士通
こちらもまた、言わずと知れたアクセシビリティにおける日本総本山。
「サポートページ」では、150%が指定されています。
-
西村あさひ法律事務所
誰もが認める bA 社が関わったサイト
一つのページ内で、複数の指定をしているのが印象的でした。例えば、リード文相当の文字サイズの場合は、1.64。通常の文字サイズ相当であれば、1.42。また、サイドメニューは、1.5など、文字サイズと文字の役割や、どのモジュールに所属する文字なのかという違いなどにより、デザイナーさんからのモックを忠実に再現しているという印象です。
-
デジパ
CSS HappyLifeや、WWW WATCHを書いている方々の会社
「業界インタビューページ」で調べてみたところ、body 要素へ、1.5を指定するシンプルなものになっていました。
-
モリサワ
ヒラギノフォント新ゴなど、日本を代表するフォントを作っている会社全体を通して、文字サイズにあわせた値を指定しているようです。12px の文字には、19px(1.58333…em相当)。10px の文字には、15px(1.5em相当)の指定です。
-
サイバーガーデン
カニの貴公子でお馴染みの益子さんが運営しているサイト
#content(メインカラム)に対して、1.5というシンプルな形です。ちなみに #sidebar へは、1.3でした。さらにちなみに、フッター的役割の、address#copyright へは、1.6となっています。
感想
大体が、1.4~1.6の間ですね。僕の周りで話があがる際にも、ほぼ同じですので、今回のサイト以外も、概ねこの位で指定されているのでしょう。
今までは、なんとなく1.3あたりでは、行と行がくっつき過ぎて、文章を読みにくいなぁーと思っていたのですが、インフォアクシアさんの実践ノウハウページページはそんなことも無い訳で。
やはり、行の高さというのは、見た目のほんの一部な訳ですから、ページ自体のデザインによっても変わって来るんだろうと思います。
また、今後自分としては、「西村あさひ法律事務所」方式を取り入れていくようにしようかなと思います。
というのも今回調べてみて、自分でサイトを制作している際にも、すべての文字に対して1.6などを指定すると、文字の大きさや、文章の役割によっては、違和感のある場合があったなと(例えば画像に対するキャプションは小さめな値の方が良いなとか)、あらためて気づきました。
そんなこんなで皆さんはどうされておりますか?
comment