web-dev-qa-db-ja.com

段落を調整するためのオプション?

私の会社のウェブサイトには、調整を求められたページ( here )があります。望まれるのは、最初の段落を取り、それを調整して単語間のスペースの量を減らすことです。私が最初に考えたのは、段落(およびページの残りの部分)を揃える代わりに左揃えにすることでした。しかし、私にはこれはあまり良くありません。この見た目を良くする(または少なくとも許容できる)他のオプションはありますか、それとも左揃えに固執していますか?ありがとう。 (追伸:これらのタグは最も適切だとは思わないが、私はより良いと思うものを追加することはできない。まあ。)

1
Tom A

これが一目での評価です。

  • テキストを揃えたまま、単語間の間隔を狭めることはできません。選択肢は、より小さく、等間隔(非ジャスティフィケーション)またはより大きく、可変間隔(ジャスティフィケーション)です。
  • 正当化せずにテキストは正常に見えます。少なくともウェブ上では、左揃えの方が正当化されるよりも優れていると一般に認められています*。
  • テキストが画像の下にくると、行の長さが非常に長くなります。通常、1行あたり60〜80文字が最も読みやすくなります。あなたのページには私の画面に160以上があります。

あなたが試すことができるいくつかのこと:

  • テキストの量を減らす:これは見落とされがちなソリューションです。そこにすべてのテキストが必要ですか?人々はそれを読むでしょうか?コンテンツをより簡潔で読みやすくするために、プロのコピーライターを雇うことを検討してください。
  • テキストコンテナの幅を小さくします。すべてのユーザーが同じ行の長さを見ることができるように、おそらく固定幅にします。テキストブロックの外側に画像を保持できます。
  • フォントサイズを大きくします。これにより、行の長さが短くなります(1行あたりの文字数が少なくなります)。
  • 行の高さを増やす:これにより、特に長い行の場合、目が次の行にドロップしやすくなります。 (ブラウザのデフォルトは約1.3です。1.4または1.5を試してください。)
  • 文字間隔を小さくします。これはIMOには見えません(letter-spacing: -1pxで試してください)が、単語間の間隔は狭くなります。
  • コンテンツblocksを中央揃えにすることもお勧めします。上部のロゴとメニュー、およびフッターのテキストはすべて中央揃えになります。

*充実した記事はオンラインで見つかりませんでしたが、Jakob Nielsenの Kindleのユーザビリティレビュー のこの段落では、次のように言及しています:

Kindle iPhoneアプリは、完全に正当化されたテキストでページを表示します(つまり、左右にフラッシュします)。これにより、特に小さな電話画面の狭い列の場合、読みやすさがわずかに低下します。 Stanzaは左揃えのテキストのみを使用しますが、これはより適切な選択です。

1
DisgruntledGoat

試すことができることの1つは、ホームページのように、コンテンツ領域の幅を制限することです。

コンテンツに明示的な幅を設定することにより、ユーザーのブラウザウィンドウの幅に依存する代わりに、正当な間隔の発生方法を制御できます。

1
Jarrod Dixon