そもそもtext-renderingとtext-align: justifyってなんだ
text-renderingプロパティ
詳しいところは別途調べて頂きたいのですが、text-renderingはその名のとおり文字のレンダリングを指定するためのCSSプロパティです。
いくつか値があるのですが、optimizeLegibilityを指定することで、ブラウザが文字描画の綺麗さを優先して、フォントのカーニングやリガチャを調整してくれたり色々してくれるようになります。
text-align: justify
text-alignには、left, center, rightの他にも、justifyというものが存在します。
justifyは、新聞などでもよくみるような標準的な段組みである均等割付けを実現することが出来ます。いわゆる両端揃えですね。
そもそもの難点
両者とも、まだ新しめ（といってもかなり昔から存在しているようですが、メジャーではない）な機能であるため、ブラウザの対応状況がよろしくなかったり、妙なバグがあったりするようです。
同時に指定すると
とはいえ、描画が狂ったりするようなものではないので最近では色々なところでこれらを指定しているのを見ます。
特に両端揃えはブログなんかでの見た目が綺麗になるので重宝しますね。ちなみにこのブログのテーマである Cinnamon - テーマ ストア - はてなブログ でも両端揃えを指定しています。
optimizeLegibilityもjustifyも、指定するだけで簡単に見た目を綺麗にしてくれる系お手軽便利CSSプロパティ感があるので、両方をbodyに指定してしまっているのを時々見かけますが、両方を同時に指定すると（ブラウザにもよるとおもいますが）両端揃えが崩れてしまいます。
カーニングなども考慮してレンダリングを調整するoptimizeLegibilityと、幅を変えてまで両端揃えにするjustifyの相性が悪いのでしょう。
対策
現状だと、どちらか片方づつ指定するしかないでしょう。JavaScriptで無理矢理どうにかすることも可能だとは思いますが……
ただ、例えばブログであればtitleにjustifyは必要ないでしょう。また、見栄えが大事なのでoptimizeLegibilityを指定する価値はあるかと思います。そして、本文にはtext-rendering: justifyを指定すれば良いと思います。
まとめ
というわけで、両方を同時にbodyで指定するのはやめた方がいいよっていう話でした。特にtext-rendering: optimizeLegibilityはテンプレみたいにbody要素に指定してしまっているケースを時々見かけるので「両端揃えがうまくきまらねえなぁブラウザのバグかなぁ」みたいな時には気をつけてみた方が良いかもですね。
なお、text-align: justifyの状態で、日本語とアルファベットを混ぜた時にありがちな「あ の さ ぁ …」みたいに間延びした状態になってしまう現象ですが、こちらはword-break: break-allとすることで、アルファベットが単語の途中であっても無理矢理改行されるようになるために、変に間延びする確率が減りますよ。
早くtext-justifyとかのプロパティが安定するといいですね。
そんなかんじで以上です。
