Webサイトで使用するのに最適なフォントサイズの数はいくつですか?


11

Webサイトで使用できるフォントサイズの数を教えてください。

誰かが3つ以上の異なるフォントサイズ(たとえば、見出しに16px、テキストに11px、小さい見出しに13px)を使用しない方がよいと私に言った。

Webページごとに4つ以上のフォントサイズ(例:4)を使用することは良いことですか、悪いことですか?4つ目を使用することを検討しているので質問しますが、それが私のデザインを台無しにする可能性があるかどうかはわかりません。

回答:


10

この質問は面白いです。正直なところ、限られた数のフォントサイズについて聞いたことがありません。ただし、フォントフェイスの数は一般に2または3以下であると聞きました。今日のレスポンシブWebでは、ビューポートに応じてフォントサイズが常に変化しているのがわかります。

これはいくつかの情報源がないと良い答えにはならないので、Smashing Magazineから読むべきだと思う興味深い記事が2つあります。1つは、タイポグラフィのガイドラインとテクニックに関するものです(見出しタグの相対的なスケーリングについて説明しているセクションにリンクしました)h1:1.5ems、h2:1.375emsなど。

2番目の記事は、スマッシングマガジンがWebの最も人気のあるサイトのいくつかで毎年タイポグラフィについて行う大きな研究です。これらのサイトは主にコンテンツ主導型であるため、タイポグラフィはサイトにとって非常に重要です。

でも、フォントサイズに関して一般的に合意されているベストプラクティスはないということがわかるでしょう。視聴者の注意をそらすほど劇的に変化しない限り、自由にプレイできます。フォントサイズを区別可能な方法で使用して、ユーザーがフォントサイズを特定のコンテンツタイプに関連付けることができる場合は、問題ありません。行き過ぎないでください。


1
うわー!その素晴らしい答えをありがとうございました!:Dあなたは私の日を救った!:)一度に3つ以上の異なるフォントサイズを使用するべきではないと私に言った人はグラフィックデザインの前のボスだったと述べたかっただけです。ドイツの代理店。私は彼があまり好きではなかったし、私がそこで働いている間、彼はたくさんの強打を言ったので、私に尋ねれば、彼の3つのサイズのルールはまったくナンセンスだと思います。簡単なメモ...
drpelz 2013

4

Webサイトで使用できるフォントサイズの数を教えてください。

技術的には、無限の量。

誰かが3つ以上の異なるフォントサイズを使用しない方が良いと私に言った

「良い」設計は一連の制約内で機能する傾向があるため、これらの経験法則タイプの規則の多くはそれだけです-いくつかの焦点と方向を提供するためにオプションの範囲を制限するために使用される制約。

Webページごとに4つ以上のフォントサイズを使用することは良いことですか、悪いことですか。

はい。そして、いいえ。ええと...

それはすべて、設計の詳細に基づいています。自問してみてください:4番目のフォントサイズを追加することはできますか?使用を正当化できますか?もしそうなら、それのために行きます。


2

好きなだけ。新聞について考えてみてください。相対的な重要性を表すために、見出しには多くの異なるサイズを使用できます。Webページで同じことができなかった一般的な理由はありません。たとえば、タグクラウドはフォントサイズのバリエーションを多用します。


新聞はさまざまなレベルの重要度に対応するためにスケールを使用していますが、伝統的にコピーフィッティングの手段としても使用されていました。
DA01 2013

タグクラウドは良い例です!
2013年

2

上記の回答のほとんどに同意しますが、ここにもう1つ追加したいと思います。

まず、訪問者にとって魅力的なレイアウトを維持する必要があると思います。フォントサイズをさまざまに組み合わせると、混乱して読みにくくなる可能性があります。

次に、ユーザーベースを検討します。誰があなたのサイトを使用するのですか?一部の人々は異なるプラットフォームを使用しており、特定のフォントサイズは異なるプラットフォームでは異なって見えます。

最も重要なことは、ページの外観を一定に保つことです。幸運を!


1
もちろん、基本的にはあなたの言う通りです!:)しかし、フォントサイズが3だと、複雑なゲームサイトの開発が難しくなります。
drpelz 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.