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

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

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

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

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

例えば、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シリーズを扱っています。

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

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

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

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

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体を使用すると、文字の判別がしやすく、テキストがとても読みやすくなります。

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

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

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

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