2014/12/8

Web

サイトの文字の調整

特設サイトとかを見てると文字のカーニングがデフォルトのままだったりするのを見かけます。
webをそこまで触ってない人からすると、そもそも「HTMLってカーニングできるの?」って話。

「なんとなく知ってるしせっかくだから作ってみっか!」みたいなノリでいいのです。

けどカーニングや行の高さをCSSで調整することで可読性が上がって見栄えが良くなるなることがあるのです。
どうせなら自分の作った特設サイトとかを多くの人に、最後まで見てもらうためにそういう細かいところからやってみましょう!

ということで、ザックリとですが2つほどよく使うプロパティについて…

“letter-spacing”

こいつは文字と文字の感覚を調整することができるプロパティです。
デフォルト値だとnormalです。普通です。

このプロパティにはfont-sizeなどと同じように数字を指定してあげれば適応されます。
適応したいプロパティ、例えばpタグだったらそのpタグに「letter-spacing:(数字)+単位」の表記で。

個人的には単位は「em」を利用するのをオススメしますよ。
ちなみに「em」という単位はfont-sizeの値を1とする単位です。

詳しいことは「CSS em」とか別途検索してください!

このmemoページは「letter-spacing:0.2em」で設定されてるはずです。

“line-height”

こいつは行の高さの指定ができるプロパティです。
デフォルト値はletter-spacingと同じでnormalです。

こちらも普通に数字を指定してあげれば適応されます。
ただし、負の値は利用できません。

もうひとつ気をつけなければいけないのは、適応したい場所のfont-sizeなどですね。
font-sizeが15pxのところにline-heightを10pxで指定すると行同士が重なってしまいます。
line-heightはfont-sizeを含めて行の高さを計算するのでfont-sizeよりも大きい値を適応しないと意味が無いです。

ちゃんと指定した場合は「((line-heightの値)-(letter-spacingの値))/2」が行の上下に適応されます。

オチ

と、まあ「それくらい知っててサイト作ってるわ!」とかって人には今更感あふれるアレですね。
けど僕も最初の頃はbrタグを使いまくって隙間調整したり、「文字間なにそれおいしいの?」って時期もあったわけで…

特に同人界隈の特設は趣味でやってる方が大半なのでそういうこと気にしないこともあると思います。
ここらへんの調整を意識するだけで、パッと見の印象変わったりするのよ。
かと言って、過度な調整は逆効果です。やるべきかどうかをまず判断しましょう。

そもそもこんな説明で大丈夫か!!

今回はこの2つのプロパティだけの紹介でしたが、世の中にはまだまだ色んなことを調整することができるプロパティがあります。気になったら調べてみてください。
「そういえばあんな調整できたな」みたいな感じで頭の片隅に置いてもらって、いざ作ったりする時にこういうちょっとした一工夫を思い出してあげてくださいね!

Twitter