web-dev-qa-db-ja.com

読みやすくするために最適な段落幅の数はいくつですか?

現在のプロジェクトには多くのテキスト/段落コンテンツがあるので、ウェブサイトの読みやすさについて検討します。

Medium.comやQuora.comなど、読みやすさが良いと思われるサイトを確認し、調べようとしました。

段落の幅は常に500〜700pxです。

私の質問は、読みやすさのための段落幅の最適な数は何ですか?特にデスクトップビューでです。

23
Rob H. Yamin

調査によると、行の長さは70文字を超えてはなりません。したがって、段落の幅は50〜70文字にしてください。

したがって、実際には、ピクセル単位の幅ではなく、ems単位の幅(フォントサイズに対する幅)を気にする必要はありません。だから30-50emのために行きます。

また wikipedia は言う:

いくつかの研究では、100 cplは25文字の行よりも速く読み取れることを示していますが、理解度は同じままです。画面上のテキストが可能な限り最高の速度と理解の両方を持つためには、約55 cplを使用する必要があります。印刷されたテキストと同様に、行が長すぎたり短すぎたりすると、読み取りが遅くなります。行が長すぎると、リーダーが次の行(サッカード)の先頭にすばやく戻ることが難しくなりますが、行が短すぎると、さらにスクロールまたはページングが必要になります。研究によれば、ラインが長いほどスキャンが速くなり、ラインが短いほど正確になります。情報がスキャンされる可能性が高い場合は長い行を使用し、情報を完全に読み取る必要がある場合は短い行を使用する必要があります。 Webデザインは多くの場合、読み流すのではなく全体を読むことを目的としているため、可能な場合は短い行を使用する必要があります。

参照: https://www.researchgate.net/publication/234578707_Optimal_Line_Length_in_Reading--A_Literature_Review

25
Roland Studer

理想的な段落の幅は、ピクセル自体ではなく、行ごとの文字に基づいています

もちろん、これはフォントタイプのサイズと間隔に依存します。私が取り組んでいるプロジェクトの段落幅は540ピクセルです。 1行あたり70文字のスペースがあります。

本文の最適な行の長さは、スペースを含めて1行あたり50〜60文字と見なされます(「Typographie」、E。Ruder)。その他 sources は、75文字までが許容されることを示唆しています。

出典: 読みやすさ:最適な行の長さ

上記のソースをクリックすると、これに関する詳細(長すぎるまたは短すぎる行の引数)を読むことができます。

10
Nick Groeneveld

tl; dr

平均60〜70文字がデスクトップの表示に最適です。
モバイルでは40-50がより現実的です。


行の長さ(measurein typographer speak)は快適な読みやすさにとって重要な要素です。 James CraigはそれをTypeを使用した設計でうまく表現しています

長いタイプの行を読むと疲労が発生します。読者は各行の終わりに頭を動かして、次の行の先頭を探す必要があります。

測定はすべてではありません

Text size and spacing diagram

Pocket mobileからの例。比較的短いメジャーに注意してください。

メジャーは、同等以上の重要性を持つ他の要因に照らして検討する必要があります。

読みやすさを考慮して設計する際の重要な決定要因は次のとおりです。

  • 書体
  • フォントサイズ
  • 文字間隔*
  • 単語間隔*
  • 前景/背景コントラスト
  • 測る
  • 先頭(行間のスペース)

*文字と単語の間隔に関する補足:
良い書体を使用し、適切なサイズに設定する限り、これは大きな問題にはなりません。これらの要素は通常、フォント自体で考慮され、めったに調整を必要としません。

モバイルのそれほど特別ではないケース

すべての要因を考慮すると、モバイルの可読性は短い方が優れていることがわかります。これは新しいことではありません。歴史的に、雑誌や新聞などの複数列のレイアウトでは、30から50の範囲のメジャーが一般的でした(覚えていますか?)。

これらのコンテキストでは、複数の列で行を狭める必要がありますが、型を縮小し続けることはできません。読みやすい型のサイズ(およびリーディング)を使用し、より短いメジャーでライブすることをお勧めします。この形式は、拡張された「没入型」の読書で読者に疲労を引き起こしますが、ここで行われるカジュアルなタイプの読書では問題になりません。

モバイルも同じシナリオに適合します。

資源

Smashing Magには 特に、行の長さの要因とレスポンシブデザインに対処する優れた入門書 があります。それ以上の決定をする前に、その全体を読んでください。

longの進行中の作業もあり、Robert BringhurstのクラシックなElements of Typographic Styleをウェブ中心のリソースに変換しています:Richard Rutter's- Webに適用される文字体裁の要素 。 ????このリンクをクリックすると、適切なメジャーの選択に関するセクションが表示されます。あなたが検討したいと思うかもしれないそのページからの1つの素晴らしい観察:

…メディアとしてのWebの美しさと利点は、読者が自分のニーズに合わせて読書環境を調整できることです。これは、認められ、受け入れられ、ゼロからウェブサイトのデザインに組み込まれるべきコンセプトです。


私は対処しました ここで同様の質問 少し前に

9
plainclothes

私が見つけたいくつかのリソースはあなたをさらに助けることができます:

本文の最適な行の長さは、スペースを含めて1行あたり50〜60文字と見なされます(「Typographie」、E。Ruder)。他の情報源は、75文字までが許容されることを示唆しています。

560ピクセル幅の記事コンテナで、1行あたり約70文字になります。

ソース: https://baymard.com/blog/line-length-readability

多くの場合、65文字(ローマ字の2.5倍)は完璧な尺度と呼ばれます。この数値から導き出されるのは、すべての設計者が努力すべき理想的な範囲です。1行あたり45〜75文字(スペースと句読点を含む)で印刷します。

ソース: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-sensitive-web-design/

すべてのリソースは、1行あたりの文字数について話します。これは、フォントとfont-sizeによっては、幅が読みやすさについてあまり意味がないためです。

3
Dimitra Miha