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;}
全く調整なし、初期設定のままの場合
[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]英語[/su_label]
[su_column size=”1/2″ center=”no” class=””]
[su_label]日本語[/su_label]
[/su_row]
一般的なブラウザ用として、フォント＆文字サイズ＆上下余白、スマホ用にタップエリアなどを調整した場合
[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]英語 Arial[/su_label]
[su_column size=”1/2″ center=”no” class=””][su_label]日本語 游ゴシック優先[/su_label]
[/su_row]
多言語フォント Noto Sans
[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]Noto Sans 英語[/su_label]
[/su_column]
[su_column size=”1/2″ center=”no” class=””][su_label]Noto Sans 日本語[/su_label]
[/su_row]
その他のWEBフォント 英語
[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]Quicksand[/su_label]
[/su_column]
[su_column size=”1/2″ center=”no” class=””][su_label]Lato[/su_label]
[/su_column]
[/su_row]
その他のWEBフォント 日本語
[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]Typebank TBちび丸ゴシックPlusK Pro R（Typekit/Typesquare）[/su_label]
[/su_column]
[su_column size=”1/2″ center=”no” class=””][su_label]モリサワ A-OTF UD新丸ゴ Pr6N （Typekit/Typesquare）[/su_label]
[/su_column]
[/su_row]
[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]モリサワ A-OTF UD黎ミン Pr6N （Typekit/Typesquare）[/su_label]
[/su_column]
[su_column size=”1/2″ center=”no” class=””]
[/su_column]
[/su_row]
