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]
[su_column size=”1/2″ center=”no” class=””]

[su_label]日本語[/su_label]
[/su_column]
[/su_row]

一般的なブラウザ用として、フォント＆文字サイズ＆上下余白、スマホ用にタップエリアなどを調整した場合

[su_row class=””]
[su_column size=”1/2″ center=”no” class=””][su_label]英語　Arial[/su_label]
[/su_column]
[su_column size=”1/2″ center=”no” class=””][su_label]日本語　游ゴシック優先[/su_label]
[/su_column]
[/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_column]
[/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]