オンラインの段落に最適な列幅

Question

画面解像度の幅にまたがる段落があるウェブサイトに出くわすことほど悪いことはありません。彼らは通常読みにくいので、私は気にさえしません。

多くのWebデザイナーは、一般的なグリッドシステムと列システムを使用していますが、読みやすさを考慮して最適化されているとは思えません。一般的な美学に関するデザインガイドにすぎません。

私はそれが1行あたりの言葉に帰着すると思います。印刷メディアに適用されるルールはスクリーンメディアと同じですか？

画面上の段落の幅のサイズを設定するのに役立つガイドラインはありますか？

考慮したい：

主要なWebフォント（Arial、Verdana、Georgia、Timesなど）
フォントサイズの範囲（例：8px-24px）
列間のスペース

srcspider · Accepted Answer

理想的なラインの長さは、かなり短いか、かなり長いです。一般的に審美的に読みやすいものは、一般的に良い指標です。

Webコンテキストの列は、非常にコンパクトなコンテンツに焦点を当てている場合にのみ意味があります。これは、美化を超えて列を使用する目的に反します。そうでなければ意味がないのは、サポートが不十分なためではなく、スクロールのためです。列のある水平レイアウトを作成しない限り、ユーザーが上下にスクロールする可能性があります。また、列が2番目の軸をどのように追加するかを考えて、ユーザーが読み取りから少し間を置いたときにユーザーのメモリに負担がかかるので、2列を超えるものも混乱する可能性があります。

長すぎる–テキストの行が長すぎる場合、訪問者の目はテキストに焦点を合わせるのに苦労します。これは、長さが線の始点と終点の位置を把握するのを困難にするためです。さらに、テキストの大きなブロックで正しい行から続行するのが難しい場合があります。 —クリスチャンホルスト

短すぎる–線が短すぎると、目が頻繁に戻る必要があり、読者のリズムが崩れます。行が短すぎると、人々にストレスがかかり、現在の行を終了する前に次の行から開始する傾向があります（そのため、潜在的に重要な単語をスキップします）。 —クリスチャンホルスト

さらに、コンテンツのサイズを非常に意識する必要がある場合があります。コンテンツが長いほど、長い行を優先します。短いコンテンツでは、短い行が優先されます。通常、コンテンツ内の段落とセクションのサイズは、行の長さに応じて変化します。1行の段落は必要ありませんが、30行の段落は必要ありません。コンテンツを視覚化しやすい幸せな平均を選択します。

親指の一般的なルール

塩の粒でこれらを取る、それらは単なるガイドラインです。それらを自由に壊してください。繰り返しますが、これらはあなたが採用する必要がある「すべてに1つのルール」ではありません。正しい方向へのプッシュ/ヒントです。

1行あたり12ワード
タイプサイズに関係なく39文字（アルファベットと半角）
ポイントサイズに2を掛けてパイカ（ポイント×2）として解釈する
約50〜60文字、最大75文字（スペースを含む）—これは通常、タイポグラフィで友人から借りたガイドラインです

ロバート・ブリングハーストによる「活版印刷スタイルの要素」は、以下のより具体的な測定値に言及しています

45〜75文字の行の長さ（メジャー）。具体的には、スペースを含めて66です。単一の列
40〜50文字。複数列
85〜90文字。不連続なテキスト。寛大な指導
40文字（最小）;正当化される
12から15文字。限界ノート;英語

読みやすさの変数：

フォントサイズ
- 大きい=試してみたが、（一部の）人々はそれを不快に感じている。幸せな「中型」を目指そう
- 中/標準=幅が広い
- 小さい=小さい幅
行の高さ
- 大きい（1.9以上）=ラインをスキャンしやすく、ラインが長いほど許容範囲が広くなります
- 通常=短い線
- 小さい=非常に短い線
コンテンツの長さ
- 大きなブロブ=長い行+大きな行の高さ
- 短いメッセージ=短い行+適切な行の高さ

「ユーザビリティの常識」に忠実である限り、設定自体が間違っていることはありません。ほとんどのデザイン面とは異なり、自分でテストすることもできます。読み取り可能なコンテンツを要素に挿入するだけで（必ずしもそこにあるとは限らず、できれば新鮮なものを！）、快適に読むことができるかどうかを確認します。できれば素晴らしいです。それ以外の場合は、設定がコンテンツと一致するまで調整します（メインのフォントだけでなく、いくつかのフォントでテストします）。

Nikita Prokopov · Answer

このリンクもチェックしてください： http://www.informationarchitects.jp/en/100e2r/ 。

顔を画面に接着して曲げたデザインは、背中のために悪いです。後ろに寄りかかって、リラックスした姿勢でデザインを続けてください。あなたのデザインはよりリラックスし、あなたもリラックスします。

多くのWebサイトでテキストがどのくらい小さいかを理解するには、読みやすい本と比較してから、本のタイプと画面のタイプがほぼ同じサイズになるまでフォントサイズを変更します。

デフォルトのHTML行の高さが小さすぎます。行の高さを大きくすると、テキストが読みやすくなります。画面上のタイプの場合、140％のリードが良いベンチマークです。

彼らは、100％のフォントサイズ（ブラウザのデフォルト）、1行あたり10〜15ワード（通常、デフォルトのフォントを使用したブラウザウィンドウの50％）、140％の行の高さを持つことを提案しています。