おそらくご存知のように、ほとんどのインターネットユーザーは行ごとに読むのではなく、テキストを「スキャン」して、あるポイントから別のポイントに移動します。 このため、デザイナーは特定のテキストを強調するために活版印刷のコントラストを作成します。 すべてのページコンテンツが同じ意味を持つわけではなく、一方が他方よりも重要であるため、コントラストが重要です。 コントラストを作成することで、重要なメッセージに読者の注意を向けることができ、同時にページの外観の魅力を高めることができます。 活版印刷のコントラストを実現する7つの基本的な方法を次に示します。
1.サイズ
大きなフォントサイズは重要性を示します。これは、読者の注意を引くため、この方法は通常見出しに適用されるためです。
![](https://habrastorage.org/getpro/habr/olpictures/f49/533/a65/f49533a658b66962192abf3644758ef0.gif)
一方、小さいフォントサイズを使用すると、重要度を下げることができます。
![](https://habrastorage.org/getpro/habr/olpictures/9ef/8ba/8f7/9ef8ba8f7b28dbfa37a720c72f7b47df.gif)
2.フォント
さまざまなフォントを組み合わせることで、コントラストを実現できます。 ただし、セリフとサンセリフという2つの主要な種類の「 Webセーフ 」フォントを使用する必要があります。
![](https://habrastorage.org/getpro/habr/olpictures/9fe/4e1/071/9fe4e107151640b48cc357ea2d4b7c69.gif)
通常、タイトルにセリフフォントを使用し、残りのテキストにサンセリフを使用して、タイトルとテキストブロックの間にコントラストを作成できます。
![](https://habrastorage.org/getpro/habr/olpictures/82b/18d/518/82b18d518701663d99b67a1f55bc5488.gif)
3.色
色のコントラストは、ナビゲーション、見出し、リンク、および本文テキストを区別する通常の方法です。
![](https://habrastorage.org/getpro/habr/olpictures/774/07f/ea1/77407fea1db6bbc7b22a0f2eca9bdd64.gif)
色あせた色を使用して、禁止または不可能を示すことができます。
![](https://habrastorage.org/getpro/habr/olpictures/330/ba9/5d2/330ba95d2bf62a9f8bde42232d229a5d.gif)
注意を引くために大きなことをする必要がない場合もありますが、明るい色を使用して選択範囲を作成できます。
![](https://habrastorage.org/getpro/habr/olpictures/03c/1c1/e1b/03c1c1e1b1b5e352a8a8fd71a14b2b35.gif)
テキスト内の個々の単語を区別するために色を使用することもできます。
![](https://habrastorage.org/getpro/habr/olpictures/464/519/5d9/4645195d99c68e38c74fe3970b8fe73a.gif)
小さなフォントサイズを明るい色調と組み合わせると、テキストの重要性が二重に失われます。
![](https://habrastorage.org/getpro/habr/olpictures/a8a/41f/ce8/a8a41fce8a7aabf74791c09a799f1f91.gif)
4.登録
ヘッダーとテキストで同じフォントが使用されている場合、ケースによってコントラストを強化できます。 小文字のものは大文字のものよりも注意を引くため、この方法は見出しに適しています。 文字text-transform:uppercaseの大文字小文字を変更するためのCSSプロパティ。
![](https://habrastorage.org/getpro/habr/olpictures/f74/b72/13c/f74b7213cb251cc5cf70e66c66f965a1.gif)
テキストまたは長い文で大文字のみを使用しないでください。テキストの読みやすさが低下するためです。
![](https://habrastorage.org/getpro/habr/olpictures/ee5/cde/f59/ee5cdef59f7a5d4190878775b986c45b.gif)
5.スタイル
ほとんどの編集者が犯すよくある間違いの1つは、アンダースコアを使用してテキストの一部を強調する傾向です。 これは、Webタイポグラフィの大きな間違いです。 ブラウザはデフォルトでリンクに下線を引くため、ユーザーは下線付きテキストとリンクを混同します。 したがって、オンラインで公開するときに、リンクではないテキストに下線を引かないでください。
![](https://habrastorage.org/getpro/habr/olpictures/be0/0e2/a6c/be00e2a6c777bf89dfc39042ad0d6795.gif)
代わりに、斜体を使用できます。
![](https://habrastorage.org/getpro/habr/olpictures/f4f/e54/4f4/f4fe544f42ea03ee1a3666bb13e6c890.gif)
6.碑文
特定のテキストを太字で強調することで、その重要性を強調できます。
![](https://habrastorage.org/getpro/habr/olpictures/653/dd7/70d/653dd770d49f4dc4efb075e55f817630.gif)
もう1つのよくある間違いは、テキストの行全体を太字にする傾向があることです。 これにより、フラグメントの重要性またはコントラストが失われます。
![](https://habrastorage.org/getpro/habr/olpictures/e96/07e/74f/e9607e74f38672e4a37b79325a912c57.gif)
7.スペース
空スペースは、デザインを形作る上で重要な役割を果たします。 その良い使い方は、読者に始まりはどこにあるのか、どこに休止があるのか、どこに終わりがあるのか、そして次に何をすべきかを伝えます。
スペースを作成するにはさまざまな方法があります。
- ブロッキング-パディングまたはマージンを使用したブロック要素間のパディング。
- セクショニング-<p>要素間にスペースを作成します。
- 文字間隔。
- 行間隔(行の高さ)。
- 段落を使用して、引用符とリストを操作します。
おわりに
これらすべての方法を実際に組み合わせましょう。
![](https://habrastorage.org/getpro/habr/olpictures/347/58a/846/34758a8466c6c18e15e2a81335fa7c58.gif)