Contact us
   Blog

Blog

Bootstrap3-フォント設計の見本-8種類のタイポグラフィで読み比べ

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;}

全く調整なし、初期設定のままの場合

英語
日本語

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

英語 Arial
日本語 游ゴシック優先

多言語フォント Noto Sans

Noto Sans 英語
Noto Sans 日本語

その他のWEBフォント 英語

Quicksand
Lato

その他のWEBフォント 日本語

Typebank TBちび丸ゴシックPlusK Pro R(Typekit/Typesquare)
モリサワ A-OTF UD新丸ゴ Pr6N (Typekit/Typesquare)
モリサワ A-OTF UD黎ミン Pr6N (Typekit/Typesquare)

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you