第3回「Webの文章におけるWebフォントの実情」
2009年12月14日
翻訳元サイト：A List Apart
http://www.alistapart.com/
原文：Real Web Type in Real Web Context
http://www.alistapart.com/articles/real-web-type-in-real-web-context/
著者：Tim Brown
翻訳：中野恵美子
※本記事は「A List Apart」様より許可を得て翻訳、掲載しています
現在、ブラウザはWebページ上でのフォント利用をサポートし、またWeb上でフォントをライセンスできるようになった。ここではWebフォントの宣伝は置いておくことにして、自分のプロジェクトでフォントをどのように使うべきか、考えてみることにしよう。多くの人が待ち望んでいたWebサービス「Typekit」との連動などを含め、CSSの@font-faceプロパティに関するいくつかの実験を行った結果、私はひとつの重大な結論に達した。ディスプレイ上あるいはWebブラウザ上で、自サイト上でフォントがどのようにレンダリングされるかを知る必要がある、ということだ。そのため、私はWebデザイナーやタイポグラファーがフォントの見え方を確認できる無料リソース「Web Font Specimen」（http://webfontspecimen.com/）を作成した。
テストを目的としたマークアップやスタイルのサンプルは珍しいものではない。みなさんはおそらくすでに、W3CのHTMLエレメントサンプルや自作のものなど、役に立つリソースをブックマークしていることだろう。「Web Font Specimen」はそれらのサンプルファイルと非常に似ているが、ふたつの重要な相違がある。ひとつははフォントを扱うことのみを目的としていること、もうひとつは共有するためのものであるという点だ。
「Web Font Specimen」は、「Creative Commons Attribution 3.0」ライセンスのもとに入手できる。修正やイテレーション、改良は問題ないばかりか、期待もしている。このことについては、後半でフォントの売買に関して紹介する際に改めて取り上げることにしよう。
それでは「Web Font Specimen」がどのようなものか、そしてどのように使用するかを、簡単に見てみよう。なお、このアプローチがフォント販売者およびタイポグラファー、そしてWebデザイナーにどのような影響を与えるかということや、Webフォントのレンダリングの検討などについては後述する。
Web Font Specimen
「Web Font Specimen」にアクセスし、ZIPファイルをダウンロードしたら、ブラウザでHTMLファイルを開いてほしい。すると、このようなサンプルが現れるだろう。レンダリングはセットアップ状況により異なるはずだが、このサンプルはきちんと表示されているだろう（なお、これは通常のGeorgiaフォントだ。ほとんどの人がインストールしているだろうし、ディスプレイ上で見やすいようにデザインされたものだ）。
スクロールしていくと、Georgiaフォントが見だしやリスト、強調などで用いられていることがわかるだろう。ボディサイズの比較、異なる行間（文字の高さ）、グリフ見本、異なる横寸法（幅）、大文字や文頭1文字に大文字が入った場合の各サイズ、さまざまな濃度のグレースケール、白抜き文字、さまざまなカラーコンビネーションなどが掲載されている。見本内にこうした例を含めている理由は、「Web Font Specimen」のラベル付きスクリーンショットに並記されている。
スクロールしていくと、Georgiaフォントが見だしやリスト、強調などで用いられていることがわかるだろう。ボディサイズの比較、異なる行間（文字の高さ）、グリフ見本、異なる横寸法（幅）、大文字や文頭1文字に大文字が入った場合の各サイズ、さまざまな濃度のグレースケール、白抜き文字、さまざまなカラーコンビネーションなどが掲載されている。見本内にこうした例を含めている理由は、「Web Font Specimen」のラベル付きスクリーンショットに並記されている。
【図1】42pxのフォント見本
【図2】見だし、リスト、強調および行間
【図3】グレースケールおよびカラー、白抜き
簡単な点検をする
次に、Georgiaフォントをテストしたいフォントに置き換えてみよう。やり方については、ダウンロードファイル内のREADMEファイルに記載している。追加情報については「Nice Web Type」サイトの私の記事、「Where to get web fonts」と「How to use CSS @font-face」を見てほしい。
「Web Font Specimen」が、簡単にレイアウトするためのすばらしいリソースである、Nathan Smith氏の「960.gs」をベースに構築されたことに気付いた人もいるだろう。私が「Nice Web Type likes」でレビューを行った際、「960.gs」のtext.cssファイルが私たちのニーズにより適したものへと置き換えられていたのだ。
あとは結果をテストし、フォントのレンダリング結果が各種OSやブラウザで許容範囲内かどうか、判断するだけだ。
フォント販売者にとって何を意味するか
フォント販売者は、商品やサービスに対する巨大かつ新しいマーケットを突如獲得したことにより、ビジネスの変容期に直面している。もちろん、私たちWebデザイナーはずっと、自サイト上で活字を使用してきた。置き換えの技術、ALTテキストを使用した画像、そしてCSSで呼び出されるフォントは、タイポグラフィの驚くべき体験を生み出しもした（詳細は「Typesites」のWebサイトで詳述している）。しかし、私たちが印刷業界の人々と同様にフォントを扱うことはまれだった。なぜなら、私たちの体験はつねに、目的よりも手段に関係しているからだ。
低級なアートから脱する
長らくWebデザイナーは、健全なマークアップおよびアクセシビリティに関する知識に集中するかたわらで、フォントの美的かつ伝統的な可能性を最大限に受け入れたいと切望してきた。しかし、Webサイトにフォントを組み込む技術的な手法の性質上、Webフォントがディスプレイでどう見えるかについて予想することは難しかった。
私たちは活字をサイト内に組み込むことに忙しく、活字が組み込まれた際になぜそのように見えるのかを解明する機会がなかったといえる。結果、Webフォントのレンダリングはほとんど謎のままとなっていた。こうした状況に決着をつけようとするよりも、私たちはむしろ、Webフォントを（若干のすばらしい例外はあるものの）より低級なアートだとみなし、不満がたらたらな状態を続けてきたのだ。
フォントがWeb上でどう見えるかを示す
Webデザイナーが抱えている「印刷はWebよりすぐれている」というコンプレックスを克服するにつれ、フォント販売者は彼らがフォントのブラウジングやサンプリング、そして公正な利用を願っていることに気付いた。「Web Font Specimen」は、サンプリングしたいフォントを所有している場合に強みを発揮する。しかし、フォントがサンプルとして閲覧できない場合、そのフォントがWebプロジェクト内での利用に適しているかどうかをどうやって判断すればよいのだろう？
フォント販売者は、自分たちがCSSの@font-faceプロパティ用にライセンスするフォントについて、実際の文章で閲覧可能な何らかの方法を提供する必要があるだろう。私は「Web Font Specimen」を体験版として活用してほしいと思っている（心から、そして法律的にも）。フォント販売者にそうしてもらうことを望むのは、フォントがWeb上でどのように見えるのかを確認したいというニーズばかりでなく、フォントの調整やイテレーション、改善により「Web Font Specimen」がよりよいものになるからだ。Webデザイナーは、フォントのプロがフォントについてどのように考えているかを観察し、アドバイスを利用することで調整いくことになるだろう。
タイポグラファーにとって何を意味するか
もしフォント販売者が、自分たちのフォントがWeb上でどのように見えるかを示せない、もしくはWeb上で見せたくない場合、当然タイポグラファーが伝えたいフォントのニュアンスは紹介できない。よってWebデザイナーが抱くフォントレンダリングの期待に応じることは、有意義な挑戦といえよう。タイポグラファーが描く美しい文字と、Webサイト上で私たちが見る文字との間には、まだまだ多くの障壁があるのだから。
グリフからWebフォントまで
「Typophile」のいくつかのスレッドで、このテーマについて知識のある人々と話し合っていると、私はフォントが、タイポグラファーが制作した数学的なポイントとカーブから、「Web Font Specimen」のグリッドにフィットしたシェイプに至るまでの過程にいくつかの試練を実感してきた。以下に挙げるのは、そのステップに関する私のワーキングリストで、多少の提案を受けて改善しており、David Berlow氏に「全体的にかなり良い」と評価されたものだ。
-
1 グリフはベジェ曲線に基づくシェイプとしてスタートする。
2 このシェイプはFontLabのようなフォント作成ソフト上で作成もしくは入力される。
3 UPM（units per em）、主要な寸法（エックスハイト、大文字の高さ、アセンダおよびディセンダなど、垂直寸法用）、メトリックス（サイドベアリングやカーニングなど、水平寸法用）といったセッティングは、たとえば所定のサイズでどのくらいの空間を占めるか、ほかの文字とどの位近接できるかなど、その字形がフォントでどのようにグリフの役目を果たすかを決定する。
4 理想に満たないアウトプットが使用されるはずの環境で、フォントのデザイン・キャラクタを保護する方向を定めることができるような、ヒントやインストラクションを追加する（自動的および手動、もしくはそのどちらか一方で）。
5 グリフはフォントの一部として、OTFフォーマットもしくはTTFフォーマットで（ここで私はほかのあらゆるフォーマットを無視している。もしそうすべきでないとお考えなら連絡してほしい）エクスポートされる。TrueTypeのヒントは、そのフォントがOTFの場合、無視される。
6 グリフはOSレベル、ブラウザレベルのレンダリングアルゴリズムに直面している。私は、自分でこれらの組み合わせをリストしようとしているところだ。OSレンダリングエンジン、ブラウザレンダリングエンジン、コンビネーションの結果（オーバーライド、無視されたフォントデータ）などのヘディングをもつ、QuartzやClearTypeのようなクロスリファレンス技術がほしくなるかもしれない。
7 （ブラウザ設定、OS設定など）複数の場所でのユーザー設定により、レンダリングエンジンがフォントファイルと相互作用する方法や時期を修正できるようにする。ユーザーはアンチエイリアス処理を完全にオフにすることが可能。特定の設定が、アンチエイリアス処理が適用されるサイズを制限可能にする。これらの変数をリストすることも、私のTodoリストにある項目のひとつだ。
8 最後に、ユーザーのハードウエアに関する物理的なクオリティがある。たとえば、使用しているディスプレイの種類、解像度、ネイティブの解像度で動作させているか否か、カラー設定および光度設定などだ。
4から6までは重要で、ぜひ確認してほしい。これらのファクターは、タイポグラファー、特に独立系の店舗にとって致命的となる可能性がある。フォントのクオリティを、ディスプレイ上のレンダリングのみで判断するWebデザイナーの目には、フォントが異なるOSやブラウザでどのように見えるかについて重要な意味を持っているからだ。
詳細には触れないが、可能なレンダリングアルゴリズムの組み合わせは、たいていの場合ふたつ方法のどちらかに帰結する。すなわち
1 レンダリングエンジンがタイポグラファーのヒントを無視してやりたいようにするが、フォントデザインに忠実なままなので、通常は見ばえのよい結果となる（これはAppleの場合）
か、もしくは
2 レンダリングエンジンがタイポグラファーの複雑なヒントに依存して、理想的な読みやすさのためにその情報を利用しようとするものの、フォントが目的に合うようにデザインされ、ヒントを与えられた場合にしか見ばえがよくならない（これはMicrosoftの場合）
のどちらかになるということだ。
タイポグラファーにできることは何だろうか？ 3つある。自分たちのフォントを、異なる環境でも見ばえがよくなるように準備する（これはかなり難しいし、時間がかかるが）、フォントレンダリング標準化のためのキャンペーンを展開する、あるいは仕事を失う、という3つだが、酷い選択肢だ。
しかし、タイポグラファーがフォント標準プロジェクト的なものを立ち上げようと思ったら、熟練した擁護団体や熱烈な協力者が見つけられることは確かだ。
Webデザイナーにとって何を意味するか
私たちはすでに、Webデザイナーが果たすことのできる役割について学んできた。私たちはWebにおけるフォントの扱いが劣悪であるという汚名を、Webフォントを受け入れることで返上しなければならない。そしてもし、タイポグラファーがそこに価値を見いだすなら、私たちはもう一度、ディスプレイ上のフォントレンダリングに変化をもたらせるかもしれない。
同時に、私たちは現時点でサイト内のフォントの見ばえがよいことを再確認すべきだ。
「Web Font Specimen」のコピーにお気に入りのフォントを通し、複数のブラウザでテストし、その見ばえに満足するならすばらしいことだ。それこそ、私たちが使用するフォントの理想形だ。しかし、見ばえが気に入らなかったらどうだろう？ 次に何をすべきだろうか？
フォントレンダリングが不十分だった場合
私たち（そして訪問者）がラッキーならば、ディスプレイ上でうまくレンダリングされる、別のフォントが見つかるかもしれない。新興成長市場ではあるものの、異なる環境でも非常にうまくレンダリングされる、完全に調整されたフォントはすでに存在しているし、今後も増えていくからだ。しかし、多くのタイポグラファーは自分たちが作成したフォントを微調整する経験をもっていないので不利な立場に置かれることになり、逆に経験のあるタイポグラファーは成功するだろう。
探しているものとは異なるフォントを選ばなければならない場合、がっかりするかもしれないし、あるいはよい結果が得られるかもしれない。そのプロジェクトがブランドベースのガイドラインに従う場合など、特定のフォントを利用することに依存している場合、置き換え時に行き詰まるかもしれない。
どれだけのフォントが複数のOSやブラウザでレンダリングされるか、ということに関して、何らかの標準を受け入れるレンダリングエージェントが変化を起こすのか、完全に調整された厳選フォントから変化が起きるかに関係なく、以下に挙げるのが、私たちの多くがCSSの@font-faceでフォントを使う際に直面する現実的な選択だ。
-
●異なる訪問者に異なるフォントを出すための、何らかの条件付きロジックを使用する。
●一部の訪問者を無視した状態でレンダリングする。
●リプレースメント技術を使い続ける。
さらに前進するために
変化を起こすために私たちができる最良のことは、まず最初に直面している難問を理解することにより、よりよい方法を模索することだ。Web上でフォントがどのように見えるかを知るためには、よい見本が必要だ。私は本記事と「Web Font Specimen」が、みなさんにとってこうした行動を容易に、そして楽しいものにする役に立てればと思っている。そして、何らかの価値を見いだしたなら、私たちの共同の利益のため、印刷フォントおよびプラクティスの改良のために活用してもらえれば、とてもうれしい。
［INDEX］
>>> 第1回 Twitterの効果的な背景画像：事例と現行のプラクティス
>>> 第2回 Coming Soonページをデザインする
>>> 第3回 Webの文章におけるWebフォントの実情
>>> 第4回 CSS3を使ったより強く、より良い、より手軽なデザイン
>>> 第5回 パワフルなCSS/JavaScriptテクニック45
>>> 第6回 Web制作が楽しくなるCSS3/JavaScriptのテクニック50
>>> 第7回 手軽にWebを彩るCSSコーディングテクニック50
>>> 第8回 最近注目を集めているJavaScript/jQueryのツール・テクニック45
>>> 第9回 2010年上半期Webデザインのトレンドまとめ
