サイトのタイポグラフィ（文字配置の美しさ）を上げるためのTipsいろいろ

色やデザインに隠れがちですが、なんだかんだ言ってもウェブサイトの中心は文字情報。
いくら配色がよくっても、肝心の本文が見づらくてはサイトの価値は台無しです。

その文字情報をより綺麗に、見やすく作り上げるための5つのTipsです。

実は、専門的なタイポグラフィの知識が無くても、かなりの部分はカバーできてしまうものです。

1. CSSの初期値を一旦クリアーしてしまう

CSSの解釈はブラウザによって異なったり、デフォルトの数値がデザインを後から邪魔したりします。
まずはこの値をゼロクリアーして、その上にスペーシングや見せ方を重ねます。

一見面倒ですが、最終的な人的コストのカットにもなる方法だと思います。

英語版ですが、米Yahoo Developer NetworkのYUI Reset CSSあたりが参考になるでしょう。

2.一行の文字数を適切な長さにし、長文を避ける

これは言語の問題でもあるのですが、日本語は英語と異なり、単語単位で行末を折り返してくれません。
また、漢字によってどうしても文字が詰まった印象を与えてしまいます。

そのため、長文になればなるほど、美しさや可読性が損なわれるという欠点があります。

例）英語の行末は、適度にでこぼこしているが、日本語はメリハリがない

長文を意識的に避けることで、文字配置の美しさが自然にアップします。

3.使用するフォントを増やしすぎない

デザインに凝るあまり、色々なフォントを使うと、部分部分では綺麗でもページ全体のまとまりを損ないます。
特に、明朝体とゴシック体の混在は致命傷でしょう。

4.行間は広めに、広めに、とにかく広めに

繰り返しになりますが、日本文は漢字によってどうしても文字が詰まった印象を与えてしまいます。

これを回避する最も確実かつ効果的な方法が行間を広く取ることです。
大体140%以上がおすすめですが、カタカナの多いサイトだと少々行間が詰まっていても平気です。

例）行間100%と150%の設定ではまったく美しさが異なります

 

5.括弧や記号はなるべくシンプルなものに統一を

細かいルールではあるのですが、まさに「神は細部に宿る」の典型例。
ところどころに出現する括弧や記号がバラバラだと、文章としての綺麗さが損なわれ、かなり鬱陶しい印象をユーザへ与えます。

括弧だけでも

• 「」
• 『』
• 【】
• () 半角
• （）全角

など多数あります。これらが毎回ランダムに出てきていては、綺麗なサイトは実現できません。

 

まとめ、サイトのタイポグラフィ（文字配置の美しさ）を上げるためのTips

1. CSSの初期値を一旦クリアーしてしまう
2. 一行の文字数を適切な長さにし、長文を避ける
3. 使用するフォントを増やしすぎない
4. 行間は広めに、広めに、とにかく広めに
5. 括弧や記号はなるべくシンプルなものに統一を