もしゃもしゃ会で誰得な Stylus の Mixin ができた話

先日は実際にある Web サイトを Illustrator を使って模写しており、文字間とかちゃんと模写していたのですが、ふと、そういえばカーニングやトラッキングの値の単位ピクセルじゃなくね？CSS の `letter-spacing` で値に変換するときどうすんの？どうしてんの？って気になったんです。

そこで、これまで自分は目視でこんなもんだろうと適当に調整していたのですが、ちゃんとしようと思いました。

で、書いた Mixin がこうです。

Stylus の Mixin

`fz` にはフォントのサイズを、`tracking` には Illustrator 上での数値を記述します。

ls(fz, tracking)

letter-spacing ((fz / 1000) * tracking)px

Stylus で使うとき

p タグの font-size が 16px で Illustrator のトラッキングが 20

p
  ls(16, 20)

できあがった CSS

p {
  letter-spacing: 0.32px;
}

こんな細かいピクセル値、ブラウザに反映されんかよって思ってましたが、Chrome ではちゃんと反映されまして、スクショ取って Illustrator 上で照らし合わせたらきっちり合ってました。

他のブラウザではどうなるか知りません。

Mixin 化する際に参考にしたページは本家 Adobe Illustrator さんの Help ページ

字送りとカーニングの値は、現在の書体サイズを基準とした 1/1000 em 単位で指定します。
Illustrator / 行と文字の間隔
https://helpx.adobe.com/jp/illustrator/using/line-character-spacing.html

1 em は、6 ポイントのフォントでは 6 ポイントになり、10 ポイントのフォントでは 10 ポイントになります。カーニングと字送りは、現在の書体サイズに比例します。

フォントサイズの 1 / 1000 em ってことなので、

フォントサイズ 16px だと `16 / 1000 = 0.016px` が、トラッキングのサイズ「 1 」になります。

Illustrator のトラッキングが「 20 」の場合、

`(16 / 1000) * 20 = 0.32px` となり、

この値を CSS の `letter-spacing` で設定してやればきっとデザイナーさん指定通りの文字間になるはずです。

（なんか適当に除算したらできた。）

余談ですが 1 / 1000 em の 1000 という値は、

もしかするとフォントの 1 文字の 1000 メッシュが関係しているのではないかとフォントにお詳しい方から聞きました。

というわけで、モヤっていた部分をもしゃもしゃ会に参加し、もしゃもしゃすることにより解決することができました。よかったです。

—-

終わりに

途中からいかに自然に、もしゃもしゃ言えるかに徹してしまった本稿ですが、

この Mixin 誰が興味あんねんと思いつつも、カーニングやトラッキングについて調べるいい機会になりました。

関西フロントエンドUG ではたまになんの話してんだろ。。みたいに置いてきぼりなる時もありますが、一人で作業していると「ここ、これでいいんかな」とかいろいろ疑問湧いてくるじゃないですか。

そんな時は関西フロントエンドUG（KFUG）にさくっと参加してみると、

– ここけっこうみんな失敗してるんだ

– これはやっぱまだ手をださないほうがよさそう

– こっちのほうが楽できてイマドキだよ

とかいろんな感触掴めて、良いも悪いもいろんな情報を聞いてちょっと安心したりできます。

今後も気軽に参加したいと思います。

シマキョウスケ

もしゃもしゃ会で誰得な Stylus の Mixin ができた話

関西フロントエンドUG（KFUG）