[デザイン] タイポグラフィ、文字の種類、フォントの選び方、文字組み、レイアウト
元記事
タイポグラフィとは
文字を読みやすく、美しく並べること、体裁を整えること
フォント、サイズ、配置方法によって文章の読みやすさが大きく異なる
制作物にあったイメージのフォントを選び、適切な太さと大きさにする
行の間隔、文字と文字の間隔にも注意が必要
文字下のラインや、行の始まりなどの位置を揃えると、美しく整って見える
文字をデザインとして扱うこと
文字が主体のアーティスティックな表現のこと
文字というよりも、イラスト
文字の種類
和文フォント：明朝体、ゴシック体
明朝体は、縦線に比べて横線が細い、横線の右端や、曲がり角の右肩にうろこがある
ゴシック体は、線の太さが一定、うろこがほとんどない
PCやスマートフォンなどのデバイス上で、一番よく使われている
他にも、楷書体や、ポップ体などがある
欧文フォント：セリフ、サンセリフ
セリフは、文字のストロークの端にある小さなうろこのことを意味する
サンセリフは、セリフがない
線の太さが一定で、うろこがない
他にも、スクリプト体などがある
フォントの選び方
視認性、可読性、判読性、シンプルな書体を選ぶ
可読性を上げたい場合は、細い文字
視認性を上げたい場合は、太い文字、小さな文字でも読みやすい
判読性を上げたい場合は、英語のオーと数字のゼロなどが判別可能な「ものを選択する、明朝系やUDフォント
webは視認性の高いゴシック大河使用される
フォントのイメージ
高級感：明朝体
モダン：ゴシック体
クラシカル：セリフ体
シンプル：サンセリフ体
文字組みのテクニック
文字組：行間や字間、サイズなどを調整して、文章の意図をわかりやすく、美しく見せる作業のこと
仮想ボディ：和文書体が収められている正方形のこと
漢字、ひらがな、カタカナの全てが仮想ボディに収まるようにデザインされている
字面：仮想ボディの中に入っている枠のこと
同じサイズの文字は、仮想ボディの大きさは変わらないが、字面は文字によってそのサイズが異なる
文字と文字の間隔を調整する
文字と文字の間隔 (アキ) が等しくなるように調整することを、カーニングという
フォントをそのまま使用すると、 (ベタ組み) 文字の持つ余白サイズによっては、文字と文字の間隔がバラバラになってしまう
文字と文字の間隔を調整し、余白が同じくらいになるよう調整することで、もじが美しく見える
タイトルや見出しなどで文字を大きく使う場合は、特に余白が目立つので、調整しておく方が良い
カーニング：1文字ずつ、文字の間隔を調整すること
トラッキング：指定した範囲全体の間隔を調整すること
ひらがな、カタカナは、漢字に比べて、文字に余白が多く含まれる
ひらがな、カタカナについては、漢字同士の間隔よりも詰めた方が、美しく見える
記号もつめる
行間を調整する
フォントサイズの70%程度 (0.7文字分) ほどの行間を設定しておくと良い
最適な行間は、1行に入る文字数や、全体の行数、文字サイズ、フォントの種類によって異なってくる
ベースラインを整える
欧文フォントにはベースラインがある
文字が並んだ際にベースとなるライン
文字によってはベースラインからズレて見えるものがある
文字の位置を調整して、ベースラインが揃うようにする
和文、欧文が入り混じる文章の場合は、注意が必要
文字組みのレイアウト
文章を読むときの視線の流れは、左上から右下
1行の文字数は、25〜35文字
文字揃えは、基本的に左揃え
文章にメリハリを持たせるには、色を変える、太字を使う、サイズを変える、書体を変える、下線をつけるなどがある
助詞、単位のサイズは小さめにする
この記事が気に入ったらサポートをしてみませんか？