タイポグラフィの設定
画像の次はタイポグラフィ（文字周り）のスタイルを設定しましょう。最初に、html文書全体のfont-size、font-family、line-heightを記述します。「枝豆隊」では、font-size は16px、font-familyはverdana, sans-serifに指定します。ただし、ブラウザーのフォントサイズはデフォルトで16pxですので実際にはfont-sizeは記述しません。日本語のテキストでは、一般的にフォントサイズの1.5倍がもっとも読みやすい行の高さとされていますので、line-heightプロパティの値には1.5を指定します。
まとめると、以下のようになります。
html {
font-family : verdana, sans-serif;
line-height : 1.5}
このCSSを適用すると、html要素のタイポグラフィ設定は図のような状態になります。line-heightに1.5を指定したので行の高さは24pxとなり、フォントサイズの16pxの上下に4pxの余白が付いた状態です。
font-size、font-family、line-heightを指定
この「24px」という1行の高さを「枝豆隊」における要素を配置する基準とします。
