huskycyan

webデザインを中心に学習したことを日記として残しています。

タイポグラフィ・行間や文字間

タイポグラフィ・行間や文字間

webを制作の勉強をやり始めた当初は行間(line-height)や文字間(letter-spacing)をあまり気にしないでコーディングやデザインをし続けていたが、最近では意識し始めるようになった。

綺麗だと思うサイトは必ず行間(line-height)や文字間(letter-spacing)が上手く使われている。文字間に関しては0.1em変えるだけでまったく印象が違うように思う。

私の場合、行間は1.4~1.6em位開けていることが多い。

行間や文字間を開ければあけるほど見やすいような気がするが、開けすぎると何か間が抜けたような印象を受ける。

有名なwebサイトのコードを見てもサイトによってまちまちでどうやらこれが正解という答えはないらしい。値に関してもem % pxなどそれぞれ違う。

行間の1.5emの内訳は行の中心基準で文字幅1em+行間0.5em、値150%と結果は同じ。実際に行間として空いてるのは文字半分の0.5emのようだ。

 

f:id:husky1127:20140928215913g:plain

 

そういえばline-heightは値を指定しない方がいいと言われたことがある。line-height:1.0;のような状態にした方が子要素への影響がないらしい。

値を指定しない方が安定するとは皮肉な話だ。

 

 

タイポグラフィは昔から異なる2つの方向性で葛藤しているみたいだ。

 

「読みやすいかどうか」「読みたくなるかどうか」

 

2つの方向性はまるで違う方を向いている。

サイトの目的や文字の目的によって使い分けるしかないんだろう。

新しい技術が常に生まれる業界の中でタイポグラフィの知識は腐らないきがする。

正解がない分、今日も迷い続けている。