テキストの見栄えを整えるCSS Tips

さすがに一ヶ月放置するのはよくないなと思ったので突貫でなんか書きます。
今回はテキストにまつわるお話をやっていきます。
テキストの見栄えをどうにかしたいんじゃという話。

例によって検証用デモを用意してます。

文字の改行折り返し位置がガタついてていやだ

「・・・そうすか。じゃあいっそテキスト全部画像にしますか？（半ギレ）」
などとバチバチな態度で接しなければならなかったのは昔の話で、
今はCSSが解決してくれます。

これを

こうしたいイメージです。

解決法

CSSに2行書き加えればOKです。

これで終わりです。簡単でしゅね。
text-jusify: inter-ideograph;はIE/Edgeのための記述です。

参考：
CSSで均等割り付けを実現する方法

なお、あくまで自動で均等割り付けされてるだけなので、
見かけ上やたら間延びして見えてしまう場合もあります。

（例：上図の「働いてくれないので」部分）

テキスト領域の横幅サイズが固定なら文字数や領域内の余白を増減させればいいのでしょうが、
画面幅に応じて伸縮するような設計の場合全てのデバイスでいい感じに見せるのは無理です。
そこんところはどうしようもないので割り切ってください（えー
よほどこだわりがあるならMedia Queriesで主要デバイス向けに頑張るとかもありますが
割に合わない労力なんで嫌ですね。拷問かな？

文字の上下の余白が僅かに大きくてやだ

こちらをご覧ください。

領域1を見れば分かるように、padding値的に縦の余白と横の余白は同じ指定です。
にも関わらず、line-height: 1.6;に設定した領域2の例では
縦幅の方が大きいように見えてしまいます。
これをどうにかしたいという話。

つまりこうしたい、と。
手っ取り早いのはline-height: 1;にしてしまうことですが、
そうなると複数行の時に文の行間が狭すぎて不細工になってしまいます。
そこでline-heightの値はいじらないというレギュレーションでいきましょう。

解決法

font-sizeとline-heightの値に応じて上下のpadding値を削ることでどうにかします。
わりと力技ですがやむなし。

paddingによる余白が（上下左右全て）20px、
font-sizeは16px、line-heightは1.5の例です。

マジックナンバー16pxは下記のようなカラクリです。
上下の余白padding値[20px] – font-size[16px] * (line-height[1.5] – 1) / 2
= line-height込みの上下の余白[16px]

参考：
CSSで「余白」を制してデザイナーに好かれよう

こんなものを一々計算していたら頭がフットーしそうになるので
Sassなどメタ言語に自動計算してもらいましょう。
上記の参考URLでもそのようにしています。

これいる？（おまけのMixin配布）

折角なのでSass用のmixinを作りました。

あんまり需要はないと思いますがpadding値が上下左右全部バラバラでも動く仕様。
line-heightは単位なしの指定でお願いします。
（単位ありの場合でも動く想定で作ると記述が更にややこしくなるので辞めました）
font-sizeとline-heightのデフォルト値はNormalize.cssに準拠した。

paddingの単位がvhだったりfont-sizeがremだったりな想定で作ったので
最低限calcが使えるブラウザを想定して使ってください。

補足

参考URLに書かれていますが、calc()関数は

主に単位が違う計算で使うものであり、コード管理する上で計算式を明記するためにcalc()が用意されたわけではない

・・・らしいんで、$lineHeight以外の変数の単位が全部pxの場合、
calc()は取っ払て使うといいかもです。

字間が等幅なのがやだ

「・・・そうですか。じゃあいっそ（以下略）」
今はなんとかなります。良い時代になりましたね。

を

こうしたいという話です。

解決法

これだけでブラウザがよしなにやってくれます。
ただしSafari 10だと句読点や括弧の直後にリンク要素があると崩れる
という不具合が確認されているので、Safariでは

としておきましょう。
「かな」要素のみ文字詰めされます。

また、この記述と先ほどのtext-align:justify;とtext-justify:inter-ideograph;の指定を
組み合わせて使うと、IE/Edgeでテキストが両端揃えにならなくなってしまいます。
まあ見た目が大きく崩れるわけじゃないので、
そこはグレースフルデグラデーションってことで・・・。

参考：
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング

おわりに

“神は細部に宿る”なんて言葉がありますが、
こういう細やかな気配りが出来るとカッコいいですね。(◉ω◉)

ただ、細かいところにこだわりすぎて本質を見失うというのもよくある話で。
見てくれの美しさを意識しすぎるあまり、メンテナンス性が著しく低下してしまうだなんて
暗黒時代（ピクセルパーフェクト）の再来になっちゃいますし。
基本的には後になって更新する予定のないLP向きのテクニックかもしれませんねー。