●ページデザインとフォント使用の関係
ページデザインについていろいろ考えてみたのだが、きれいにデザインされたページ
というのにはある一定の傾向がある。
それは、タイトルやメニューなどが画像で表示されていることだ。
要するに、普通にPCにはいっているフォントではきたないので、きれいなフォントで
レンダリングした結果を画像としてメニューなどにつかうと。
たしかにこうすると、全体としての画面がとてもきれいになるのだが、
しかしその代償もまた大きく、例えば検索ができなかったりする。
変更が容易ではないので、その結果メニュー構成見直しなどがおっくうになる。などなど。
このようにページデザインで、きれいなページはメニューが画像で普通なページは
メニューが文字という傾向はずっと続いているのだが、なんとかこれを止揚できないものか。
●クライアント側でのフォント使用
簡単には、クライアント側にきれいなフォントがあってそれで表示されてればいいのだ。
しかしそれをするためには各クライアント全てにフォントをいれる必要があり、現実的ではない。
ユーザが持ってる可能性が高いフォントを勝手に指定するという方法もある。
例えばHGゴシックとかそういうたぐいのフォントは、Officeをinstallしていると自動的にはいってくるので
持っている可能性が非常に高い。
Mac OS Xに関しては、ヒラギノフォントが標準で入っていて、これは非常に質の高いフォントだ。
通常の用途において必要十分なバラエティーが入っているので、これだけでだいたいの用途を満すことができる。
実際に書籍で、ヒラギノを全面的に使ってデザインされたものも非常にたくさんある。
例えば[http://www.amazon.co.jp/exec/obidos/ASIN/4000236350/etocom05-22/ref=nosim 先端芸術宣言]など。
CSSなどからこれを指定する方法もあり、AppleのWebページなどはそうしているので、
Mac OS Xからは、IEを使っていたとしても非常にきれいに表示される。
またSafariの場合はさらに一歩進めて、ブラウザのdefault表示フォントをヒラギノにしている。
そのためごく普通のページを見ていても、すごくきれいなフォントで表示してくれるので、とてもうれしい。
また現在は普及していないが、これから先Adobe Reader(旧Acrobat Reader)にて、日本語のフォントとして
小塚ゴシックと小塚明朝が、もしフォントが無いときの代替フォントとしてon demandで自動的にダウンロードされる
ような仕組みになるらしい。いや、現在すでにそうなっているらしい。
(さすがにウェイトのバラエティーは少ない。ゴシックも明朝もそれぞれ普通の太さが一つづつらしい。)
この仕組みがもう少し普及すると、現在普通にAcrobat Readerがはいっているようなマシンでは、
小塚ゴシックと小塚明朝がはいっていると期待してもいい状況になるのかもしれない。
これらのフォントもCSSから指定することができるため、ブラウザ上で表示できる。
小塚ゴシックと小塚明朝はまだあまり知られていないが、これらは両方とも非常に質の高いフォントである。
ヒラギノも非常に質が高く、おおまかに同じ傾向の字体である。かなりモダンなすっきりとした印象を与える。
ヒラギノと小塚を比べると、小塚のほうがさらにすっきりしている。
また、単にモダンにすっきりしているだけではなく、細かく字形を見ていると、実は結構個性的な字体である。
例えば登るという感じのカンムリの部分など、端の処理が単純に四角に切るのではなく、
斜めに切っていたりして、とても個性的な印象をうける。
また、小塚はアルファベットがとてもいい。
アルファベットだけ取り出しても使えるぐらいにアルファベットが良い。
そもそも日本語フォントの一部として設計されているので、日本語フォントとの相性がいい。
そのため、例えば日本語部分をゴシックBBBにして、アルファベットを小塚にする
ということをしてもとてもよく合う。
実を言うと、私は新ゴがすごくきらいなのである。とにかくあの没個性的な字体を見ていると、
お前には個性とか主張というものが無いのか、と言いたくなる。新ゴを使ったデザインを見ていると、
すっきりしていてきれいなのだが、あまりにもアクが無いデザインになる。
しかし、これもまた、小塚氏の計画通りということなのだろう。
HelveticaとUniversを比較すると、どのデザイナーもUniversのほうがいいフォントだという。
実際その通りで、Universのほうが人間味あふれるあじわい深いフォントである。
しかしデザインとはフォント単体でするものではなく、全体のバランスの中で考えるものである。
その中でフォントそのものに味があったりすると、実はとてもこまるのである。
小塚氏は新ゴをデザインしようとしたときに、HelveticaとUniversの利用され方の違いを分析し、
新ゴはUniversではなくHelveticaのようなフォントにしようと決断した。
その結果できたのが新ゴである。(ちなみに新ゴは新しいゴナという意味。
ゴナというフォントがあってその新版として設計された。
新しいゴシックという意味かと思っていたんだけど、違った。)
そのため、Helveticaのようにフォントそのものには味が無いけれど、
全体のデザインとしてはすっきりときれいにまとまるというフォントを作った。
実際自分でデザインする際も、味があるフォントっていいよなーと思って
ヒラギノや小塚やAXISフォントを使ってみるんだけど、やはり全体からは浮いてしまう。
結局最後には新ゴにしていたりする。
新ゴの良さというのはこれから先もしばらくずっと続くだろう。
これからも、商業的デザインにとって不可欠のフォントであり続けるだろう。
でもなー、と僕は思うのだけど。
そして小塚氏がモリサワをはなれ、Adobeでデザインしたのが小塚ゴシック。
そう考えると、小塚ゴシックにちょっとした個性が滲みでているのもうなづける。
これこそが、小塚氏が考えていたUniversみたいな日本語フォントに対応するものになるのだろうか。
他には最近開発されたAXISフォントがある。これは雑誌AXISのためだけにデザインされた
日本語フォントで、その文脈だけでも非常にすばらしい、画期的な事件だと言える。
これもOpenTypeで、常用漢字だけ含まれたものがフリーで公開されている。
これはどちらかというと、新ゴや小塚ゴシック、ヒラギノといった文脈よりも、
より手書き的な味を残したフォントである。とはいえ中ゴシックほど手書き的な感じはしない。
パッと見はモダンな印象なのだが、どこか手書きの風味を残した味わいがあるという感じ。
またこのAXIS Fontも欧文がいい。このフォントは日本語とアルファベットの部分は担当する
人が違い、欧文はその専門の人がやっている。その人はライノタイプで様々な欧文書体を
手掛けている人で、つまりまさしくプロ中のプロ。質が高くないはずがない。
http://www.typeproject.com/Type/kobayashi.html
http://www.kamedesign.com/ →Joachim Muller-Lanceに注目している点が面白い。
(しかしでも、なんとなく小塚ゴシックのアルファベットのほうが使い勝手がいいのだよねぇ…。)
AXIS Fontは、それを使うとそれだけで雑誌AXISみたいになっちゃうじゃん、
と言っている人もいる。たしかにその通りで、何を組んでもAXISっぽくなる。
それはそれでいいことでも悪いことでもある。
しかし明白に言えることは、雑誌AXISを読んだことが無い人にとっては、
ほとんどまったく先入観が無いフォントだということだ。
つまり単にちょっと味のあるゴシックフォントだなとうけとられるだけである。
なので、普段AXISを読んでる人以外が対象であれば、避ける必要は特にない。
小塚ゴシックとAXIS Fontに共通しているのは、ウェイトの種類が豊富さである。
特に、細いウェイトが充実している。いままで見出しは太い字を使うのが相場だが、
そのまったく逆に極細の文字で見出しを作るという方法もある。
これは結構いい印象をあたえる。
当然であるが、モリサワも忘れてはいけない。モリサワはプロテクトが非常に
きつかったことで有名であるが、しかしその方針を転換したのか、OpenType化を
すすめている。最近ではメインに使われるフォントをどんどんOpenType化している。
基本6書体のパックにしたフォントパッケージがあり、これは非常に有用である。
昔PSプリンタを使っていたときはすごく文字がきれいだったんだけど、最近普通の
TrueTypeのレーザプリンタを買ったた文字がきたなくなった、と思っている人がいるだろう。
それは別になんの謎でもなく、単に文字がきたなくなったからだ。
昔のPSプリンタだとプリンタ側に中ゴシックBBBとリュウミンLが内蔵されていて、
普通にMSゴシックとMS明朝で出したものはプリンタ側でフォントを置換してくれるので、
自動的にきれいに見えるようにでてくるのだ。
しかし最近のPSじゃないプリンタはそういうのを内蔵しているわけがなく、
PC側のフォントがそのままでてくる。MSゴシックなどは画面上で見るとそんなにひどくもないが、
それを紙の上で見ると、ひどさが増幅されるので、げげっとなる。
そのようなとき、昔のPSプリンタがよかったなと思っている人は、このモリサワの
基本6書体パッケージをgetするとよい。そしてWordなどで標準の書体をリュウミンLにきりかえ、
ゴシックを中ゴシックにきりかえるという処理をすると、あら不思議、昔のPSプリンタのきれいな
書体がよみがえってくるのである。
http://www.amazon.co.jp/exec/obidos/ASIN/B000079CI0/etocom05-22/ref=nosim モリサワOpenTypeフォント 基本7書体パッケージ for Windows
でも、そもそも同じ書体であるはずなのに、それでもなんか印象が違う。なんでだろう。
実はOpenType書体は、縦方向に間延びする。フォントそのものに最初から行間を空けるような工夫が
されているようであり、そのため行間を空けないような設定にしてあっても、
適度にみやすい行間があいてくれる。ということは逆に、もしあらかじめ行間が
空くように設定されていた場合、必要以上に間延びしてしまうということだ。
Wordなどを使うとそのようになる。
●フォントとページデザイン
前述の通り、メニューなどが画像として使用されることが多い。
それをクライアント側でフォントとしてレンダリングすれば、そのまま文字そのものとして扱える可能性がある。
文字をそのまま使うのではなく、なんらかの形で加工して使うことがある。
しかしそのような場合には、IE独自のCSSフィルターがある。
これを使うと、文字に影をつけたり輪郭をつけたりにじんだ感じにするなどが簡単にできる。
そのため、ちょっと影がついていたり、カーソルをのせると色がかわってみたりといったくらいなら、
CSSなどによって対応することは可能なはずである。
つまり、クライアント側でフォントをもたせてCSSで制御するということをすると、
ページデザインの問題はかなりの部分がクリアされるのではないだろうか。
●Webブラウザ上でのフォント使用
クライアント側でフォントを持っていることを期待するというアプローチは難しい。
それなら、強制的にサーバからクライアントにおくりこんでやればいいのではないだろうか。
Webブラウザ上にfontをembedさせる方法は二つある。
.pfrと.eot。前者はNetscapeが採用、Truedoc? Bitstream? が開発。
IEでは、Active X経由で使える。
.eotはEOT(Embedded OpenType)。IEで塔載している。他にWebTVなども。
.eotを作るには、WEFTというツールを使う。これが極めて使いずらい。
そもそも動かない場合もある。Wizard形式で作業をすすめるのだが、
その最後のEOTを生成する段階で、エラーを出すことがある。
実際のところ、.eotを作るにはこのWEFTを使うという選択肢以外は一つも無いようだ。
例えばGIFファイルを作るツールやアプリが何種類かあるという状況ならば
動くやつを選べばいいのだが、そのたった一つの実装が動かなかったりするのだから、お話にならない。
互換ソフトを作ろうにも、仕様が公開されていないのだ。
最近GlyphGateというのがでて、それを使うとそのEOT作りをon demandでやってくれる。
ApacheやIISなどへのmoduleという形で使える、非常によくできたソフトである。
しかし、EOTファイルの仕様が公開されていないのに、なぜこんなのが作れたのだろうと
思っていたのだが、ようやく理由がわかった。
GlyphGateは以前はFAIRYという名前だった。それはBorwareというスウェーデンの会社が
作ったもので、実体をよりわかりやすく反映するために名称変更したとのこと。
そしてWEFTは、あたかもMicrosoftが作ったツールのように見えるのだが、実はこれも
Borwareという会社が作ったものだ。(Windowsの場合は非常にありがちだが、
実際には別の会社が作った機能が組み込まれているだけということがよくある。
例えば、Type1やOpenTypeフォントの対応はAdobeが作ったものだし、defragはノートンが
作ったものが組み込まれている。)
ということで、WEFTもBorWareが作ったアプリである。
ということを考えるとようやく線がつながってくる。つまり彼らとしてみると、
WEFTを使いやすくすることにはインセンティブが無い。またEOTの仕様は非公開で
独占的に利用できる。この状況では、WEFTではないサーバ側のモデルとして
GlyphGateのような形でビジネスをするのが一番おいしいということだろう。
しかしその結果として、fontのon demand loadingという仕組みの普及が
妨げられている結果になっているので、なんともはやという感じである。
■WEFT Borware
http://www.eu.microsoft.com/typography/links/news.asp?NID=1534
http://www.i18nwithvb.com/surrogate_ime/code_charts/
●●http://lists.w3.org/Archives/Public/www-font/2000JanMar/0109.html
→よく考えたら、ごく普通にTTFフォントをそのままで@font-faceに指定できるのだったか?
今度やってみよう。
■http://www.microsoft.com/typography/embed/sdk.htm?fname=%20&fsize= OpenType embedding SDK
http://www.microsoft.com/typography/faq/dfaq1.htm?fname=%20&fsize=
http://www.webreference.com/dhtml/column30/ →fontがinstallされているかどうかを判定するトリッキーなテクニック
■EOT Embedded OpenType
http://www.builder.com/Authoring/Typography/ss02.html
●●http://msdn.microsoft.com/library/default.asp?url=/workshop/author/fontembed/font_embed.asp
http://archives.neohapsis.com/archives/vulnwatch/2003-q1/0013.html
●http://www.w3.org/TR/REC-CSS2/fonts.html#referencing
http://www.fonts.com/fontservices/services_home.asp?con=embedding
●http://orwell.ru/info/samples/
●http://webref.info/default.asp?ID=2717
http://groups.msn.com/MicrosoftFontValidatorCommunity/
http://msdn.microsoft.com/library/default.asp?url=/downloads/list/xmlgeneral.asp
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie40/html/css.asp
未来の技術はなぜ普及しないか。
■WEFT
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/htm/xsl_browsing1_8ss3.asp
MSDN Home > MSDN Library > HTML and Dynamic HTML > Overviews/Tutorials > About Font Embedding
●http://www.w3.org/Printing/pennock.html Font Embedding on the World Wide Web April 19, 1996
http://www.microsoft.com/typography/default.mspx
■http://www.adobe.co.jp/products/fontfolio/main.html Adobe Font Folio OpenType Edition
→2200種類を超える欧文書体と31種類の日本語書体
→10ライセンスパッケージ、60万円くらい?
→小塚明朝、小塚ゴシック、りょう
■https://lunchbox.securesites.net/prokit/fontmenu.secure.html
■http://www.microsoft.com/typography/links/news.asp?NID=2832