すべてのデザイナーが知っておくべき10のWebタイポグラフィルール

公開: 2016-06-11

エンゲージメントを生み出し、訪問者の注意を引き付ける多くの要素をWebデザインに組み込むことができます。これらには、画像、ビデオ、さらには音声も含まれます。ただし、ほとんどすべてのWebサイトで最も重要な部分は、訪問者が読んだ情報を取得するために読むコンテンツです。

その情報を読みやすく、視覚的に面白くし、そのテキストをWebサイトの全体的なデザインに追加したい場合は、タイポグラフィを理解する必要があります。これは、書かれた単語を機能的かつ美的に心地よいものにするための芸術とスキルです。

タイポグラフィを有利に使用する方法を学びたい場合は、すべてのデザイナーが覚えておくべき10のルールを確認してください。

1.初期設計プロセス後にLoremIpsumの使用を停止します

コンテンツが王様であるなら、なぜそれはウェブデザインプロセスで真剣に考慮されないのですか？偽のコンテンツをプレースホルダーとして使用することにより、Webデザイナーはコンテンツを二次的な役割に任せます。これは、設計の優先順位がすべて手に負えないことを示す大きな兆候です。さまざまなページレイアウトをモックアップする場合など、初期段階ではそれほど問題にはなりません。ただし、物事を絞り込んだら、最終的なデザインを作成するときに実際のWebコンテンツを操作することが重要です。これにより、特定のWebページで言われていることが、レイアウトや視覚要素と同じくらい重要になります。

これに加えて、実際のテキストを持つことは、デザインとレイアウトの観点から重要です。あなたはそれが実際のコンテンツで機能しないことを学ぶためだけに、ウェブページを完全にデザインした立場になりたくありません。これが、コンテンツライターのクライアントからできるだけ早く実際のテキストを取得することが非常に重要である理由です。

2.テキストサンセリフを作成します

セリフテキストは絶対に美しいです。これらは、印刷、および見出し、タイトル、小見出しなどのより大きな印刷アプリケーションに使用するのに最適なフォントです。残念ながら、画面上では、テキストのブロックなどのコンテンツの小さな表示に関しては、セリフは適切に拡大縮小されません。大きいサイズで見栄えのするセリフは、フォントが小さくなるとテキストを読みにくくします。このため、大きなテキストのセリフを保存し、読みやすさが問題になる可能性がある場合はsansに依存することをお勧めします。さらに良いことに、サンセリフフォントのすっきりとした洗練されたモダンな外観を採用し、印刷機のセリフを節約します。このようにして、見栄えの良いフォントを使用することを優先して、読みやすさの低下に対処する必要がなくなります。

3.設計プロセスの早い段階でスマートクォートやその他の記号について考える

特定の記号が正しく表示されないWebサイトにアクセスした可能性があります。時々、それらは質問または奇妙に見える文字の文字列に置き換えられます。他の時には、彼らは単にそこにいません。これは、スマートまたは「カーリー」クォートで頻繁に発生します。これは多くの場合、テキストがMS Wordまたは別のパッケージで作成され、Webページに移植された結果です。物事は単に望み通りに翻訳されません。ユーロ記号、2バイト文字、およびその他の外国のコンテンツから取得した記号にもよく見られます。

最終的な設計でこの問題を回避するために、いくつかのオプションがあります。まず、これらの記号を取り除くためにコンテンツを変更できます。これは、記号を自然言語に変更する場合に機能します。 HTMLを使用して、コピーと貼り付けだけでなく、シンボルが正しく表示されるようにすることもできます。何を決めるにしても、できる限りすべてのブラウザでWebページをテストしてください。あるブラウザのシンボルの問題を解決する可能性があるものは、別のブラウザではまったく効果がない可能性があります。

4.高度なCSSスキルは非常に重要です

優れたCSSスキルを身に付けた場合、訪問者はWebサイトのページを完全にシームレスにナビゲートできるはずです。スタイルシートを適切に作成すれば、タイポグラフィに関して優れた継続性を維持しながら、同じページの複数のバージョンを作成することもできます。もちろん、たくさんのトリックを使う必要はありません。優れたCSSは、書体やフォントサイズがページごとに変わるなど、小さいながらも一般的な問題を回避するのに役立ちます。

なぜ一貫したタイポグラフィがそのような必要性なのですか？ CSSを使用して一貫したタイポグラフィを維持すると、Webサイトがプロフェッショナルでシャープな外観になります。また、各ページをデザインするときにタイポグラフィについて考える必要がないことも意味します。代わりに、適切なスタイルシートを使用するだけです。特定のページで、効果を生み出したり、何かに注目を集めたりするために、標準を破り、タイポグラフィで何か違うことをすることにした場合は、CSSを使用することでより目立つようになります。

5.マイクロタイポグラフィとマクロタイポグラフィの両方が重要です

マイクロタイポグラフィは、読みやすさに関連するタイポグラフィの詳細に関連しています。たとえば、間隔は、スケーリングやコントラストと同様に、マイクロタイポグラフィに関連する懸念事項です。テキストのブロックが任意のデバイスまたはブラウザで読み取れるようにするために行う調整は、すべてマイクロタイポグラフィに関連しています。

マクロタイポグラフィは、タイポグラフィに関する選択が全体的なデザインに結びつく方法に関連しています。それは美学に関係しています。

優れたタイポグラフィは、マイクロタイポグラフィとマクロタイポグラフィの両方を考慮に入れています。非常に見栄えの良いカスタムフォントを使用していて、これもほとんど読むことができないWebサイトにアクセスしたことがありますか。これは、マイクロタイポグラフィではなくマクロタイポグラフィに注意が払われたときに起こることです。

6.コンテンツとデザインを知る

ご存知のように、良いウェブサイトには流れがあります。これの一部は、ページにあるコンテンツの読みやすさです。これがセリフなどによってどのように影響を受けるかについてはすでに説明しました。また、デザインの後の段階では、ダミーテキストが本物の代わりにならないことについても説明しました。まだ終わっていません。コンテンツは本当に王様です。コンテンツを含む最終的なデザインが整ったら、Webページを読む必要があります。

デザインが完成した後にコンテンツを読むと、間隔や改行の問題があるかどうかを判断できます。これらはコンテンツを混乱させたり、意図せずにコンテンツの意味を変えたりする可能性があります。いくつかのタイポグラフィのトリックを使用してこれらの問題を修正することで、最終製品があなたまたはあなたのクライアントが意図したものを正確に伝えることができます。

7.階層の重要性を理解する

階層は、Webサイトにアクセスする人々に提供するロードマップです。画像、ビデオ、カラー、および（もちろん）タイポグラフィを使用して、その階層を作成できます。

訪問者に最初に見てもらいたいものから次の物へと案内するだけです。タイポグラフィでは、サイズ、フォントの変更、および間隔を使用して、ユーザーが従う必要のある階層を定義できます。実際、変換されていないページがある場合は、タイポグラフィを試して、変更を加えると訪問者を行動を促すメッセージボタンに誘導できるかどうかを確認することをお勧めします。

8.創造的でありながら、色に注意する

フォントの色と背景色の問題が原因で読みやすさの問題が発生しないようにする最も簡単な方法は、黒と白の最もコントラストの高い色を使用することです。残念ながら、それはかなり退屈なデザインになる可能性があります。

色を使うことを恐れないでください。実際、うまくいくように見えない色の組み合わせを使用することを恐れないでください。場合によっては、1つまたは2つのシェードを明るくしたり暗くしたりするだけで十分な場合があります。次に、あなたのタイポグラフィは、読めないものから完全に識別可能で本当にクールな見た目になります。

9.溝中心のテキスト

中央揃えのテキストに関する問題は数多くあります。何よりもまず、それはあなたのウェブページを貧弱にデザインされたチラシに似せることができます。これに加えて、ほとんどの場合、古いロックアルバムの詩やライナーノーツであるかのように見える奇妙な余白やテキストが表示されます。見出しに中央揃えのテキストを使用することは問題ありませんが、通常は完全に避けるのが最善です。左に調整されたテキストに固執すると、読者はあなたのコンテンツがはるかに読みやすくなるでしょう。

10.テキストが拡大されたように見えることを検討します

親指と人差し指を使用する場合でも、ズームボタンをクリックする場合でも、人々はあなたのテキストを大きくします。時々、彼らは小さな画面を補うためにこれを行います。また、通常のサイズでテキストを読むのに苦労するため、単にそうすることもあります。

誰もが意図したとおりにテキストを表示できれば素晴らしいのですが、団塊の世代がテキストを表示するために追加の支援を必要とすることが多いため、それは不可能です。拡大すると劣化する書体を使用しないように注意してください。

役立つツールとリソース

タイポグラフィをさらに活用するのに役立つツールとリソースをいくつか紹介します。

FontFace Ninja ：このユーティリティは、インターネットで見つけたフォントを識別するのに役立ちます。これは、本当に目を引くフォントに出くわしたときに持っておくと便利なツールです。このChromeプラグインは、ウェブサイトに表示されている市販のフォントを識別、検索、購入するのに役立ちます。
TypePlate ：これはWebデザイナーに最適な完全なタイポグラフィフレームワークです。 TypePlateは、ドロップキャップ、ブロック引用符、スケーリング、色、およびその他のさまざまなタイポグラフィ関連の課題を処理できます。
モジュラースケール：これは、理想的なフォントとフォントサイズを決定できるスケールです。また、タイトルと見出しのフォントのサイズと、テキスト用に選択したフォントのバランスをとるのにも役立ちます。
TIFF ：このツールを使用すると、2つの異なるフォントを表示できます。次に、2つのフォントのそれぞれの違いが表示されます。また、あるフォントから次のフォントまで、さまざまな文字や数字を比較することもできます。
TypeWolf ：このWebサイトを使用して、インターネット上で最もクールなフォントのいくつかを修正し、タイポグラフィの最も刺激的な使用法を入手してください。これは、情報だけでなく、優れたインスピレーションの源でもあります。
フォントが重要な理由、サラ・ハインドマン：これは、フォントの重要性と、タイポグラフィが心の状態にどのように影響するかを探る優れた本です。タイポグラフィに情熱を持っている人だけでなく、正しい種類の仕事を選ぶことの重要性を納得させる必要がある人にとっても素晴らしい本です。

結論

うまくいけば、この記事がWebデザイナーに影響を与えて、タイポグラフィにもう少し考えを入れ、デザインでタイプをより効果的かつ創造的に使用する方法を見つけることもできます。