グラフィックデザインにおいて、レイアウトデザインというのは花形です。素敵な写真を使い、フォントを選んで、レイアウトする。みんながイメージするグラフィックデザインとはコレ。
実はその影にグラフィックデザイナーにとって、重要な作業があります⋯⋯それが「文字組版」。
この作業が表舞台でることは基本的にないです。その理由が「とにかく地味で、やっても気づきにくい」から。それでも文字組版をしないデザイナーなんて絶対にいません。（いないと信じたい）
これは料理でいうところの「下ごしらえ」。野菜の面取りや魚の臭みとりなど「やらなくても食べれる」けれど、プロなら絶対にやります。それは出来たものにしっかりと反映されるからです。
つまりブログの文字組みが気になるのです⋯⋯。
CSSでも文字組版は可能
そんなわけでグラフィックデザイナーにとって、文字組版とは必須作業なのですが⋯⋯Webはとにかく文字まわりが苦手！他のブログならとにかく、自分のブログテキストがベタ組みというだけで「ああぁぁぁ！」ってなるわけです。
しかもCSSがあまりにも融通がきかないので、カッとなってTwitterでグチってしまう始末。
つまり文字組みをさせてほしい！特に約物がとっ散らかるのが気になってしかたないよー！！
— ちゃんたま (@chantama14) September 12, 2018
そして次の日、冷静になって調べたら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番の理由は、私と同じく紙媒体メインのデザイナーさんが、文字まわりで困ったー⋯って時に役に立てばいいなーくらいで書きました。あと自分用の備忘録として。
もちろんブログのカスタマイズでも役に立ちますので、ぜひ参考してもらえれば。
コメントを残す