Webでも見出しだけでいいからカーニングをしたい話
デザインだったりDTPだったりその辺りの諸々を多少はかじってる人間が、フロントエンドをちょっと触った時に毎度のように悩むあるある。
ちょっと前に調べた時にはそんなことはできませ〜ん! という感じだったので、いつもはわたしも放置してたんですけど、さすがに気になってしまったので今回初調整。調べてみたら思っていたより技術が進んでいて、結構皆さんどうにか試みているご様子。みんなわりとゴリラみたいなコード書いてるイメージあったんだけどもうそうでもないっぽい? ゴリラになりました。
自分だってどこかしらどうにかできることはあるだろうと、思って、思って頭を悩ませキーボードを叩き続けたら、できたにはできたけどこれはさすがにどうなんだ……? となったので書いておきます。
プロパティfont-feature-settingsを使ってみた
使い方は簡単!CSSで値を指定するだけ!
* { font-feature-settings : "palt" 1; }
ところがどっこい詰まらない! 世界はそんなに甘くなかった。調べてみると条件が2つほどあるご様子。
ざっくり解説すると
- OpenTypeフォントでないと適用されない。
- プロポーショナルメトリクスを含まないフォントは適用されない。
詳しくは下記の記事が検証解説してくれています。
気づかぬうちにフロントエンジニアも約物とかリガチャとかいう単語を使う時代になっていた。
追記:ていうかAdobeもOpenTypeのCSS構文ガイド出してるじゃんすごい。
己の取り残されようを猛省しつつなるほど〜となったので次。
プロパティletter-spacingを使ってみた
* { lletter-spacing : -10px; }
あっできた。普通に詰まった。
でも全体に適用されちゃう! 一文字一文字自分で詰めた〜い! ということで書いたものが以下参照。
.spaced-out{ letter-spacing: -2px; } .spaced-out-at{ letter-spacing: -10px; } .spaced-out-under{ letter-spacing: -4px; } .spaced-out-s{ letter-spacing: -5px; } .spaced-out-k{ letter-spacing: -5px; } .spaced-out-r{ letter-spacing: -5px; } .spaced-out-y{ letter-spacing: 0px; }
<h1><span class="spaced-out"><span class="spaced-out-at">@</span><span class="spaced-out-under">_</span><span class="spaced-out-s">s</span><span class="spaced-out-k">k</span><span class="spaced-out-r">r</span><span class="spaced-out-s">s</span><span class="spaced-out-k">k</span><span class="spaced-out-y">y</span></span></h1>
いや何をどう見てもヤバコードでは? 人類文字詰めしたい人間たちみんなこんなの書いてるの?
追記:px
で絶対指定もできるけどem
で相対指定にもできるらしい。どちらにしろ一文字ずつ丁寧にやろうとするとゴリラになるけど閲覧環境考えると後者のほうが良さげな感じ。
スクリプトFLAutoKerning.jsの導入
HTMLで文字詰めするタイポグラフィー用JS | fladdict
めちゃ強そうなスクリプト組んでる人いた! こりゃあすごい!
とはいっても上のゴリラコードでどうにかなってしまっている。だってな〜見出しだけだしな〜。
今日は疲れちゃったのでここまでにしておいて、近いうちにまた記事にします。 いかんせん明日は月曜日!さあさあご飯食べてレポートするぞ〜!