フォントサイズなどには【rem（root em）】という単位を使うと非常に便利です。一般的にはpx（絶対指定）であったり％、またはem（相対指定）などの単位が多く用いられていますが、これらの単位は親要素のフォントサイズを継承したり、環境に依存してしまうケースがあります。   remの場合、html要素が基準となるのでそういった問題が無く、相対指定をしながら絶対指定のように固定値で指定することができるのでとても便利です。  

フォントサイズにremを使用する

実際に使用する際には、次のように1remを10px相当のフォントサイズに指定しておきます。  

html {
  /* ルートのフォントサイズを10pxと同サイズに設定 */
  font-size: 62.5% ; 
}
body {
  /* ベースのフォントサイズを16px相当に設定 */
  font-size: 1.6rem ; 
}

  remはCSS3で追加された機能になるので未対応ブラウザへの対応としてpxでの指定も重ねて記述しておきます。（remの前にpxで記述します）  

h1 {
    font-size: 18px ;  font-size: 1.8rem ;
}
p {
    font-size: 14px ;  font-size: 1.4rem ;
}

 

chromeでフォント表示のバグ対策

remを使った場合、chromeでフォントサイズの表示がおかしくなるバグがあるようです。その時は次のスクリプトを記述することで対応します。  

<script>
  document.body.style.webkitTransform = "scale(1)";
</script>