DTPあがりのデザイナーがWEBをやっていると、えもいわれぬモヤモヤムズムズに苛まれることが多々あります。
ただたんに、DTPならスパッと決まるものが、WEBで思い通りにならないのが、気に入らないだけなんですけど。

その最たるものが「文字送り」ですよね。
迷うことなく対策できるようになるだけでもラクになると思うので、まとめておきます。

文字サイズのモヤモヤ

DTPは「10pt」を基準に大きくしたり小さくしたりします。
一方、WEBは「16px」がブラウザのデフォルトです。
テンプレートなどでは文字サイズを「11pt」に指定していたりします。
きっと、スタイリッシュにしたいデザイナーさんのこだわりなんでしょうね。
わたしは、ほぼノー設定でいいなと思いました。

行間のモヤモヤ

DTPでは、文字サイズに「＋5pt」くらいが基準じゃないかと思います。
文字サイズが大きくなったからといって、行間も比例して広がるなんてことは、まずありません。
WEBでは「1.6em」に指定したテンプレートが多いです。
本文はこれでいいんですが、問題は見出しが2行以上になったとき。
修飾された見出しが複数行になると、余白などの関係でバランスを欠きます。
その対策として、見出しの行間を「1.3」とか「1.4」に指定します。
文字サイズが大きくなるにつれて、この数値は小さくなる傾向です。

文字間のモヤモヤ

DTPでは、かなり気にします。
とくに見出し文字に対しては、徹底的に調整しますよね。
その文字の形状によって詰めが違うのは当たり前で、アウトライン化して一文字ずつ0.1pt単位で方向キーの連打するのが日常茶飯事です。
WEBでは、ほとんど調整不可、というより不要です。
せいぜい「読みもの」の部分で 1px 広げるくらいでしょうか。
それも、スマホ画面では1文字でも多く画面に入れてなんぼなので、文字間を開けて1行の文字数が減るなんてのはもってのほかです。
文字間を開けるのは、PCの時だけにしたほうがいいかもしれません。

モヤモヤするまとめ

DTPのみなさん、あきらめが肝心です。
「１文字あふれた！」といっても「その行だけ文字間をつめる」とか出来ないのがWEBです。
「美しく読みやすい」よりも「スマホの小さい画面にいかに情報を集約するか」が重要となるモバイルファーストの時代です。

letter-spacing は、PCのときだけにしておきましょう。
なんなら行間も、スマホとPCで別にしましょう。
見出しは、もう最初から、行間を調整してしまいましょう。

そうすることで、とりあえず、我々のストレスは軽減されるはずです。