📝

カーニングしてテキストを文字詰めする

2021/03/11に公開

カーニングとは

文字詰めのことです
自動カーニングをcss1行で指定できる便利なfont-feature-settingsプロパティについて説明します

日本語フォントこそ文字詰めが活きる

日本語フォントは、全ての文字が正方形の仮想bodyに文字が収まるようにデザインされています
原稿用紙に1文字ずつ書くイメージです
句読点や小文字など、小さな文字であっても1文字として等間隔で描写されるため、場合によっては間延びして読みにくい印象にあります

font-feature-settingsについて

字詰め

font-feature-settings: "palt"; で指定できます

paltの字詰め以外にもタイポグラフィの様々なオプションが指定できます)

サンプル


http://runstant.com/cigar/projects/619d9947

対応環境

ほぼ全てブラウザで対応
https://caniuse.com/font-feature

以上です
css1行で簡単にできました
楽しいタイポグラフィライフをお送りください

Discussion