Web デザインにおけるフォントの処理は、どれだけ強調してもしすぎることはありません。Web ページは情報を伝達するために使用され、情報を伝達する最も古典的かつ直接的な方法はテキストです。そのため、フォントの基本的な知識を理解することがデザインにとって非常に重要です。の。
中国語と英語の最大の違いは、中国語には角文字があり、英語にはピンイン文字があることです。これはフォント処理に大きな影響を与えます。下の図を見ると、英語フォントの変化が中国語フォントでは弱まっていることがわかります。
中国人の読者として、私は読書の単位として正方形の形を習慣的に受け入れています。実際、これは読書中、実際にテキストの行全体の形を追うことになるため、目が疲れやすくなります。この例を見てください。
今、私はあなたに話して理解してもらおうとしました
今、私はあなたに話して理解してもらおうと努めました
どの行が読みやすいでしょうか？
最初の行は中国語の状況とやや似ていますが、違いは、各漢字が絵画のようであり、その変化が英語の 26 文字よりもはるかに豊かであることです。考慮する必要がある問題がいくつかあります。私はデザイナーではありません。私の発言が間違っている場合は、以下にメッセージを残して議論してください。これらの内容は、私がタイポグラフィーを教える際の一般原則として提示されます。私は学生たちにも、「ルールの目的はルールを破ることである。」と伝えていますが、デザインの原則自体が原則を破ることであり、それはいわゆる創造性の現れでもあります。問題は、まず原則を知り、それに準拠して練習する必要があるということです。原則を理解した後でのみ、原則を破り、創造性を発揮できるのです。原則を破ることは、原則に欠陥がある、または間違っているという意味ではありません。しかし、あなたがこれらの原則を巧みに利用しただけで、いくつかの部分を壊し、同時に壊した部分をある程度補うことができました。これは非常に哲学的であるように思えます。
私は個人的に、より重要な原則は次のとおりだと考えています (英語にも当てはまります)。
フォントを選択するときは、テキストの目的を考慮する必要があります。それはタイトルですか、段落ですか。
一般に、サンセリフ フォントは、Arial などのタイトルとしての使用に適しており、セリフ フォントは、Time New Roman などの段落テキストとしての使用に適しています。 Web デザインには、verdana、tahoma、georgia など、強くお勧めするフォントがいくつかあります。実際、Verdana のようなフォントは、世界のトップ フォント デザイナーによってほぼ 2 年間にわたって設計されており、このフォントは IE 4 をインストールするとユーザーに無料で提供されます。上記のバージョンでは、コンピュータにこのフォントが必要なので、ユーザーがこのフォントを持っているかどうかを心配する必要はありません。これは、フォントが画面に表示されるときに直面する可能性のある問題を考慮して設計されており、ほぼ完璧な答えを提供します。唯一の問題は、誰もがそれを使用するため、ほぼ完璧に使用すると個性がなくなることです。
フォントサイズ？
フォーラムでは、ピクセルとポイントのどちらが優れているかについて多くの議論が行われています。 ここで指摘したいのは、CSS にはさまざまなフォント サイズの単位があり、大きく 3 つのカテゴリがあるということです。
絶対サイズ: mm、cm、in、pt、pc
相対サイズ: em、ex
デバイスとの相対値: ピクセル
em と ex についてもう少し説明します。たとえば、12 pt フォントの場合、Em は 12 pt に相当します。
p {
フォントサイズ: 10pt;
テキストインデント: 1em
}
もしかしたら、同じ効果を得るために text-indent: 10pt を使用できると言われるかも知れませんが、それはユーザーがブラウザのフォント サイズを、あなたが設計した比率である 14pt に設定した方が良いと考える場合に限ります。これは失われるため、相対的なサイズは Web ページのスケーラビリティ設計に非常に役立ちます。
ex は em に似ていますが、同じではありません。上の図に戻ると、ex はフォントの x 高さに基づいてフォントのサイズを定義します。
アライメント？
特別なデザイン目的がない限り、左揃えを使用することをお勧めします。特に、左揃えの場合の右側の位置のずれは、読みやすいようにするためのものです。変化を利用して目にラインを変える時期が来たことを知らせます。
行間？
行間はフォントのサイズによって異なります。Web ページに中国語フォントの行間設定がないと、読みやすくするためにフォント サイズが小さくなり、大きな段落を読むことが困難になります。したがって、行の高さを適切に設定することが非常に必要です。一般に、Web デザインの行の高さはフォント サイズの 1.5 倍から 2 倍にする必要があります。 Word やその他のテキスト編集ソフトウェアでは、通常、フォントの 120% がデフォルトの行間隔として設定されます。 CSS の行の高さの設定は均等に分割され、各行の上部と下部に追加されます。つまり、行の高さが 20 ピクセルに設定されている場合、テキストの各行の上部と下部には 10 ピクセルの間隔が空きます。底。
単語間と文字間は？
非常に特殊な目的の場合、この 2 つは中国語でも同じである必要があります。この設定自体は、フォント設計の特定の欠陥を解決し、テキストの読みやすさを向上させることを目的としています。