まず、これは純粋に設計関連の問題と解決策です。グリッドのデザインは、テキストを正当化する必要があるかどうかを指定します。正当化するだけでは、ユーザビリティに大きな影響はないと思います。テキストを判読できない悪いタイポグラフィは、ユーザビリティを低下させます。とはいえ、しっかりとしたコントラストとタイプの間隔のバランスが取れていることを確認してください。フォントサイズも重要です。
このサイト は、テキストをオンラインで正当化する試みです。 InDesignの場合ほどCSSでは文字と単語の間のスペースを制御できないため、テキストを正当化することははるかに難しく、空白の「川」が行を駆け抜けることはありません。行間のスペースを超えています。テキストの正当化を困難にするもの：長い単語、十分な単語を保持できない行の幅、テキストと背景色のコントラストが強すぎる。それらは川をより広く、より明白に見せます。
活版印刷の理想は、均等なテキストブロックを使用することです。ここでは、目を細めると、均一なソリッドシェードになります。したがって、テキストを約10ピクセル、60％グレーで白い背景に保持し、約20単語に収まる行がある場合、alignがいように見えることはありません。ただし、これはユーザビリティを改善するものではないことに注意してください。小さくて比較的軽いテキストは、多くの人々、特に年配の読者を悩ませます。
­（ソフトハイフネーション）適切に組版を模倣できる、超素晴らしいなどの長い厄介な単語を正しく分離します（例：InDesign）。これを行うのに役立つものがたくさんあります。おそらく this を使用して、クライアント側でテキストを非表示、操作、および表示するロジックをお勧めします。
Edit：他の人が以下で言及するように、 cssハイフン が可能になりました。さらに、 css4はさらに多くの制御を提供します 。
text-align：justifyは使用しないでください 現在のブラウザでは。細かい部分の処理が苦手で、出力には多くの川が含まれてしまい、 ハイフネーション （ソフトハイフン以外）のサポートはありません。
注は4。5年前に書かれました。物事は徐々に変化しています... http://caniuse.com/#feat=css-hyphens
Edit：Hyphenator は、この回答のコメントで私の注目を集めました。テキストアラインメントを使用する価値があるように見えるので、それを使用しているサイトをチェックしてください。このスクリプトを使用する前に、javascriptを使用してtext-align justifyを適用すると、javascriptのないユーザーがキャッチされないようにすることができます。
編集2：CSSはhyphensプロパティで ハイフネーション を許可します[- ブラウザサポート ]。 PPKは スタイルシートに追加 に言っていますが、Eric Meyerは モバイル用に追加 と言います。
編集3：良い概要 いくつかのSASSで現在利用できるものの=。
位置合わせを正当化することに関して他者が提起した問題は、狭い列でより一般的です。フォントやその他のパラメーターのサイズに対して列の幅が十分に広い場合は、テキストを揃えても構いません。平均して1行あたり最低12〜15語が必要だとしましょう。多いほど良い。
技術的な理由はありません-それは純粋に設計上の決定です。多くの人々は、正当化されたテキストは読みにくいと感じますが、それはあなたの状況に依存すると思います。印刷では正常に機能しますが、一般にWebブラウザーは、テキストの最終的な出力を十分に制御できず、一部の人の画面では表示されるものがくだらないように見えません。
あなたの最善の選択肢は、正当化を避けることです。
テキストを正当化しない説得力のある理由を考えることはできません-ある時点で、コンテンツのボリュームと幅はほとんど正当化することを要求します。もちろん、特定のWordの組み合わせで構成されるコンテンツで問題が発生しますが、川と言葉の間に異常に大きなスペースがある場合は、まったく異なる問題（読みやすさと明快さ）があります。
私が避けたいのは、すべての犠牲を払って本文を中央揃えにすることです。私は、それ以上に素人向けのWebデザインの大きな危険性があるとは思わない。
他のウェブデザインの質問のように...それは依存します。提案されているように、正当化されたテキストは通常、狭い列では見栄えがよくなりません。サイドバーは通常狭いので、サイドバーの一般的なルールとしてこれに反対することをお勧めします。
多くの場合、推奨される1行あたり10単語（またはそれ以上の量）の本文コピーを使用すると、多くの場合、正当なテキストを回避して、かなり長い時間を使用している場合を除き、ほとんどの場合合理的に見栄えがよくなります単語や文字列。
StackOverflowでこのサイトを閲覧したことがあると思いますが、 Jon Tan は（記事内の）本文コピーで正当化されたテキストを使用し、99.99％の時間で見栄えがよくなります。
ハイフネーションなしで正当化を使用しないでください。 PHPベースのハイフネーションライブラリ と、このライブラリのWordPressプラグイン： wp-Typography へのポートです。
一般的に読みやすいので、左揃え（text-align：left）を好みます。また、等間隔の単語を読む方が速いので、聞きます。正当化を使用する文体上の理由がない限り、左、右、または中央に配置します。特に本文テキストには、左を使用します。 （実際には、他の方向のテキスト（「ヘブライ語」など）の「転送」のようなものが必要です...）
Internet Explorer（少なくとも）バージョン8まではtext-align: justifyを正しくレンダリングしないことに注意してください。代わりに、text-align: centerとして解釈されます。
詳細は次のとおりです。 text-align：justify
なぜIEが中心に置かれているのかを見つけるために頭痛の種になりました。誰かの時間を節約できるかもしれません。
うーん...いいえ...！
[真剣に] WordPressはjustifyを使用します。読みやすさを低下させるかどうかに関して、それはかなり強力なステートメントだと思います...
Text-justify：newspaperも使用できます。 text-justify cssタグは、正当化するときにテキストをどのように折り返すかを制御するのに役立ちます
テキストの位置調整は、いくつかの方法で実行できます。
いくつかの定義：単語間の間隔の調整は「追跡」です。文字間の間隔の調整は「カーニング」です。優れたレイアウトプログラムは自動的にカーニングを行います。変数vaは、正確にxaよりもカーニングすることができます。このプロセスを支援するために、優れたフォントがカーニングヒントのテーブルに組み込まれています。
モノスペースフォントの初期の頃は、単語間に余分なスペースを挿入することで行われていました。これにより、出力が非常に不格好になりました。行の終わりに4つのスペースがあり、行に6つのスペースがある場合、そのうちの4つは二重スペースになります。
等幅フォントは正当化されるべきではありません。
可変幅フォントでは、emスペース、enスペースなどがあるため、スペースをより分散させることができます。
これは、ほとんどのブラウザが現在ある場所だと思います。それはほとんどの場合合理的にうまく機能します。それがうまく機能するためには、次の条件が満たされる必要があります。
- 1行に適切な数の単語が必要です。
- 行末の大きなWordは問題を引き起こす可能性があります。
英語の平均的な単語は5文字です。したがって、平均すると5文字になります（5文字のWordとスペースは合わないため、次の行に移動します）
行に10個の単語がある場合、各単語間のギャップに標準のスペースの約半分を追加する必要があります。
最後の単語が「頭痛」のような長い単語であり、それに余裕がない場合、10個のスペースを配布できます。これは悪く見え始めます。
ここで、ハイフネーション辞書が役立ちます。ハイフネーションはアルゴリズムによって実行できますが、辞書があれば非常に役立つという十分な例外があります。 （辞書にない単語のソフトハイフンには、特殊文字isがあります。）
ハイフネーションを使用すると、Wordを分割して、行をより均等に埋めることができます。
経験的に、65 emの行の長さが適切な妥協点であると判断しました。これにより、多くの場合、1行あたり11〜13ワードが提供されます。
正当化の別のアプローチは、文字間でスペースを分割することです。これにより、上記の問題の一部は回避されますが、十分なラインに多くのスペースを分散している場合には、まだ奇妙に見えます。あなたは時折新聞でこれを見ます、そして、そこでは、Wordは各キャラクターの間に完全なスペースを持っているようです。これは、長い行の適切な引数です。
優れた組版プログラム（InDesign、* TeX、Framemaker）は、語間ギャップの余分なスペースと、文字間の小さな余分なスペースの組み合わせを行います。
CSSでtext-align：justifyの使用を変更できるtext-justifyというブロックに新しい子があります。名目上、オプションを受け入れます
- auto（デフォルト）
- インターワード
- キャラクター間（+レガシーの理由で配布）
- none
CanIuse https://caniuse.com/#search=text-justify CSSワーキンググループ https://drafts.csswg.org/css-text-3/#text-justify-プロパティ
現在、CanIuseはFirefoxのコンプライアンスのみを報告しています。Chromeはサポートしていますが、実験的な機能を有効にする必要があります。CanIuseはサポートがバグだと主張します。図。テストしていません。
その他の実用的なポイント：
サイトのスタイルシートに4つの変更を加えました。
- 65 remの最大行長
- 本文フォントが110％に増加
- 125％への主要な増加
- 正当化されたテキスト。
その結果、サイト滞在時間とセッションあたりのページ数が倍になりました。
逸話ですが、あなた自身のテストの価値があるかもしれません。
印刷では完全に問題ないと思いますが、スペースやハイフネーションをきめ細かく制御できないため、ほとんどのWebブラウザーでは不格好です。タイポグラファーは、ページ/列（少なくとも雑誌では）を微調整できるため、場合によっては文字間隔やフォントの縮小をわずかに行うことさえできます。