人気ブログランキング | 話題のタグを見る
 
[Webデザイン]カーニングの件もっと
先日、このブログのエントリーを見て衝撃をうけたよ!

[Webデザイン] 文字組みについて本気出して考えてみた

正確にはこのエントリーについているはてブコメントに衝撃を受けたよ!
「これは参考になる」とか書いてあるよ!
これって基本中の基本だと思っていたよ!

私は紙の経験はほとんど無いけど、ウェブデザインの仕事は10年以上になるので
世の中の文字詰めの甘いサイト(やポスター)のことは同じく気になっていたよ!!
東横線の中刷りの東急のポスターとかひどいよね!
あと運用していくうちにカーニングぐちゃぐちゃになってるサイトとかね!

ということで、上のエントリーに書かれていないことで、
カーニングの基本と思われることを書いてみるよ!

音引きは横85%、小さい「ャ」は縦横85%、「・」は縦横50%+ベースライン調整


[Webデザイン]カーニングの件もっと_a0144753_17402048.jpg


上がA1明朝でベタ打ちしたもの、下がカーニングなどを調整したもの。
具体的に何をしているかというと、

[Webデザイン]カーニングの件もっと_a0144753_17404224.jpg


ということをしています。

(1) 音引きは横85%に
音引きをなぜ横85%にするかというと、

[Webデザイン]カーニングの件もっと_a0144753_17405457.jpg


漢字の「一」と音引きの「ー」が似ているため。
ぱっと見で音引きとわかるように横幅を短くして区別させます。

(2) 小さい「ャ」などは縦横85%に
これは「ャ」などをひとまわり小さくすることでより読みやすくするため。
ベタ打ちよりも読みやすくなっていると思います。

(3) 「・」は縦横50%+ベースラインシフト6ptに
中黒はベタ打ちだと大きすぎることがあるので、大きさを調整します。
今回は縦横50%にしました(フォントによって要調整)。
さらにベースラインシフトを6ptにして、文字の高さに対して真ん中あたりにくるようにします。

新ゴで英数字を組み合わせるときはHelveticaに


新ゴの英数字ってほんとダサいですよね…。
なので、新ゴと英数字を組み合わせるときは英数字をHelveticaにします。

[Webデザイン]カーニングの件もっと_a0144753_17411013.jpg


私はいろいろ試した結果Helveticaにしていますが、ArialでもUniverseでもいいと思います。
(うちの社内ではだいたいHelveticaです)

ちなみにただHelveticaにしただけでは以下のように、日本語と大きさが揃って見えません。

[Webデザイン]カーニングの件もっと_a0144753_17412694.jpg


なので、Helveticaだけ縦横を115%にします。(ベースラインは-1ptに)
こうすることで、最初の画像のように日本語と英数字の大きさが揃って見えるようになります。

元記事にあるように、くっつきの「は」や「kcal」を小さくすることでさらに読みやすくなります。

[Webデザイン]カーニングの件もっと_a0144753_17413720.jpg


なぜ個別のフォントサイズをptではなく%で調整するのか


例えば一つの文字列に12ptと10ptが混ざっていた場合、
「全体的に1ptだけフォントサイズを上げたい」というときに、
単語をひとつづつ選んでポイント数を調整しなくてはいけなくなります。
その点、フォントサイズを12ptにしておいて、単語を個別に%で調整することで、
全体は12ptのままですから、すぐにポイント数を調整することができます。
(拡大縮小ツールで拡縮すれば別ですが…)

終わりに


もっといろいろあると思うのですが今日はここまでで。
最後に私の好きなミース・ファン・デル・ローエの言葉でしめたいと思います。

『神は細部に宿る』

これ絶対!!
by chihosh717 | 2011-02-17 19:00 | デザイン


<< 青息吐息 ゴッサムカフェ >>