フォントの選び方、使い方、複数のフォントを選ぶ場合

 

フォントを効果的に使うには、意識的である必要がある。

フォントに対するビジュアル・スキルを高める方法は、自分が見ているフォントをカテゴライズし、そのカテゴリーに当てはまるフォントのサンプルを集めることが有効である。

フォントの選び方の基本

「読みやすさ」「情報の伝わりやすさ」を考慮し、選ぶ。

目的から選ぶ

フォントを使うのが、本文であるか、見出しなのかなど文章の役割や内容を考慮して選ぶ。

主に、スマートフォンでの閲覧を想定しているのかなど、閲覧環境を考慮し選ぶ。

文章の性格からフォントを選ぶ

タイトルや見出しなどの短文

少しインパクトのあるデザインフォントの方が、視覚的にアクセントになる場合がある。

記事本文など長い文章

読みやすさを最優先する。
細い線で構成された、潰れにくく、長時間閲覧しても疲れにくい、シンプルなフォントが適している。

太い線で構成されたフォントは、文字が潰れるなど可読性の点から避けた方がよい。
また、デザイン性の高いフォントも、長い文章では疲れやすいです。

文章の内容に合わせて、フォントを選ぶ

内容に合わせてフォントを選ぶことで、内容のイメージを伝えることができる。

クラシカルで高級感を出したい時

明朝系やセリフ系のフォントが適している。

親しみやすさや明るさ、先進性を出したい時

ゴシック系やサンセリフ系のフォントが適している。

フォントファミリー

文字を構成する線の太さを変えた同じデザインのフォントをフォントファミリーと呼ぶ。

デザインが統一されているので、フォントファミリーからフォントを選び使用すると、デザイン的に統一感を持ちながら変化のあるデザインを演出できる。

太い線で構成されたフォント

重厚感や力強い印象を与える。

細い線で構成されたフォント

デリケートでスタイリッシュな印象を与える。

フォントの持つイメージ

ゴシック、サンセリフ

カジュアルで親しみやすい。

明朝体、セリフ

知的でフォーマル

文字の太さによって変わるイメージ

太い

カジュアルで親しみやすい。
安定的で力強い。

細い

洗練された繊細なイメージ。

斜体

セリフ系のフォントの斜体は、とくにデザインが変わる。

My Font.com

自分が使う見出しを入力すると、それが数百種のフォントでどう見えるかを確かめることができる。

複数のフォントを選ぶ場合

複数のフォントを選ぶ場合、それらの関係は、協調、衝突、コントラストのいずれかになる。

協調関係

バリエーションの多くない1種類の書体ファミリーだけを使った場合に生じる。

効果

ページの調和を保ちやすく、フォーマルな表現になるか、時に、ただ退屈な表現になる。

衝突関係

同一でもなく、全く異なるでもない、スタイルやサイズや太さなどが似ている書体を組み合わせた場合に生じる。

効果

類似性は、混乱をもたらす。

視覚的に引きつける力が同じ（協調）でもなく、違っている（コントラスト）わけでもないから、衝突する。

衝突は、避けるべきである。

コントラスト関係

互いにはっきり異なる書体を組み合わせた場合に生じる。

効果

上手に多くのコントラストが組み込まれ、それが強調されると、視覚的に引きつける魅力的なデザインとなる。

コントラスト関係を作る6種類の方法

コントラストを付ける方法は、6種類の方法がある。

サイズ、太さ、構造、フォーム、方向、色。

これらを複数、組み合わせて、コントラスト効果を高める。

 

書体の組み合わせの何が悪いかを探す場合、書体同士の「違うところ」ではなく、「似ているところ」に注目する。

文字にコントラストをつける方法

サイズにより、コントラストをつける。

サイズにより、コントラストを付ける場合は、衝突を避けるため、思い切って異なるサイズを使用する。

太さで、コントラストをつける。

太さでコントラストを付ける場合も、思い切って太さを変える。

ウエイトのコントラストは、ページを魅力的に見せるだけでなく、情報を組織化もする。

構造でコントラストをつける。

２種類以上のフォントを用いる場合は、２つ以上の異なる書体のカテゴリーから選ぶか、フォントの構造上の違いに注目し、異なる構造のフォントを用いる。
例えば、サンセリフ体とセリフ体のように。

フォームでコントラストをつける。

文字のフォームとは、文字の外形のこと。

フォームでコントラストを付ける簡単な方法は、大文字対小文字について考えることである。

もう一つわかりやすいフォームのコントラストは、ローマン体とイタリック体の対比である。

方向でコントラストをつける。

活字を傾けることは、しっかりとその意図を説明できる場合以外は、やめておいた方がよい。

画像やイラスト、文章が作り出す方向を生かして、方向にコントラストを付ける場合は良い。

色でコントラストをつける。

赤やオレンジなどの暖色系の色は前に出てきて、注意を引きつける。
ごくわずかな暖色系の色でコントラストを付けることができます。

反対に、青や緑などの寒色系の色は、私たちの目から遠ざかります。

寒色は広い範囲で用いても構いません。

 

実際に作品でコントラストを付ける際は、これらを組み合わせてコントラストをつける。

 

参考書籍

ノンデザイナーズ・デザインブック

理論でわかるデザイン入門

Webデザインとコーディングのきほんのきほん