読了目安時間は約 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フォント(游ゴシック体など)でなければ効きませんのでご注意ください。