[誰も知らないモーショングラフィックス秘法6]タイポグラフィ

6. TYPOGRAPHY

タイポグラフィは、書体と関連付けられているデザインを指す言葉です。 Typeface(書体)デザインとKerning(カーニング)、Tracking(語)、Leading(行間)などを利用して作る人の意図とインスピレーション、想像力を見ている人に伝えるためのデザインです。

 

タイポグラフィについてあなたが知っておくべき5つのもの

1. Choose the right font 適切なフォントを選択してください。

フォントの種類が多いので、適当なフォントを選択してください。

最初にプロジェクトを開始するときは、常にO、H、Aの3つの基本的な形から検索します。この形態(丸、四角、三角)がO、H、Aに近いフォントを選んでください。、四角形とHもそうですし、三角形とAも同様です。

「Search for the basics。 More closer to basics means more useful。」

基本的なものから探してください。基本のフォントに近いほど、より便利です。すべての文字で基本的な形を見つけてくださいという意味です。より多くの文字がデフォルトの外観に近いと奇妙な形にはならないでしょう。そのようなフォントを見つけたら、より広い範囲でそのフォントを使えます。


「Make sure that all the symbols you need are included!」

大文字、小文字、数字、記号などすべてのシンボルが含まれているか確認してください。もしフォント内にこれらの記号が含まれていない場合は似たようなことを続け見つけてください。

そしてより柔軟にフォントを設定したい場合は似たようなフォントをまとめておいたFont familyを使用してください。 Bold、Medium、Condensedフォントにすべてイタリック体フォントがあったら楽です。

 

2. Basic Distribution and align 基本的な分配と整列

文字の並べ替えは、構成をどのようにするかどうかに基づいて決定されます。

左揃え、右揃え、中央揃え...この3つの整列は常に正しいです(有効です^^)!

構成の中心であるとして、それがビジュアルの中心ではない。左の画面の中心の水平線が構成の中心を意味するんですが、文字がその線より少し上にあることが見えでしょう?横線より少し上げとか、サイドに二つ投げとビジュアルの中心が完全にフィットします。完全にこのラインに合わせると、テキストが少し離れているという感じを受けるんです。実際の中心より少し上に置き、ラインの下に少し空き領域をください。

右の画面の場合は、中間線が実際の構成の中心であり、テキストはイタリック体になっています。このような場合は、テキストを少し左にチオチゲして、線の右側に空白をもっとください。

 

3. Space between letters 文字間隔

このパートでは、文字間隔についてのトリックを少し紹介したいなと思います。

ほとんどの文字は、ご覧のように文字間隔があります。しかし、間隔が同じだとして文字間のスペース面積まで同じものではありません。 2つめのグラフィックスを見れば、実際の空間は、文字一つ一つの形に依存しています。その次のグラフィックスのように、空間の面積をできる限り同じにしてください。

 「a」、「o」、「3」、「9」のような文字は、縦の長さが他の文字に比べて長く、そして大きくなります。実際のサイズは大きくなり、そうすることによって目で見ると同じサイズで見えます。

これも2Dでは問題ありませんが、3Dで造らようにすると、問題が生じる可能性があります。

次のグラフィックスを見れば、ここのOがもっと大きいので、Oのディメンションが問題を引き起こします。 Oが地面に届く、文字の下の部分にシャドウが少し濃く表現されます。このように文字を地面に接するようにしたい場合は、3Dにする前にタイプを調整してください。

 

4. Do not use 使用禁止!

ここでは、ミスの例を紹介します。

Serif体とSanserif体は、同じ構成内では使用しないようにしてください。

ここで2つの写真を見れば、同じ構成ですが、左の例を見ればSanserif体あり、下はSerif体です。フォントを混ぜて使うとほとんどが良くない結果を生み出します。右のようにSanserif体のみを使用してきれいにしてください。

ここに別の例があります。同じ構成で2つ以上のフォントファミリを使用しないようにしてください。左の例では、4つのフォントを使用しました。 1つの構成のために、4つのフォントって多くの数でしょう。 1,2,3,4...良く見えません。右では2つだけ使用してみました。最初のタイトル、その次のタイトル、本文は同じフォントです。ウェブサイトのアドレスだけに他のフォントを使用しました。

ウェブサイトのアドレスは他のフォントなんですが、似たようなフォントです。完璧な構成をしたい場合は、メインタイトルと本文テキストに書かれたフォントを同じようにしてください。

 

文字を快適な位置に置いてください。左の例では、分かち書き一つの空間しか空き容量がありません。あまりにも大きいです。赤い線と灰色に塗られたこの空間は、分かち書きかを意味しています。分かち書き1回1スペースだけ浮かせておけば、読者はより多くのテキストを見えるだろうかと思います。

 

右の例のように分かち書きを2~3回くらい空間を残して文字を配置してください。これにより、人々の目には、すぐそばに、文字がもうないだろうと認識します。右の例こそ読む人を混乱させない良い例です。

そして、並べ替えを混ぜて使わないでください。もし一つの並べ替えを選択した場合は、読む人は同じ方法で読み取ります。一つだけ選択してください。楽に読めるように、読む人を混乱しない方法を選択してください。

最後に、歪曲されたフォントを使用しないでください。これらのフォントは素晴らしいに見えるが、いくつかの問題があります。

1)そのようなフォントは、すでにユーザーの購入目的に応じて作ったフォントです。このようなグラフィック要素を持っています。

2)現在持っている形のままのみ使われるようになります。ここ「t」の場合そう見えるんですが、次の「t」でも、その特異な形状がそのまま使われます。

3)これらの歪曲されたフォントは、他の人のプロジェクトでも使われるので、ご注意ください。すでに注文の要求に応じてカスタマイズされたフォントであるため、他の作家の作品でも使われた可能性があります。

4)単にドラッグアンドドロップで作ったという印象を与えます。

5)3D適用ができません。

 

 

5. Make it readable 読みやすくしてください。

 

1)見栄えと読みやすいテキストとの間のバランスを見つける必要があります。ここ二つの例があります。面白い形を作ると、時々文字を読む苦労してしまうミスをすることがあります。ここをご覧ください。Hは長めに出ていますが、同じ長さだったらSと合されます。このようにしてもう少し文字が読みやすくなりました。 Pもそのような場合です。左の例では、Hの左、右がすべて長く出ていて、読み取りが難しいです。このようにバランスを合わせてください。

  

2)文字のサイズが厚さを決定します。

左の例では、薄いThinタイプの文字が書かれていますが、文字は小さすぎです。このような薄いタイプの文字で文字を小さく書けば、いくつかの文字は見えなくなります。右の例のように、薄いタイプの文字は、大きなサイズで書いてください。

Extra Boldタイプも同じです。文字が小さすぎる場合、読みやすさを失って読むのが難しくなります。右の例のように、より多くのスペースを確保してください。

可読性について考えさせている最後の例があります。反射効果です。 3Dで使用されるこれらの反射効果は、文字の読みやすさを剥離します。これらの効果を使用する際は注意してください。左の例のように、あまりにも強い反射効果を与えると、文字の間を区別するのが難しくなって文字フォントの独自性を失うことになります。

右の例では、反射効果がスムーズに適用されています。

みためと読みやすさの間のバランスを見つける必要があります。

 

 

 

 

 

 

 

ShakrDesigners-Stamp-var2-cleanup.png