「CSS Nite After Dark 12 - 今、そこにあるWeb Fonts」に行ってきた

「CSS Nite After Dark 12 - 今、そこにあるWeb Fonts」に行ってきた。楽しかった。

• CPI x CSS Nite x 優クリエイト「After Dark」（12）（2014年7月17日開催）

セッションはこんな感じ。

• 日本語ウェブフォントのいままでとこれから(関口 浩之)
• 2014年版Webフォントの使用方法とこれまでの歩み(酒井 優)
• Webフォント導入のポイント ～実際の導入事例から～(太田 良典)

フォローアップも公開された。

• CPI x CSS Nite x 優クリエイト「After Dark」（12）のフォローアップを公開します | CSS Nite公式サイト
  • 関口 浩之さん（ソフトバンク・テクノロジー）
  • 酒井 優さん（WEBCRE8.jp）
  • 太田 良典さん（ビジネス・アーキテクツ）
  • 阪本さん（モリサワ）

日本語ウェブフォントのいままでとこれから(関口 浩之)

AfterDark12-s1 from CSS Nite on Vimeo.

海外のWebFontsのサービスはたくさんある。そして海外のWebサイトではWebFontsがたくさん使われている。

日本語の文字はたくさんあって、いろいろな種類がある。文字の多い、グリフの多い日本語だからこそ、フォントによって表現が大きく変わると思う。

日本語のWebFonts、すごく使いやすくなってきてる。簡単に使えるし、日本語のフォントでもサブセット化されたフォントファイルが利用できるし、速度も速くなっている。サービスを提供してくださっている方々の、並々ならぬ努力の賜物。うれしいね。

2014年版Webフォントの使用方法とこれまでの歩み(酒井 優)

AfterDark12-s2 from CSS Nite on Vimeo.

資料はこちら。

• 2014年版Webフォントの使用方法とこれまでの歩み

こちらはセッションのベースとなっている酒井さんのエントリ。

• WebフォントのCSS指定2014年度版とこれまでの歩み - WEBCRE8.jp

こちらに書かれていることに加えて、実際にフォントを作って、それをどうやってWebFontsとして利用するか、利用できるのか、といったことが解説されていた。

和文、欧文フォントを自分で作る人は少ないだろうけど、アイコンを作る人は多いと思う。アイコンフォントを自分で作れるようになると、便利そうだなーと思った。僕はそもそもアイコンも作れないけど。

Webフォント導入のポイント ～実際の導入事例から～(太田 良典)

AfterDark12-s3 from CSS Nite on Vimeo.

BA(Bussiness Architects)さんでの実績をいろいろ紹介していただいた。

日本語WebFontsを使うときの、一瞬デバイスフォントが出る問題(FOUT / Flash of Unstyled Text)対策はどうしてるのかなーと思ったら、他にもインタラクションの多いページだったので、ローディングを出しているとのことだった。FOUTに対する本質的な解決方法ではないけど、合理的な現実解だと思う。僕も同じコトやると思うし。

文字の扱いにはこだわりがあるということで、カーニングをデザイナ、フロントエンドエンジニアが協力して頑張ったとのこと。ソースを見てみたらすごかった。

$dainichiCopy.eq(1).css({letterSpacing: '0.06em'});
$dainichiCopy.eq(2).css({letterSpacing: '0.08em'});
$dainichiCopy.eq(3).css({letterSpacing: '0.08em'});
$dainichiCopy.eq(4).css({letterSpacing: '0.18em'});
$dainichiCopy.eq(5).css({letterSpacing: '-0.04em'});
$dainichiCopy.eq(8).css({letterSpacing: '-0.06em'});
$dainichiCopy.eq(12).css({letterSpacing: '-0.10em'});
$dainichiCopy.eq(13).css({letterSpacing: '-0.08em'});
$dainichiCopy.eq(14).css({letterSpacing: '-0.16em'});
$dainichiCopy.eq(15).css({letterSpacing: '-0.18em'});
$dainichiCopy.eq(18).css({fontSize: '85%'});
$dainichiCopy.eq(19).css({letterSpacing: '-0.08em'});
$dainichiCopy.eq(20).css({letterSpacing: '-0.06em'});

これが正しいのかどうか、なんとも言えないけどすごい。

BAさんのトップのロゴはWebFontsなんだって。「B」の⽂字が「BA」というグリフを持っているそう。これはカーニングを一定にするためだと思う。HTMLではBA記述して、Aにはグリフがないみたい。たぶん。おもしろい。

• BA

懇親会

人見知りするけど、今回は聞いてみたいことのほうが勝って、いろんな人に質問してみた。例えばこんなこと。

• 日本語WebFontsで、ダイナミックサブセットされる場合、リガチャとかカーニングとか、font-feature-settingで設定できるような機能はちゃんと使えるの？
  • ダイナミックサブセットの場合は、けっこう利用できるみたい。でもいろんな機能があるから、もしうまく動いていないものがあれば、どんどん要望を上げてほしい、

そのほか、モリサワのかたにもいろいろお話を伺えたし、偶然、好きなフォントを作っている方とお話することもできて、感動した。好きなフォントやあれこれ書き出すと、長くなるので割愛。

まとめ

Windowsできれいな明朝体が表示されていたら、つい調べちゃう。調べてみると画像でがっかりするけど、WebFontsを使っているサイトも増えている。何気なく見て、あ、これWebFontsだったんだ、と思うことが増えてきた。

Webサイトで適用されているWebFontsの確認方法は、モリサワの阪本さんのお話でも出てきたけど、最近ではブラウザでけっこう細かく確認できるので、そっちもおすすめ。こっちに書いた。

• ブラウザでレンダリングされているフォントを確認する - console.blog(self);

TypeSquareで、1ドメイン、1フォントが10000PVまで無料で利用できること知ったので、すぐに登録して自分のページに適用した。日本語WebFontsが、すごく使いやすくなってる。やっぱり一瞬デバイスフォントが表示されちゃうけど、思っていたよりも速かった。いい感じ。

FOUTやフォントのローディングついては、こっちであれこれ書いた。

• CSS Font Loading Module Level 3を試してみた - console.blog(self);

FONTPLUSやTypeSquareで、Source Han Sans Japanese / 源ノ角ゴシック / Noto Sans Japanese を扱ってくれて、できれば無料で使えたりすると、すごくうれしいなーと思う。ただ、なんでも無料になればいいと思っているわけでもないので、いろいろ考える。

なんにせよ、Webとフォントの距離が縮まっていることを実感できて楽しかった。