見出し画像

とりあえずブラウザでの文字表現でわたくしがやっていること

 こんにちは、はじめまして。Interface Architects Inc.代表の立山といいます。
 代表取締役なのですが、ひとり会社なので、何かを取り締まってる訳ではなく、むしろブラウザレンダリングの差異で取り乱してることが多いので、代表取乱役とでも言ったほうがいいかもしれません。
 それはいいとして、主にWeb周辺のアートディレクションとデザインを生業としております。たまに紙媒体を手がけたりもします。おそらく、紙のデザインをメインで手がけている方々が思ったのは、「Webって文字周りがダメ」ってことじゃないでしょうか。最近はほぼ出会わなくなりましたが、紙やってるデザイナーの方と話すと、ブラウザで文字されるテキストの不自由さについて散々disられた後に「画像にしたほうがいいじゃん」とか言われて、ハイパーテキストの成り立ちやその存在理由から話さないといけないという、めんどくさい体験を山ほどしました。今でも、Webデザインにはタイポグラフィや文字を組むという概念すらないんだろうと思っている人がまだまれにいらっしゃるようです。
 ググれといい捨てるのは簡単ですが、ここでデザイナーの媒体における分断をうむのもおかしいので、わたくしがとりあえず試してみて、現状で実用に耐えうることを軽く書いておきます。

1.プロポーショナルメトリクスを適用する
 CSS3の中に「font-kerning」という属性を見つけたのですが、結局実装されませんでした。その代わりに「font-feature-settings」で、OpenTypeの持つカーニング情報にアクセスできるようになりました。游ゴシックでも「font-feature-settings : "palt";」と書いておけば、そこそこ見られるようになります。ただし、縦組みに適用すると、Safariでかなり残念なことになりますのでご注意ください。

2.日本語はジャスティファイする
 わたくしが好きなタイポグラファーはエミール・ルーダーです。彼の影響か、紙媒体でもラギッド組みにする傾向がありますが、日本語は箱組みが美しいと言われる傾向にあります。実際、紙媒体をやっていると、ひと文字行長からこぼれた文字を追い込むためにハードなカーニングをやったりしていたものです。
Webではそこまでのハードなことをやろうと思うと、コードが<span>だらけになってしまうのでやりませんが、「text-align: justify;」を適用してやるだけでも、結構いい感じに収まったりします。欧文で適用すると、逆にアンコントロール状態に陥る感じがするので、欧文は割り切ってラギッド組みにしています。ルーダー大好き。

3.上記を適用した上でWebフォントの導入を提案する
あと、「予算がつけば」という前提ですが、やはりWebフォントの導入です。見栄えで劇的に変わるので、誰が見ても「おおっ」と感じることでしょう。「書体は声色」だということをクライアントに理解していただけるのであれば、積極的に提案したほうがいいと思います。

大したことはしてないのですが、今のところ、現実的な対処法はこれぐらいです。おそらく、多くの人がにたような感じで対応しているのではないでしょうか。
行間をコントロールしたり、見出しと本文のジャンプ比率云々とかはもうみんなやっていることなので割愛しました。

追記:縦書き
「-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;」
と書くと縦書きが可能になります。これを適用すると欧文も縦に流れます。日本語の縦書きですと、欧文キャラクターの縦中横もちゃんとやりたくなりますが、なにぶん、Chromeぐらいしかマトモにレンダリングしてくれません...。Safariは完全にこれをシカトします。全角アルファベットにしてしまうという荒技もありますが、かなり限定されると思います。

とりあえずずっと発展途上なのがWebテクノロジーですので、いずれできることはもっと増えていくと思います。そう信じてひとまずペンを置きます。

Webフォントサービスを片っ端から試してみたいですし、オンスクリーン組版ももっと探求していきたいです。もしサポートいただけるのでしたら、主にそのための費用とさせていただくつもりです。