Q&A:Dan Rhatiganがウェブフォントについて語る

Fine tuning fonts
Just seeing pro doesn't mean it’s going to have OpenType features.

ウェビナー「プロが教えるウェブフォントの選び方」では、書体デザイナーのDan Rhatiganがインターフェイスでのフォントに関する厳しい条件について説明。フォントのサイズから間隔、色、スタイルに至るまで、スマートなウェブフォントの作成に関する実用的なアドバイスを教えてくれました。プレゼンテーションの後、参加者からの質問に答え、ウェブフォントの選び方、購入前にフォントを試すことのできる便利なツール、エンベッドアプローチについて解説しています。下記の概要をご参照ください。

本文コピーでの書体の色について、何かお勧めはありますか。

長い文章の場合は、読者にじっくり読んでもらい、気が散らないようにしたいですから、白の背景に黒字が一番良いでしょう。レンダリング環境では、黒字のテキストが画面でできるだけくっきりと見えることを目的に調整されています。白の背景にダークグレーの文字で読みやすい例も多くありますが、それは黒と白の組み合わせと同じことです。つまり原則として、背景と文字のコントラストが高いほど読みやすいのです。ですから、黒い文字をダークグレーにしても構いません。ダークグレーでも可読性はかなり高いです。しかし、文章が長くなると、それが若干難しくなります。だいたい1段落程度なら、多少コントラストが低くても可読性に影響はありません。

How ligatures work

ウェブフォントでは、イタリックはデザインし直し、文字間にさらに余白を加え、画面を埋め尽くさないようにしてあるのではないですか。

 

フォントがウェブ用にデザインし直されている場合だけです。ウェブフォント用と呼ばれているからといって、必ずしもウェブで見栄えがするようにデザインされているわけではありません。デスクトップ版のフォントを、ウェブ表示用に調整したという意味なのです。ですから「ウェブフォント」という呼称が保証しているのは、フォントデータがウェブブラウザで表示可能ということだけで、ヒンティングの (鮮明に見えるようソフトウェアのレイヤーが追加されている) 場合もあります。

例えば、ITC Galliard® Italicはウェブフォントです。しかし、ITC Galliard® ItalicをITC Galliard® eText Italic [上図] と比較すると、eText Italicが再デザインされ、オープンでクリアになっているのがわかるでしょう。ファミリーを見てどのスタイルがウェブで使えるのかを考えるだけではなく、例えばそのイタリックがウェブでやりたいことに適切なデザインなのかどうかを自分の目でしっかりと見て、判断しなければなりません。PMN Caecilia® eTextもウェブ用に再デザインされたもので、画面上のテキストにぴったりの書体です。slab serif体ですから低コントラストで、イタリックでも細くなりません。serif体もあり、鮮明さを維持できます。

フォントがウェブ用に再デザインされたかどうかを見分ける方法はありますか。

開発者が時間をかけて画面で読みやすいよう書体をデザインしたり、再デザインしていれば、自慢して宣伝するからわかります。再デザインは書体デザインのクオリティとしても重要で、セールスポイントですから、消費者に是非知って欲しい点なのです。Monotypeフォントの場合、名前にeTextが付いていれば、これは大きく安定性を持たせ、ウェブのテキストサイズで鮮明な表示ができるよう一から再デザインされているという意味です。Hoefler & Co.はScreenSmartコレクションを、Font BureauはReading Edgeシリーズを扱っています。

今までデスクトップフォントでは存在していなかった、まったく新しい書体はどうですか。画面上での使用のために最適化された、高品質のウェブフォントと思って良いのでしょうか。

 

必ずしもそうとは言えません。デザイナーは様々な目的で書体をデザインするからです。ですから、大切なことを説明します。

  • ここに挙げる例のように多くのフォントを見て、目のトレーニングをしてください。フォントが読みやすいかどうかを判断する最適な方法です。自分の目を信頼し、多くの例を見ることです。
  • ブラウザでウェブフォントを試し、うまく表示され、環境や作業に適していることを確認してください。テストを重ねることで、それが最適な選択であるかどうかをしっかりと判断することができます。
Contextual alternates

フォントを購入する前に画面上でウェブフォントをいろいろなサイズでプレビューできるツールで、お勧めのものを紹介していただけますか。

MonotypeのTypecastを試してみてください。ブラウザベースのウェブデザインツールで、Monotype、Fonts.com、MyFonts ウェブフォントライブラリすべてとその他のプロバイダのフォントライブラリを収録しています。サインアップは無料で、書体のプレビュー、設定、スケーリングでき、ウェブページのプロトタイプの作成もできます。Photoshop カンプで作業するのではなく、ブラウザで書体を見て、実際にどのように表示されるかを確認できるのは、素晴らしいことです。

@font faceを使ってフォントを埋め込むのと、Javascriptでライブラリに持ってくるのとどちらが良いでしょうか。

 

基本的には、@font-faceよりキットの方が良いでしょう。Typekitに、この件に関するとても良いブログ記事が掲載されています。Javascript/キットには、多くの利点があります。

  • Javascriptにより、ページ上で何が起きているか判断できます。「フォントの読み込みができているか。まだ?じゃあ、クラスを追加して、フォールバックスタイルを適用してFOUTに対処しよう。」
  • キットを使用すれば、クロスブラウザーの心配がなくなります。ウェブブラウザは、一定のフォントファイルタイプのみに対応しています。複数のフォールバックファイルから自分で選定する代わりに、キットが自分の@font-faceルールに準じたファイルを特定して読み込んでくれます。
  • プロバイダキットからのフォントは、自分でホスティング(@font-faceを使用したときによくある) するのではなく、一般には超高速のCDNでホスティングされます。プロバイダによっては、使用するCSSに生フォントデータを埋め込み、HTTPリクエストを削減してパフォーマンスを向上させます。
  • プロバイダから与えられたキットを使用した場合は、そのフォントはウェブ上での正式使用許可ライセンスが付いているという事です。

@font-faceと比較した際、Javascriptを使用する場合の明確なデメリットは、ユーザーがブラウザでJavascriptを無効にしている場合にフォントが読み込まれないという点です。ただし、この可能性はかなり低いのです。その理由は、1) Javascriptは、現在のインターネットに不可欠の技術であること。2) Javascriptを無効にすると、ウェブブラウジングそのものの機能が大幅に損なわれ、フォントが読み込まれないどころの問題ではなくなるからです。

長いアンケートなどの長文のコンテンツにお勧めのウェブフォントは何ですか。Helvetica®ですか。

いろいろなオプションが考えられますが、長文の場合はすごく小さなテキストサイズでの読みやすさを最大限に考え、大文字のI、小文字のl、数字の1など、読み手が混乱しがちな文字を簡単に判別できるようにしたいものです。

Helvetica®はかなり良い選択肢ですが、それを若干調整したNeue Helvetica® eTextの方がはるかにクリアです。ですから、読みやすさが長所になっています。けれども、前述した文字の可読性は少し厄介です。これはsans serif体の多くに共通する問題です。

個性を出したい場合は、2階建てのAや2階建てのGなどのディテールのあるはっきりとしたsans serif体を使用すると、文字の判別がしやすく、テキストがとても読みやすくなります。

Ligatures

プレゼンテーションで2種類のウェブフォントのオーバーレイを見せていただきましたが [上図参照]、同じサイズなのですか。

まったく同じフォントサイズです。2行目は、行の高さがゼロになっていますから、重なっています。しかし、書体の描画で、テキストのサイズがいかに違って見えるかをうまく表しています。ある書体の16pxは、別の書体の16pxより大きく見えたり、小さく見えることがあります。デザインのプロポーションそのものが、実際に見えるサイズに大きく影響します。

インターネットで常にきれいに表示できる主力のウェブフォントは何ですか。

優れたフォントは一番人気が出ますから、MyFontsやFonts.com、その他のポータルのベストセラーになっているフォントから始めるのが良いと思います。低コントラストで大きく、ゆったりとプロポーションをとったsans serif体をよく見かけます。Helvetica®やFrutiger®、Museo Sans、Brandon Grotesqueなどです。通常、くっきりとしてオープンなタイプが画面上のテキストに最適です。

Kerning

デザイナーとプログラマーとの間の考え方の差を埋めるのが難しいことがよくあります。ウェブデザイナーがプログラマーに行間や文字間隔を指定するにあたって、ベストな方法は何ですか。

Typecastに戻りますが、馴染みのあるフロントエンドの視覚コントロールを使用し、ブラウザでページのプロトタイプ作成ができます。デザイナーは目で見ながら作業をしますが、バックグラウンドではCSSとHTMLの作業が行われています。レイアウトを希望通りに仕上げたら、HTMLとCSSを出力し、デベロッパーに渡します。これが、自分が制作したデザインの詳細記録になります。デベロッパーは、そのPhotoshop カンプを解釈する手間が省けるわけです。「そのテキストはこのサイズかな、あのサイズかな」「それは同じ書体なのかな、それともちょっと違うのかな」「行の長さは480px or 500px相当かな」などと考える必要がなくなるのです。

私は、代理店や出版社で数多くのプレゼンテーションに出席し、デザイナーとデベロッパーの両方がいるチームに、まさにこの質問について説明し、Typecastの仕組みを紹介してきました。毎日、現場でこのような問題に取り組んでいるチームは、このツールによって可能になる内容を知り、本当に喜んでいました。デザイナーにもう少しビジュアル的な思考で作業してもらいながらも、デベロッパーが理解できるCSS構文でこれらの決定事項を説明し、デザインを納品が出来ることに、多くの感嘆の声があがりました。納品後の訂正の手間が省け、デザインと開発プロセスが密接になるのです。

PMN Caecilia®などのストロークのコントラストが少なく、はっきりとした角度のserif体は、sans serif体と同じように画面映えがします。

ウェブサイトでは、serif体とsans serif体のどちらが良いですか。

Serif体のフォントは、書体デザインとしてディテールが細かいので、ウェブやインターフェイスではやりにくいと思います。これはテキストサイズが1em/12px–16px の場合です。Serif体を使うのであれば、Century®、PMN Caecilia®、Clarendon®、Georgia®のような低コントラストでディテールがくっきりしていて、直線でしっかりした角度のserif体を検討してください。今挙げたものは、ディテールが細かすぎず、比較的扱いやすいものです。特に本文テキストには、Didot®などの線が細すぎる書体は避けましょう。

ウェビナー「プロが教えるウェブフォントの選び方」を参考にしてください。