フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

CSSで文字詰め「font-feature-settings」

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる