Bootstrapは、便利で使いやすいフレームワークですが、標準のままでは、日本語は読みづらいですよね。そこで、制作する際には、日本語でキレイに表示されるように調整いたしますが、フォントが代わるとやはり、印象も変わってきます。
よく利用されるWEBフォントをBootstrapに導入すると、どんな風になるのでしょうか?8種類のタイポグラフィで読み比べて見ましょう!
Bootstrapにおける、文字レイアウトの初期設定
Bootstrap3におけるデフォルトのフォントサイズは、14px。 行間(line-height)は、1.428です。
デフォルトの見出しには、font-weight: 500; line-height: 1.1; color: inherit;がセットされています。
フォントサイズは以下の通り。
- h1,.h1 {font-size: 36px;}
- h2,.h2 { font-size: 30px;}
- h3,.h3 { font-size: 24px;}
- h4,.h4 {font-size: 18px;}
- h5,.h5 {font-size: 14px;}
- h6,.h6 {font-size: 12px;}