タイポグラフィー上達への道 #01書体は【オールド】【モダン】で使い分ける
こんにちは、syouheiです。
普段はグラフィックデザインを中心に活動するデザイナーです。
デザイナーとして活動している中で、フォントの選び方についてあまり考えずに選んでいたり、おすすめされている文字の配置や組み合わせについての知識が少ないと感じることが多くなりました。そこで、タイポグラフィについてしっかり学び直そうと思い、アウトプットを残していくことにしました。
01.タイポグラフィとは
・ タイポグラフィについて
そもそも、タイポグラフィとは何なのか。
タイポグラフィで検索をかけると、作字された画像などに目が行きますが
ですが、基本的には「文字や文章を読みやすく、または美しく見せるための技術」のことを指し、タイポグラフィを活用することで、キャッチコピーやロゴが印象付けられたり、情報伝達のイメージが伝わりやすくなったりします。
・ タイポグラフィの目的・利点
タイポグラフィの目的は文字の並べ方やデザインによって、「視覚情報の伝達に関する精度を向上させること」です。
最適なタイポグラフィは文字情報の可読性を上げ、ユーザにとって読みやすく、伝えたい印象を伝えやすくする役割を持っています
デザインを作成する上で、文字は必要不可欠なもの。
デザインの品質向上においてタイポグラフィが占める割合は大きく、
ますます上達したい気持ちが増えました！
・ タイポグラフィを構成する３要素
書体
レイアウト
文字組み
「タイポグラフィ＝文字」ではなく、3つの構成から成り立っており、
今回はその中でも「書体」にフォーカスを当てて書いていきます
02.タイポグラフィの3要素「書体」で、迷わない選定でフォントを使いこなす
・ 書体を見る「目」を鍛える
フォントを見ただけで全て言い当てる。なんてことが出来たらかっこいいですが、たくさんの時間と訓練が必要なので、まずは書体が持つ大きな特徴を知って書体選びの基準を作っていきましょう。
書体にはそれぞれ大きな特徴があり、代表的なもので「ウロコ」や「とめ」「はらい」や線の幅で大きく見分けることができ、さらに同じ書体でもオールド・モダンでさらに分類ができます。
その他にも「ふところと重心の違い」からもフォントの印象を操作することが出来ます。
フォントを見分けるコツとして、ひらがなの「な」「の」で見分ける方法があります。
※フォントデータについて
フォント名の末尾につくStdやPro、Pr6は収録されている文字数を表しています。
std : 9,354文字 Pro : 15,444字 Pr5 : 20,317字 Pr6 : 23,058字
・ 書体を使い分ける
フォントの選択は、書体の由来や歴史、フォントの生まれた国などを学ぶことで迷いなく選ぶ事ができると聞きますが、ここではできるだけ簡単な方法でフォントを選定するやり方を書いていきます。
※ここでは和文書体について記載しています
書体の大まかな分類として、「ゴシック・明朝・筆文字系・ポップ体」に分けます。
※筆文字系は、一部使用用途が限定されているものがあるので注意が必要
筆文字やポップ体はデザインの世界観に合ったフォントを選べばOKで、多用するものでもないのでそこまで難しく考えなくて大丈夫です。
難しいのは、よく使用するゴシック体や明朝体の選定です。
この2つの書体は、「オールド・モダン」に分けて考えると、一気にフォントを選びやすくなります。
・ オールド・モダンの違いと特徴
ゴシック体と明朝体の定番フォントの使い方が上手くなることが、タイポグラフィの上達の一歩であると共に、デザインのクオリティを高める大切な一歩でもあります。
一口に、明朝体といっても特徴やクセなどは様々で、タイトルや見出しに向いているもの、本文やキャプションに向いてるもの、両方向いてるものと
たくさんの種類の中から選ぶのは難しく、自分はいつも悩みながらフォントを選んでいます。
そんな時の一つの物差しになるのが、オールド・モダンで分けることです。
オールド・モダンの違いをまとめてみました
実際にデザインツールで組んで、ズームして見るとわかりやすいのですが、
オールド・モダンで「文字の端の違いや太さの違い」、「文章として組んだ時のカタカナや漢字・ひらがなのサイズの違い」・「行のライン違い」などが
オールド・モダンを見分けるポイントして発見する事ができました。
※あくまで目安になりますで該当しないフォントもあります。
また、オールド・モダンの特徴の違いは
オールド「読ませる力・情緒的」/ モダン「情報整理・可読性が高い」ことが特徴的になり、与える印象も２つで異なってきます。
・ 「ふところ・重心」の観点から のフォント選び
オールド・モダンの特徴でもあったふところの広さに合わせて、重心の観点からもフォントを選ぶ事ができます。こちらはどちらかというと文字が与える印象をメインにしたフォント選定になります。
株式会社モリサワによると、それぞれの定義は以下の通りです。
スタイルの違いとして表現される書体の表情の違いを生み出している大きな要素が、ふところや重心です。「ふところ」は画と画が構成している内側の空間のことで、ふところが広い書体はおおらかな印象、狭い書体はひきしまった印象を与えます。
「重心」は文字のバランスの中心がどのあたりであるかをいい、一般には高めであれば緊張感や品格を生み、低めなら安定感や親しみやすさを感じさせるといえるでしょう。
・ オールド・モダンを分類分けして、自分だけのフォントマップを作る
オールド・モダンの特徴と見分け方がわかったら、次に自分だけのフォントマップを作成することで、迷わず素早くフォントを選びやすくなります。
自分もフォントマップを作成してみました。
各特徴を踏まえて、タイトルや見出し・本文などでオールド/モダンを使い分けるとさらにフォントの選定がしやすくなると思います。
また、デザインの方向性・デザインコンセプトに合わせて
フォントマップとふところの広さ・文字の重心をみながら、
の掛け合わせでフォントを選ぶと、クオリティの高いタイポグラフィ作りをする事ができます。
下記にフォントマップサンプルを添付しておりますので、
よかったらお使いください。
03.まとめ
タイポグラフィとは「文字・文章を読みやすく、美しく見せる技術」
タイポグラフィの目的は文字の並べ方やデザインによって、「視覚情報の伝達に関する精度を向上させること」
タイポグラフィは「書体・レイアウト・文字組み」の3つで成り立つ
書体は「見る目・書体の使い分け」が大切
文字の「なの」でフォントの特徴を捉える
ゴシック・明朝は「オールド/モダン」で使い分ける
オールド「読ませる力・情緒的」/ モダン「情報整理・可読性が高い」が特徴的（ふところや重心も活用する）
フォントマップとふところの広さ・文字の重心をみながら 「与えたい印象」×「文字の役割」の掛け合わせでフォントを選ぶ
次は、タイポグラフィを構成する3つの要素「レイアウト」をまとめていこうと思います。
最後まで読んでいただきありがとうございました！
※この記事は、下記の書籍やタイポグラフィについて調べたものをまとめております。
今回紹介した内容の他にも、合成フォントや合成フォントの組み方
フォントマップにはない書籍のおすすめフォントや実用的なフォントマップも掲載してあります。ぜひタイポグラフィをもっと学びたい方はぜひ読んでみてください！