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

今年の 7 月頃からほぼ毎月のように参加させてもらっていて、インプットばかりで一度もアウトプットしていなかったのでほのぼのと書きます。

この記事は [関西フロントエンドUG Advent Calendar 2015 – Qiita](http://qiita.com/advent-calendar/2015/kfug) の 12 日目の記事です。

—-

関西フロントエンドUG(KFUG)

KFUG 中の人より「関西フロントエンドUGのこれまでとこれから」

イベント告知ページ

主に JavaScript 界隈の話がこれとあれとあとついでにこれも食えって感じで、けっこうな量を、それもほぼ毎月聞けて、間々に CSS やらデザインワークのセッションもあり、ほんとフロントエンドてぇへんだっていうのを味わえるコミュニティだなって思います。楽しいです。

もしゃもしゃ会

もしゃもしゃ会についてはコミュニティページの冒頭に書いてます。

Webデザイン もしゃもしゃ会

上のリンク先のページにも書いてますが、

もしゃもしゃ会は特に今日はこれをしましょうーとか決められていないもくもく会みたいな勉強会ですが、[tamsatake](http://connpass.com/user/eigakisetu/) さんが発表されている、実際のもしゃもしゃ例をご覧ください。

模写のやり方の例

自分はデザイナーではないのですがこの取り組みすごく良い!もしゃもしゃなら自分でもできそうって思い、稀にデザイナーさんになにか助言することもあるので参加してみました。


文字と文字の間

先日は実際にある 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)にさくっと参加してみると、

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

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

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

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

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