読了目安時間は約 2 分です。
DTPデザイナーやグラフィックデザイナーの基本テクニック「文字詰め」。多くのデザイナーがPhotoshopやIllustratorなどのAdobe系ツールで自動カーニングしていると思います。DTPでは当たり前でしたが、WEBでもCSSで実現できます。その方法をまとめましたので紹介いたします。
目次
使い方
プロポーショナルメトリクスは
font-feature-settings: "palt";
他と組み合わせる場合は
font-feature-settings: "palt", "nlck";
という具合に記述します。
一覧
その他には
| プロポーショナル字形 | pwid |
| プロポーショナルメトリクス | palt |
| プロポーショナルかな | pkna |
| 等幅全角字形 | fwid |
| 等幅半角字形 | hwid |
| 等幅四分字形 | qwid |
| JIS78 字形 | jp78 |
| JIS2004 字形 | jp04 |
| 旧字体 | trad |
| 印刷標準字体 | nlck |
| 修飾字形 | nalt |
| イタリック | ital |
| 任意の合字 | dlig |
| スモールキャップス | smcp |
| スワッシュ字形 | swsh |
| デザインのバリエーション | salt |
| ライニング数字 | lnum |
| オールドスタイル数字 | onum |
| プロポーショナル数字 | pnum |
| 等幅数字 | tnum |
| 分数 | frac |
など。詳しくはこちら CSS での OpenType 機能の構文を参照ください。
OpenTypeフォント
文字詰めは基本的にOpenTypeフォント（游ゴシック体など）でなければ効きませんのでご注意ください。
