目次
Webと印刷での文字詰めの違い
1.印刷物のような細かい調整は難しい
印刷物であれば文字間や文字の改行位置など、誰が見ても同じ状態に整えることができます。
しかし、Webの場合は端末によって画面幅が異なり、全く同じ状態のものを提供するのは難しい場合が多いです。
2. 1文字ずつ詰めるのも難しい
印刷物は編集ソフト上で1文字ずつ手入力で詰めるのに対し、Webでは「letter-spacing」を使うことで文字の間隔を調整できます。
ただしごく一部に使う以外での使い方、例えば文章の1文字ずつ間隔を狭めたり広めたりするのには向いていません。
じゃあWeb上での文字詰めは難しい？
→CSSを使えばできます！
CSSプロパティのうち「font-feature-setting」を用いることで、文字詰めが可能になるのです。
具体的な文字詰め方法
やり方はシンプル。CSSで
.クラス名 {
font-feature-settings: "palt" 1;
}
を設定するだけ。paltとはProportional Alternate Widths（プロポーショナル代替幅）の略称です。
1で機能を有効化、0で無効化できます。
また、句読点は余白開けたいけど文字は詰めたい！という場合は
.クラス名 {
font-feature-settings: “pwid” 1;
}
を設定しましょう。 YakuHanJPを使えば設定をしなくても、や「」といった約物を半角表示にできます。
注意！
上記設定で文字詰めできるのはOpenTypeフォントかつプロポーショナルメトリクスのフォントのみ。
ＭＳ Ｐゴシックやメイリオでは適用されないため、事前にフォントの種類を確認しておくと良いでしょう。
さいごに
細かくこだわると工数もかかるので、Webではそこまで重要視されない文字詰め。
しかし工夫ひとつで、読む人にポジティブな印象を与えるのかもしれません。
現状維持にとどまらず「何がユーザーにとっての幸いか」を突き詰めて行きたいですね。
