font-weightが可読性にどのように影響するかについての調査はありますか?
明らかに、そこには何らかの関係がありますが、私は事実に基づいて決定を下すのに苦労しています。
私の問題を示すjsFiddle を作成しました。または、以下のスクリーンショットを表示できます。
私は個人的にfont-weight:100;
より洗練されていて、モダンなどですが、ページにこれらのラッパーがたくさんあると、他の人がうまく読めないのではないかと心配しています。また、タイトルの下の「コンテンツテキスト」が重く、タイトルから目を離しているように思えます。
ここでは非常に異なる質問があるようです。
最初の質問に答えるには:
フォントの太さが読みやすさにどのように影響するかに関する調査はありますか?
はいあります。最初に、タイプ/フォントはその「読みやすさ」(単語、文、段落を平均的な読者が簡単に読むことができるか)と「読みやすさ」(文字形式を簡単に区別できるか)によって判断されることを理解する必要があります。 。
研究によると、「通常」または「通常」のフォントの太さ(400など)を使用すると、読みやすさが向上する傾向があります。その理由は、単語や文をすばやく読むことができる場合、読者の目は実際の通常の点滅速度を遅くするため、ユーザーは長時間にわたって疲れた読書を続けることができないからです。それでも、テキストの大きなブロックでより軽いまたはより重いウェイトが使用されている場合、リーダーは読書中に集中する必要があるため、より点滅する傾向があります。タイプの重みが軽いと負のスペースが多くなり、タイプの重みが重いと正のスペースが多くなります。どちらも読者はもっと集中する必要があります。
見出しの場合は、読みやすさだけでなく読みやすさも目標にする必要があります。研究により、xの高さが高い書体の方が読みやすいことがわかっています。
出典:
2番目の質問に答えるには:
これが私が取り組んでいるフィドルです http://jsfiddle.net/T7b6E/
私は個人的にfont-weight:100のタイトルを好みます(より滑らかでモダンなど)。
最初に覚えておかなければならないのは、単にfont-weight: 100;
in HTMLは実際には明るい書体を作成しません。太さはフォントに含める必要があります。最も一般的なフォントは、標準、イタリック、ボールド、ボールドイタリックの2つのウェイト(4スタイル)で提供されます。 HTMLではfont-weight: 400
およびfont-weight: 700
。別のfont-weightを適用しようとしているフォントにその重みがない場合、ブラウザーはcouldの外観を試してみます。 。そして、それはそれを誤解する可能性があります。また、オペレーティングシステムやブラウザによっては、かなり異なるように見える場合があります。
今日、非常に多くの優れたWebタイプのファウンドリサービスがあり、複数の重みでタイプを提供しています。調査します。
タイプウェイトで使用する一般的な経験則は、タイプ(ヘッドラインなど)が大きくて短いほど、軽いウェイトを使用する方が簡単です。タイプが長く、小さいほど、通常のウェイトを使用し、強調のために重いウェイトを使用する方がよいでしょう。このアプローチはまた、 人々は読まない、オンラインでコピーをスキャンする]と示した調査と一致しています。
ハインズの答えは素晴らしいです。何かを追加したいだけです。
アクセシビリティ
WebのWCAG 2.0アクセシビリティガイドラインには、障害を持つ人々がWebサイトに完全にアクセスできるようにするために従う必要がある特定の仕様があります。そのような仕様の1つは、フォントの背景色に対するフォントの色のコントラストに関するものです。 完全な詳細はこちら
ルールは次のように述べています。
1.4.3コントラスト(最小):テキストとテキストの画像の視覚的表現は、以下を除いて少なくとも4.5:1のコントラスト比を持っています:(レベルAA)
- 大規模テキスト:大規模テキストと大規模テキストの画像のコントラスト比は少なくとも3:1です
- 付随的:非アクティブなユーザーインターフェイスコンポーネントの一部であるテキストまたはテキストの画像、純粋な装飾、誰からも見えない、または他の重要な視覚的コンテンツを含む画像の一部である場合、コントラスト要件はありません。
- ロゴタイプ:ロゴまたはブランド名の一部であるテキストには、最低限のコントラスト要件はありません。
(強調鉱山)
大規模フォントは、18ptフォントまたは14pt boldフォントとして定義されます。
つまり、太字の14ptフォントは、18ptの通常のフォントと基本的に同じ読みやすさです。同じリンクでW3は言う:
文字が大きく、文字ストロークが広いテキストは、コントラストを低くすると読みやすくなります。したがって、大きなテキストのコントラスト要件は低くなります。これにより、著者は大きなテキストに幅広い色の選択肢を使用できるようになり、ページ、特にタイトルのデザインに役立ちます。