タイトルは誇張ではありません。僕も読み始めたときは何のことなのか分かりませんでしたが、途中で出てくるコードを読んで、やっと分かりました。「本当に、これは今のWebデザインやCSSを変えるかもしれない」と。元記事は、A List Apart: Articles: CSS @ Ten: The Next Big Thingより。著者はCSSそのものの草案者であり、今はOperaのCTOを務めるHåkon Wium Lie氏です。
追記 id:iwaimさんのはてブコメントに対する返答を文末に書きました。（2007年9月11日19時ごろ）
CSS @ Ten: The Next Big Thing
CSS は去年10年の節目を迎えた。このような節目は、過去に立ち返り、未来の計画を立てるための機会である。CSSは構造から見た目を分離することによって、根本的にWebデザインを変えた。CSSはデザイナーに正しくマークアップすることでデザインもよくするという、一連のプロパティを提供した。そして、 CSS3はデザイナーの要望によってプロパティの追加を行っている。
古いものであれ新しいものであれ、多くのCSSのプロパティは、テキストに関わるものだ。テキストのカラー、位置、スタイル、読み方の方向を扱っている。それらは全部素晴らしいものだ。結局のところ、私たちのスクリーンの大部分はテキストなのだから。しかし、テキストの真の可能性を引き出すプロパティを用意するためには、私たちはフォントのうまい選択を必要とする。けれど、フォントはWebからほとんど見当たらなくなってしまっている。
CSS Zen Gardenにいるデザイナーたちに目を移してみよう。彼らのデザインがこんなにも興味深く見えるのはなぜなのだろう？1つには、バラエティ豊かなフォントの存在だ。フォントはデザインのメッセージを運び、効果を作り出す。伝統的な紙媒体のデザインには、多くの使えるフォントがある。その一方で、Webにおいてフォントには制限がある。Webデザイナーは自分たちのデザインのために10個くらいのユニバーサルに使えるフォントに依存しており、 VerdanaやArialを使うために、何度も多くのフォントは使われないようになってきた。その一方で、CSS Zen Gardenの典型的なデザインはテキストをレンダリングし、ピクセル単位で完璧に揃えるために手作りのフォントを使う。そして、そのとき、テキストは背景画像として使われるのだ。
背景画像！
なぜ背景画像がテキストを伝えるために使われるべきではないか、についての理由はたくさんある。画像は容量を食うし、作るのも手間だ。想像してみてほしい。Webページを15の言語に訳そうとすると、その言語に必要なそれぞれの画像を作りこまなければならない。さらに、画像は現代のプリンタが要求する解像度に合わせられないので、プリントされたWebページの質はあまりよろしくない。背景画像を使うことは現在Webにおいてデザイナー自身が使いたいフォントを使うことのできる唯一の方法だ。しかし、Webデザイナーがもっと多くのフォントの選択肢を持ち、背景画像を作り出すことなくフォントを選べる、そういうふうになるのだろうか？
方法はある。Webフォントである。フォントの画像を作る代わりに、実際のフォントファイルがリンクされ、Webから呼び出せればよいのだ。この方法では、デザイナーがTrueTypeのフォントを使うことができる。背景画像としてテキストを埋め込むことなくね。
簡単なWebフォントの歴史
これは新しいアイディアではない。1998年に、CSS2はスタイルシートからフォントをリンクする方法を勧告した。マイクロソフトも Netscape、どちらも彼らのブラウザでWebフォントのサポートを追加した。しかしながら、どちらのベンダーも最も広く使われているフォントフォーマット、TrueTypeをサポートしなかった。その代わりに、彼らは異なるもの、あんまり使われておらず、ツールもほとんどないものをサポートした（それぞれEOTやTrueDoc）。そしてWebフォントはデザイナーのツールボックスから消え去った。
よいニュース
私に喜ばしいアナウンスがあった。Webフォントが戻ってくるのだ！ここに、いくつか最近作られた例がある。TrueTypeのWebフォントが利用可能なときに、どのように一般的なドキュメントがレンダリングされるのか見てみよう。
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
この記事におけるPDF（と画像）が示した例はPrince 6で作られたものだ、PrinceとはCSSのレンダリングを通じてPDFを作成するものだ。（マッキントッシュバージョンはTerminalがインストールされている必要がある。取扱いの説明はReadMeファイルに入っている。）Princeは現在TrueTypeのWebフォントをサポートするだけの単なるプログラムだ。しかし、それは、私たちが真剣にWebフォントについて考えなければならないコンセプトの立証を提供している。どういうことかというと、普通のWebブラウザに対して私たちがその仕様について主張し始める必要性ということだ。その議論をする前に、上記のサンプルがどのようなコードになっているのかをちょっと見てみよう。
（公表しておくと、私はYesLogicの取締役だ、この会社がPrinceをサポートしている。取締役にいることは、効果的な方法だ。あなたが気に入っているものを改善するのを後押しできるのだから。）
この例はHTMLとCSSのみでコーディングされている。画像は一切入っていない。CSS3のマルチカラムレイアウトや角丸はよい評価になりうるだろうが、デザインにとって必須のものではない。どの例も4つの異なったWebフォントを使っている。ドキュメントがレンダリングされる前に、スタイルシートでWebフォントのファイルを引っ張ってくる。
Webフォント：あなたが使えるであろうコード
ここにあなたがどうやってWebフォントを使えばいいのか、そのシンプルなコードを用意した。
@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif }
CSS構文と共にフォントファミリアが最後の行を理解するだろう。@font-face構成はフォントファミリアではないかもしれないが、説明は簡単だ。「Kimberley」フォントが要求されると同時に、指定されたURLからフォントファイルを呼び出す、ということだ。この構文はCSS2の規定において描き出される。
スタイルシートにおいて@font-face宣言の冗長なコードをを避けるために、@importを使うことによってこれらを隠すこともできる。
@import url(http://www.princexml.com/fonts/larabie/index.css) all; h1 { font-family: Goodfish, serif }
上記の例で使われているTrueTypeのファイルは、Ray Larabieがデザインした。彼はよく知られたフォントデザイナーであり、Webで自由に使えるTrueTypeの興味深いフォントを何百も作ってきた。彼のフォントはエレガントで、よくデザインされており、陽気な感じだ。Dieter Steffmannも素晴らしいフォントデザイナーだ。彼もまた誰もが使える多くの美しいフォントを作ってきた。そのフォントを使った例が以下のものだ。
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
もっと複雑なことだってできる
ブラウザがWebフォントをサポートし始めれば、デザイナーは単にfont-familyを使うなんかよりも、もっと多くのプロパティを使いたくなるだろう。上記の例では、line-height、letter-spacing、word-spacingと絶対配置をいじってみた。Webから指定された特定のフォントがあるときは、ほかのプロパティを適用してもうまくいく。しかし、ブラウザがWebフォントをサポートしていないと、残念な結果に終わってしまう。そして、Webデザイナーはそれらのページがちゃんと表示されているのか、常に確認しなければならなくなる。
この問題の確かな解決策は、類似のフォントファミリーを指定することだ。例えば、Ray Larabieの「Primer Apples」はチャーミングで、編み物のようなフォントだ。この事例でそれを使ってみよう。
本当のTrueTypeのフォントを使っているときのWebページのスクリーンショット。PDF（Prince）、HTML（あなたのブラウザ）
「Primer Apples」はWebで一般的に使われるフォントで置き換えることは難しい。しかし、代替としてどこでもある「Trebuchet」フォントを全く同じように指定してやればよい。
font-family: "Primer Apples", "Trebuchet MS", sans-serif;
Webフォントをサポートしていない（はたまた、マルチカラムレイアウトも角丸も）昔のブラウザは、この2つ目の例のように見えるだろう。
Webフォントをサポートしていないブラウザのスクリーンショット
縫い目はどこかにいってしまうけれど、閲覧する分には問題ない。
W3Cへの提案：Webフォントのためのメディアクエリを
このややこしい制限を乗り越えるために、Webフォントのためのメディアクエリを用意するのは有益なことだ。こんな例はどうだろう。
h1 { font-family: "Trebuchet MS", sans-serif; letter-spacing: 0.1em; } @media all and (web-fonts: "truetype") { h1 { font-family: "Primer Apples", sans-serif; letter-spacing: 0.2em; } }
上記の例におけるメディアクエリの結果は、Webフォントをサポートしているかどうかによって、実際のletter-spacingの値が変わるというもの。メディアクエリにおいて、TrueTypeフォントがサポートされているか否かで指定することも必要だ。Webフォントのメディアクエリは現在のW3CのMedia Queries specificationにはないし、誰も改善案を提示してもいない。しかし、これは素晴らしいアイディアだし、できるはずだ。
これが現実の世界に意味することはどんなことだろうか？
Princeが適切なコンセプトの立証を出した一方で、次の大きな流れにするためには、一般的なWebブラウザがWebフォントをサポートしなければならない。ただ、彼らはまだそんな準備はできていないのはなぜだろうか。
Webフォントに対する議論は、その多くが法律に関するものだ。フォントは知的財産であり、その議論が進んでいるが故に、Webで公開されないのではないか。フォントの「形」に対する法律的な位置付けもまた不確かであるので、フォントの「名前」はたぶん著作権によって守られるだろう。写真やテキストと同様に、フォントも守られるのだろう。Webにおいて著作権的に守られたものを使用するためには、あなたが著作権の保有者から許可を得る必要がある。Webにはたくさんのテキストや画像がある。その理由は、著作権保有者が許可したものであるし、そうするように奨励されているからだ。同様に、自由に使えるフォントを作ってくれるフォントデザイナーも多い。（この記事の例で使ったフォントを作った、Ray LarabieやDieter Steffmannだ。）
しかしながら、Webフォントに対しての最大の焦点は法律ではない。美学だ。今までblinkタグやアニメーションGIFを背景画像に使うようなデザイナーが作った三流のフォントで表示されるWebページに、あなたは耐え切れるだろうか？たぶん、嫌だろう。ひとたびWebフォントがそのように使われるようになれば、スタイルシートをOFFにできるブラウザでCSSをOFFにしてしまうことだろう。（ちなみに、OperaならShift+Gでできる）
美学はまたWebフォントに対する強い議論を提供することになる。たくさんの美しく、興味深いフォントがある。それらは美学を向上させ、Webのビジュアルな多様性を増すことにつながる。私はときどき美しいデザインの本に気絶しそうになってしまうという体験を、美しいWebページでも体験したいのである。そして、私は背景画像でマークアップされた美しいWebページはもう十分なのである。
あなたが手伝えること
WebフォントがWebデザインを次のレベルに引き上げる前に、2つの事象が起きるに違いない。一つ目は、私たちがアプローチの有効性を確実なものにしなければならない。CSS2のサブセットは十分なものになっているだろうか？CSSのコードは好きかい？興味深い実装をいろいろと試してみて、その経験を報告することが最もベストな方法だ。
2つ目は、Webフォントのサポートを追加してくれるようにブラウザ開発者に依頼することだ。これは難しいに違いない。ブラウザベンダーは多くの仕様とその中から選ばれたより確かな改善の提案を受け入れるからだ。
そのいくつかはバグフィックスでも忙しい。新しい機能をロードマップに組み込んでもらうためには、説得力のある話が語られなければならないし、多くの開発者がそのサポートに声を上げなければならない。そうすれば実現するだろう。
CSSが生まれてから10年経った。そしてそろそろ次の新しい10年に向かうようだ。Webフォントと共に仕事ができるようになりたいよね！
Translated with the permission of A List Apart Magazine and the author[s].
訳者より一言
熱い。本当に熱いですね。自分で訳しながら、「この流れはすごくないか」と勝手に妄想が膨らんでいました。ただ、「じゃあ、実際にすぐに使えるのか？」と問われると、「まだだと思う」としか答えられませんが、少なくとも動きは出てきています。引用元は、A blog? with Σαιτω - 次期 Opera - @font-faceから。
Opera 社 CTO のホーコン・リーが口を滑らしてしまったところによると、次期 Opera は CSS 3 の @font-face に対応する予定だという。
OperaのCTOがA List Apartに書いてまで、「ネタでした」っていうのはあり得ないかと。いやいや、Operaすごい。
ただ、疑問なのはフリーのフォントがかなり数多くある英語圏とあんまりない日本語圏、この格差はどうなるんでしょうか。ここでも英語圏が独走してしまうのは、それはそれで悲しいことだなとは思います。
id:iwaimさんからのはてブコメントに対する返答
[翻訳権違反の可能性][著作権][vote-abstain][css] http://www.alistapart.com/copyright/ の規約を満たしているとは思えない。
というふうに言っていただいたので、ついでながらA List Apartの著作権についての考え方を見ておきます。
id:iwaimさんのおっしゃるように、A List Apartの著作権についての考え方は上記のアドレス、A List Apart: Copyright Noticeに書かれています。主な内容は、
- 著者の許可を得ない限り、オンラインでもオフライン（印刷など）でも複製してはいけない。
- 記事が出てから、2ヶ月以内は複製してはいけない。（ここが著者の許可を得ていた場合はどうなるのかは分かりません）
- 複製する場合は決まった書式の著作権の表記を含まねばならない。
- 画像やデザインも複製してはならない。
と書かれています。これらの項目を読んで判断するには、「じゃあ、君の記事ダメダメじゃん」というふうになるのですが、ここはA List Apartは粋なやつなのです。文頭の2行目あたりにこのように書かれています。
「Excepting translations」。直訳すると、「翻訳を除き」といった意味です。つまり、翻訳の場合は違った著作権が適用されるのです。この翻訳時の注意点もそのページの真ん中あたりに書いています。せっかくなので、以下に翻訳します。
もしあなたが私たちの記事を英語以外に翻訳したいとするならば、無料で、事前の許可なく、私たちの許可を得ることもなく、翻訳することができる。ただし、以下の項目を守ること。
- その記事の翻訳は無料で利用できること。あなたが訳したALAのコンテンツを販売してはならない。
- 書かれた記事を誠実に翻訳すること。あまり重要ではない方言などを除いて、著者の意図するところを改変してはならない。
- ALAの該当記事にあなたの翻訳の記事からリンクを貼り、さらにALAのコンテンツと著者のものであることを書き残さなければならない。自分自身の記事であると主張しない。
あなたは下記のテキストを当該翻訳ページに含むこと。
"Translated with the permission of A List Apart Magazine and the author[s]."
以上です。故に、もしかしたら、僕の翻訳が稚拙で著者が意味するところを正確に表してはいないかもしれませんが、上記の著作権に対する考え方は尊重した上で、翻訳しています。もし、何か問題あれば、具体的にご指摘いただけると幸いです。
なんにせよ、ALAはわざわざこういった翻訳に対する考え方もサイト内で表明しており、更に非常に斬新でよい記事が豊富なので、どんどん訳していけばいいと思うのです。
