前回はWebサイトのレイアウトについてまとめた。今回はタイポグラフィについてまとめようと思う。
1. タイポグラフィとは
タイポグラフィとは、文字の配置やサイズ、フォントを文章が美しく見えるように工夫することだ。デザインとしてのタイポグラフィの意味もあるが、ここでは割愛する。
2. タイポグラフィの基本原則
前回のレイアウトの記事で紹介したデザインの4つの原則がタイポグラフィでも適用できる。
2-1. 近接
関連のある文章は近くに、段落同士は離して配置する。
2-2. 整列
段落同士を並べたり、文頭に線を引いて揃える。
2-3. 反復
同じ階層の文字はサイズを揃える。
2-4. コントラスト
主張したい文字は色を付けたり、太字にしたりする。逆に目立たせたくない場合はサイズを小さくしたり、フォントの重さを小さくする。
3. 字間
基本原則の他に文字特有の要素として「字間」がある。Googleのマテリアルデザインでは基本は0.5字分空けるように示唆されている。
4. フォントの種類と使い分け
文字である以上フォントの存在からは逃れられない。有名なフォントの種類と使い分けについても簡単にまとめてみる。
4-1. 欧文フォントの種類
セリフ体
セリフ体は文字の端に出っ張りがあるようなフォントで、洗練された印象やクールな印象を与えるフォントだ。ページ全体でのデザインを重視する場合はこちらを使うと良いと思う。
セリフ体の例
- Garamond(厳密には旧型セリフ体)
- Bodoni
- Times New Roman
サンセリフ体
セリフ体とは逆に文字の端に出っ張りがないシンプルなフォントだ。癖がないため、ブログ記事のように文章を集中して読んでもらいたい場合はこちらのほうが良いだろう。
サンセリフ体の例
- Helvetica
- Furtiger
- Akzidenz-Grotesk(厳密にはグロテスク・サンセリフ体)
ジオメトリック・サンセリフ体
サンセリフ体の中でも曲線を意識して取り入れたフォントだ。サンセリフ体の読みやすさに加えてデザイン性も兼ね備えている。ライブラリやツールの公式サイトでよく見るような気がする。
ジオメトリック・サンセリフ体の例
- Futura
- Avenir
4-2. 日本語文フォントの種類
明朝体
明朝体は欧文におけるセリフ体に対応する。日本語になるとより洗練された印象が強くなる。和を意識したデザインのサイトに使うのも良いだろう。
明朝体の例
- 源ノ角明朝（noto serif CJK）
- ヒラギノ明朝体
- 游明朝体
ゴシック体
ゴシック体は欧文におけるサンセリフ体に対応する。読みやすさがあるので、日本語での長い文章などではゴシック体を選ぶと良いだろう。
ゴシック体の例
- 源ノ角ゴシック(noto sans CJK)
- ヒラギノ角ゴシック
- 游ゴシック
4-3. フォントの使い分け
セリフ体は「ユニーク」「洗練されている」「美しい」などのイメージがあるので、デザイン性の要求される場面で使うと良いだろう。
一方で、サンセリフ体は「シンプル」「読みやすい」などのイメージがあるので、視覚的な効果よりも文章に集中してもらいたい場合に使うとよいだろう。
5. フォントサイズ
Googleのマテリアルデザインでタイトルや本文でのフォントサイズが定義されている。基本のフォントサイズは16pxとされている。
ちなみにiOSのガイドラインでは基本は17pxのようなので、iOSのアプリ開発などでは注意すべきだろう。
6. まとめ
タイポグラフィのガイドラインが公開されていることすら知らず、今までよくサイトを作っていたなと反省した。今回改めてまとめたことで自分の中での基準を作ることが出来たと思う。
次回は配色についてまとめたい。