web-dev-qa-db-ja.com

サイトに適切なフォントとサイズを選択するにはどうすればよいですか？

私はかつて、いくつかのさまざまなフォントごとに特定のパイカ範囲を推奨する教科書を見ました。利用可能なオンラインガイドはありますか？私のオプションは何ですか？初心者として何を知っておくべきですか？

website-designtypographyfonts
4
goodguys_activate

異なるオペレーティングシステム（Windows、Mac、Linux）には、OSの一部として提供される異なるデフォルトフォントがあることに留意する必要があります。つまり、Windowsで使用できるがMacやLinuxでは使用できないフォントを選択すると、ユーザーには別のフォントが表示されます。そのフォントは、OSが選択できる最も近いものになります。プラットフォーム全体でサイトの外観を統一したい場合は、3つすべてに共通のフォントを選択する必要があります。または、CSSで複数のフォントを使用したい優先順に宣言することもできます。例：

/* Sample CSS rule */
p 
{
    font-family: arial, helvetica, sans-serif;
}

この例では、<p>タグはすべて、使用可能な場合はarialフォントを使用します。そうでない場合、ブラウザはhelveticaフォントを使用しようとします。そうでない場合は、デフォルトのsans-serifフォントを使用します。常に最後のフォントが一般的なシステムデフォルトとして宣言されるようにします。 安全に使用できる8つのフォントスタックについてのこの記事 を参照してください。

別のオプションは、新しい @font-face CSSルールを使用することです。これにより、標準ではないフォントを使用できます。 Webサイトでフォントを提供する必要がありますが、ユーザーのブラウザが@ font-faceをサポートしている場合は、ダウンロードして使用します。これのサポートはブラウザー間で統一されておらず、一部の古いブラウザーはまだ認識していません。しかし、少し手間をかけるだけで、最新のWebサイトで使用できます。

フォントサイズは、使用するフォントによって異なります。一般的なルールは、多くのユーザーが読みにくいため、小さなフォントを使用しないことです（基本的に、小さなフォントはアクセシビリティが悪い）。また、多くのユーザーは、ブラウザーに表示されるフォントサイズを調整して、読みやすくします。ピクセル（px）を使用してフォントサイズを指定すると、サイトが使いにくくなります。一般的なルールは、経験的な単位（em）を使用することです。これは、スケーラブルな単位であり、ユーザーがブラウザの表示を調整すると拡大および縮小します。

4
John Conde

私は正しい答えについて本当に確信がありません-しかし、私はあなたがウェブサイト上のパイカで測定できないことを学びました（たとえCSSがそれを許可するふりをしても）。また、ユーザーが22インチモニター（解像度1920x1080）を使用している場合、同じ解像度の24インチモニターに比べてフォントサイズが大幅に小さくなるため、何も測定できないのではないかと思います。 -Webページからモニターのサイズを決定することはできません。

さらに、フォントにも大きく依存します。Verdanaはeよりも大きく表示されます。 g。タイムズニューロマン。

そうは言っても、私も良いガイドラインを見たいです！

1
Chris Lercher