CSSでプロポーショナルメトリクスと自動カーニングをしたい

cssメイン画像

グラフィックデザインにおいて、レイアウトデザインというのは花形です。素敵な写真を使い、フォントを選んで、レイアウトする。みんながイメージするグラフィックデザインとはコレ。

実はその影にグラフィックデザイナーにとって、重要な作業があります⋯⋯それが「文字組版」

この作業が表舞台でることは基本的にないです。その理由が「とにかく地味で、やっても気づきにくい」から。それでも文字組版をしないデザイナーなんて絶対にいません。(いないと信じたい)

これは料理でいうところの「下ごしらえ」。野菜の面取りや魚の臭みとりなど「やらなくても食べれる」けれど、プロなら絶対にやります。それは出来たものにしっかりと反映されるからです。

つまりブログの文字組みが気になるのです⋯⋯。



CSSでも文字組版は可能

そんなわけでグラフィックデザイナーにとって、文字組版とは必須作業なのですが⋯⋯Webはとにかく文字まわりが苦手!他のブログならとにかく、自分のブログテキストがベタ組みというだけで「ああぁぁぁ!」ってなるわけです。

しかもCSSがあまりにも融通がきかないので、カッとなってTwitterでグチってしまう始末。

そして次の日、冷静になって調べたらCSSでも文字組版が対応してることを、いまさら知るわけです⋯⋯ああ恥ずかしい!

ある程度までならIllustrator(以下「Ai」)やindesign(「Id」)のように、文字組版を簡易的になら調整できそう。

CSSの機能対応表

Ai & Id CSSプロパティ
プロポーショナルメトリクス font-feature-settings : “palt”
自動(カーニング) font-feature-settings: ‘kern’ 1;
text-rendering: optimizeLegibility;
字間 letter-spacing
行間 line-height

とりあえず上記4つがあれば、文字まわりの基本調整は問題ない。約物たちもプロポーショナルメトリクスが良い感じに流してくれる。

私は自動(カーニング)は使用していません。OpenTypeフォントでも対応も少なく、マイナーなプロパティなのでスルーしました。

使用条件

  • OpenTypeフォント
    OpenTypeフォントでも上手く機能しない場合あり。個々人の使用フォントとの対応状況を確認。

  • ブラウザの対応
    閲覧者の環境なのでここはしょうがない⋯⋯。

ブログへの反映

おー!プロポーショナルメトリクス効いてる!これでだいぶ気持ちよい文字組みになってきた⋯⋯視認性がグンと良くなるなー、テンション上がる。

ほら、ピンチアウトしてみてください!文頭の約物とか気持ちいいし、カギ括弧とか最高!
(左:適用前/右:適用後)
プロポーショナルメトリクス適用前後

OpenTypeフォント「游ゴシック」

ちなみに私の使用しているWordPressテーマ「ストーク」は「游ゴシック」が指定されています。

游ゴシックはOpenTypeフォント。しかも今回のCSSプロパティと互換性バッチリ。フォント的にも仮名が小ぶりなので、プロポーショナルメトリクスの恩恵も大きい。

モリサワのWebフォントが無期限で無料

デザインをかじった方なら、標準フォントのMS Pゴシックやヒラギノ角ゴ Proではなく、モリサワやフォントワークスなどのフォントが使いたいですよね。

ただモリサワだとサブスクリプションで月2千円〜⋯⋯普通に高すぎる。

エックスサーバー

さっき調べてて知ったんですが、レンタルサーバーのエックスサーバー(wpXレンタルサーバー)が全プラン、モリサワの30フォントが無料・無期限に使えたって知ってました?
私使ってるのにぜんぜん知らなかった⋯⋯。

もしエックスサーバーの方がいましたら、モリサワのスタンダードなWebフォントは網羅されていますので、ぜひ使い倒してやりましょう!もちろん文字詰めにも対応してますよ。

WordPress紹介系ブログとかに、そんなことどこにも書いてなかった⋯⋯デザイナーからするとモリサワフォントがタダとか、本当に信じられないよ!

というかエックスサーバー X10の1年プランが月割りで1250円だけど、もうフォントの値段で月額分チャラになってないコレ?

導入後発を逆手にとって、遊び心あふれる[フォント総選挙]を実施! ユーザーとの距離を縮めた『エックスサーバー』

モリサワのWebフォントが無料で手軽に使える!「Webフォント」機能提供開始のお知らせ

まとめ

漫画のレビューを書いてたはずが、なぜかデザインとCSSの記事になってた。漫画レビュー記事の手が止まって、ブログデザインをイジってたら熱が入ってしまった。

正直なところプロポーショナルメトリクスだけやっても、ブログデザインが良くなったりしません。あくまで土台づくり、まずはデザインありきです。

それでもブログなどで読みやすさを向上するなら、プロポーショナルメトリクスはやる価値のある機能なので、ぜひ試してみてください。

フォント大好きデザイナーへ

これを書いた1番の理由は、私と同じく紙媒体メインのデザイナーさんが、文字まわりで困ったー⋯って時に役に立てばいいなーくらいで書きました。あと自分用の備忘録として。

もちろんブログのカスタマイズでも役に立ちますので、ぜひ参考してもらえれば。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です