タイポグラフィは、Webデザインでメッセージを表現するための強力なツールです。 これにより、テキストと視覚的なコンポーネントを組み合わせて、訪問者にリーチするのに役立ちます。 タイポグラフィを適切に使用することで、次の傑作を作成する際にデザイナーが犯す典型的な間違いを避けることができます。 私たちは何を間違っているのか、そして将来どのように間違いを避けるのかを理解しようとします。
始めに、用語を扱いましょう。 確かにほとんどの用語はおなじみですが、定義に精通していても不必要ではありません。 おそらく、これはすでに所有している情報を補完するでしょう。
タイポグラフィ -読者によるセットの認識の研究に基づいた、テキストのデザインに関する一連の法律、規則、および標準。 タイポグラフィの知識と理解は、テキストを組成物を構築するためのツールに変え、生き生きとさせ、コンテンツの助けだけでなくグラフィカルにアイデアを伝えるキャラクターと能力を与えます。
ヘッドセットは、スタイルのスタイル上の統一性を持つフォントまたは複数のフォントです。 文字セットで構成されます。 多くの場合、この概念は「フォント」の概念と混同されますが、フォントは特定のマーキングですが、ヘッドセットはフォントの一般的な「ファミリ」を定義します。
ヘッドセットは、2つの主なカテゴリに分類できます。
- Antiqua-セリフフォント。
- グロテスクは 、それぞれ、サンセリフ体のフォントです。
プロジェクトでは、ここにないオプションを使用できます。 あなたは状況、あなたがしているプロジェクト、そして彼にとってより関連性の高いものを見る必要があります。
セリフフォントはそのままで、行を保持するため、読みやすさが向上します。 多くの場合、セリフフォントは、提供される情報のプロ意識と権威を生み出し、敬意を表し、言葉の最良の意味で安定性と保守主義を強調します。 Sans serifフォントは、合理性、スタイル、若さと現代性を強調する傾向があります。 これらは、文字間にスペースを作成するのに役立つだけでなく、文字を別のものから分離します。
サイズは、下部と上部の拡張要素を含む文字の高さです。 印刷ポイントで測定（ptと表示）。 たとえば、14 ptで入力したテキストの高さは14 ptになります。
行送り -行間隔。 隣接するラインのベースライン間の距離。
カーニングは文字間の距離です。 カーニングの主な本質は、読みやすさを高めるために、特定の文字の異なるペアの間で異なる間隔を選択することです。
素晴らしいシミュレーターゲーム- カーンタイプがあります。 すべての文字をそれぞれの場所に置くだけです。 これは実際にはそれほど単純ではありません。 プロセスは非常に複雑で、優れた目が必要です。 このエクスペリエンスは、ロゴを作成するときに特に役立ちます。
私たちは何を間違っていますか？
多数のフォントを使用します
3つ以下のスタイルを使用することをお勧めします。 1つのヘッドセットとしてのフォントでも、異なるフォントでもかまいません。 たとえば、Robotoヘッドセットには、かなり多数の異なるスタイルが含まれています。 そのうち3つは簡単に選択でき、私たちの意見では、このサイトに適しています。 軽く、規則正しく、太字になるとしましょう。 見出しの場合、[太字]ボタンの場合は[標準]のメインテキストには[太字]または[淡色]フォントを使用できます。 したがって、1つのヘッドセットを使用して、サイトに適切なタイポグラフィを提供しました。 当然、それはすべてサイトのテーマと、デザインに組み込む予定のアイデアに依存します。 私の例は普遍的であり、ユニークなものや異常なもののふりをしていません。
フォントのサイズがわからない
Web上のテキストサイズは12ピクセル未満にしないでください。 最適な選択は、本文の14〜18ピクセル以内です。 大きすぎず、同時に読み取り可能です。 さらに、すでに16ピクセルを選択している場合、サイトのすべてのページで16ピクセルのままで、ブロック間でプラスまたはマイナス1ピクセルをスキップしないでください。 これはリーディングに適用され、どこでも同じでなければなりません。
フォントサイズは、16.28 pxなど、小数を含まない整数で指定する必要があります。 そしてもちろん、Photoshopではptをpxに変換する必要があります。 これを行うには、メニューで編集-設定-基本を選択します。 次-ユニットと定規。 ピクセルのドロップダウンメニューの「テキスト」、「ルーラー」ポイントを変更します。 OKをクリックします。
行の長さ-重要ですか？
行の長さは600ピクセルを超えてはなりません。 これは、あるラインから別のラインに目を快適に移動させるのに最適なサイズです。 非常に広いコンテンツ部分を読むことは困難です-しばしば、前の長い行を読んだ後に行こうとしていた行を失うだけです。 それでもテキストブロックを幅1000ピクセル以上に拡大する必要がある場合は、テキストを2つ以上の列に分割してみてください。 もう1つのオプションは、行間隔を通常よりわずかに大きくして、行を視覚的に分離することです。 テキストを段落で区切ることを忘れないでください。これは読みやすくするのにも役立ちます。
先頭がフォントサイズに対応
ほとんどの場合、行間隔はフォントサイズより大きくする必要があります。 見出しを除く。 テキストと空気のバランスをとるには、行間隔を小文字の高さの約1.5倍にします。 または、フォントサイズの150％に等しい先頭を設定します。 たとえば、テキストサイズは14ピクセルで、インターレースは21ピクセルです。 14/2 = 7 + 14 = 21。
好きなフォントを選択してください
もちろん、顧客が独自のフォントを提供していない限り、ウェブサイトのデザイン用のフォントはfonts.google.comとwebfont.ruで最もよく使用されることを誰もが既に知っていると思います。
O Lorem、lorem ...
当然、サイトを開発する際、そこにあるコンテンツはほとんど使用されません-多くの場合、このコンテンツはまだ存在していません。 そのため、デザイナー（およびレイアウトデザイナーも）は、「魚」-コンテンツブロックに収まる任意のテキストを使用します。 これは特にデザイナーにとって非常に便利です。悪名高い「Lorem Ipsum ...」をPhotoshopから直接挿入できるためです（メニュー：テキスト-Insert Lorem Ipsum）。 しかし、ロシア語のサイトでは、これはお勧めできません。ラテン語では、キリル文字で入力されたテキストがどのように見えるかはわかりません。 したがって、あなたを助けるためのテキストジェネレータ 。
参照資料
デザインが正しいかどうかを確認するのは簡単です。視聴者がマウスに触れることなく、リンクのある場所とない場所を推測できれば、良いサイトができます。 したがって、サイト上のすべてのリンクがどのように見えるかを事前に考える必要があります。 すべてのクリック可能な要素が同じ色（たとえば赤）で、他の要素（黒）はクリックできないと仮定します。 その後、誰も混乱することはありません。
多くの場合、タイトルが赤で強調表示されます（何らかの方法で強調表示する必要があります）。次に、青色のUTPの非常に重要なフレーズがいくつかあり、これらはすべて黒のテキストと混同されます。 テキストの最後にあるボタンも赤です。 ボタンをクリックする必要があることは明らかですが、青色でペイントされたテキストもクリック可能であることがわかりました（追加情報を開きました）。 しかし、誰が知っていた、誰が知っていた...
アライメント
非常に頻繁に誤って整列するテキストブロックがあります-これは、正当化、中央の正当化、および正しい正当化です。 これらのすべての場合において、テキストを読むことは不便であり、視覚的には魅力的ではありません。 配置は常に左揃えにする必要があります。 たとえあなたが本当に右にそれを作りたいとしても（あなたにとっては、構成的にはまさにそのように思えるからです）-これは間違っています。例外は、1つまたは2つの短い文です。
コントラスト
コントラストは、デザインにおける表現の主要な手段の1つです。 大きなフォームや空のスペースを恐れる必要はありません！ 意図的に大きなタイポグラフィは、追加のグラフィックデザインツールを必要としない独立した要素になりつつあります。 すべてのオブジェクトの色、形、サイズのコントラストの良い例 。
スタイル
あなたは常にあなたが訪問者に伝えようとしている情報について考えるべきです。 フォントを選択するときは、ハッピーメッセージには明るくて風通しの良い柔らかいフォントを添付する必要がありますが、一部の暗いトピック（たとえば、ハロウィーン）のメッセージは、より堅固なタイプのフォントに付随させる方がよいことに注意してください。 タイポグラフィを使用して、Webデザイナーはページの雰囲気とスタイルを強調し、感情的な反応のための肥沃な土台を作成します。
良いタイポグラフィは、あなたのサイトに入った人が気づかないが感じている品質です。