CSSで行間（ line-height ）と文字サイズの確認用ツールです。画面右の項目を変更してご利用ください。
このページでは、段落（P要素）まわりのCSSで重要だと思われる文字サイズ、行間、左右マージン、段落間隔（P要素の下マージン）を実際に変更し、確認できます。
CSSでのレイアウトデザインにおいて、最も重要な基本事項といえば文字の可読性です。最近ではブログの普及もあって、極端に読みにくいページは少なくなりましたが、WEBを作る人としては押さえておきたいところです。
以下、サンプル文章代わりの雑文です。
海外で小さい文字のサイトってありますよね。でね、そのサイトが妙にイカしたデザインに見えたりだとか。実際、ぱっと見は綺麗です。文字が小さくなるにつれて文章ではなくて模様だとかパターンの塊に見えるためだと思うのですが、そういったサイトの文字サイズを日本語に適用するとちょっとまずい。
例えばA-Zまでのアルファベットは、構造が単純なので小さくしても可読性はそれほと落ちないですよね。一方、日本の文字は複雑なのです。「複雑」という文字は「Complexity」よりも複雑なのです。複雑複雑複雑と３つ並べればさらに複雑にみえます。漢字には線がイッパイ含まれますので、小さすぎると他の似た漢字と判別が難しくなっていきます。ということで、日本語は少し大きめでね。
脇道へ。「複雑」は線がいっぱいの複雑な構造をした文字ですが、必要なスペースは2文字分と小さいです。さらに知らない言葉でも、ある程度は漢字から意味を推測することができます。「Complexity」の文字は構造が単純ですが文字スペースは大きいです。その代わり、知っておかなくてはいけないキャラクタはA-Zまでと少ないです。ただし、その言葉を知らないと意味がまったくわかりません。おもしろいよね。