htmlcss CSS での文字周りの基本的な設定

2013年9月16日

文字周り(タイポグラフィ)の基本設定

  • html 文書全体の font-size, font-family, line-height を記述する。
  • ほとんどのブラウザーのフォントサイズは標準で「16px」なので html 文書全体の font-size は100% を指定
  • 日本語のテキストでは一般的にフォントサイズの1.5倍が読みやすい行の高さとされている。
html {
    font-family: font-family: "Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif;;
    font-size : 100%;
    line-height: 1.5; 
}

要素を配置するときの高さの基準

上記の CSS を適用すると line-height に1.5を指定したので行の高さは「24px」となり、フォントサイズの「16px」の上下に4pxの余白が付いた状態となる。

この「24px」という1行の高さを、ページにおいて「要素を配置するときの高さの基準」とする。

見出しの指定

見出し要素のサイズや行の高さは、「要素を配置するときの高さの基準」を元にして、一定の間隔で要素が配置されるように指定する。

要素同士の距離に規則性を持たせること(Vertical Rhythm)で読みやすく、バランスが取れたデザインになる。

この例では、h1 要素を「48px」、h2 要素を「36px」、h3 要素を「24px」、h4~h6 要素を「16px」とすると、要素の高さの関係は以下のようになる。

要素の高さ
見出し font-size line-height 要素の高さ
h1 48px 1 48px
h2 36px 1.333 48px
h3 24px 1 24px
h4~h6 16px 1.5 24px

垂直方向のマージンを統一する

マージンの相殺
垂直方向のマージン(margin-bottom, margin-top)はどちらでも指定可能だが、隣接する要素の垂直マージンは大きい値が優先されて適用される。
大きい値が優先される条件
どちらの要素も中身が空でないこと
padding と border が指定されていないこと

こうした条件を毎回考慮するのは大変なので、ブロック要素の垂直方向のマージンは margin-bottom または margin-top のどちらか1つで指定するように統一しておくようにする。

各見出し要素の margin-bottom の値は全て 24px(要素を配置するときの高さの基準)に指定し、1行分の余白を与える。

h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
/* 垂直方向のマージンを統一 */

h1 {
    font-size : 48px; 
    line-height : 1;    
    /* 要素の高さ:48px(要素を配置するときの高さの基準の2倍)*/
}

h2 {
    font-size : 36px;
    line-height : 1.3333;   
    /* 要素の高さ:48px(要素を配置するときの高さの基準の2倍) */
}
h3 {
    font-size : 24px;
    line-height : 1;    
    /* 要素の高さ:24px(要素を配置するときの高さの基準) */
}
hgroup h2,h4,h5,h6 {
    font-size : 16px; 
    line-height : 1.5;   
    /* 要素の高さ:24px(要素を配置するときの高さの基準) */
}