Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

行間の値

Design

f:id:thleap:20140624145130p:plain

行間.. 見れば見るほど何が最適なのかわからなくなってくる。
line-height: 1.6 は少し狭いような気が文章が黒い塊に見える。1.7 以上は逆に行間が開きすぎて空行との区別がつきにくいように感じた。結果、間を取って 1.65 にした。

文字サイズや周囲の余白と行間の関係を早い内に理解しておかないと次も感覚で決定してしまうことになる。
行間に限った話ではないけど、デザインを決めるときには主観での決定を避けたい。

今回いくつかのサイトの行間を見てみて気づいた点をあげとく。

  • 記事ページと比べて、一覧ページで記事の概要を載せている所は少し行間を狭く指定してあるものがあった。株式会社コンセントのホームページでは、記事ページは line-height: 2.0 が指定してあるが、TOP の "ピックアップ事例" の記事の概要文章には 1.6 が指定してある 。
  • 行間 を 1.8 ~ 2.0 取ってるところもいくつかあったが、そういったサイトでは文字サイズが 13px ~ 14px くらいまでのものが多かった。
  • Adobe InDesign の自動行送りのデフォルト設定値は 175% 。
  • 文字サイズ、行間隔、左右アキを見るのにこのサイトが少し便利。

参考にしたサイトは適当に Gist に載せてる。

Remove all ads