読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

#8 Webフォントの使用にあたって最低限考慮したいこと。偽のイタリックと偽のボールドに注意

Webフォント Typography TW草稿 Google Fonts

blog.phiyard.net

上の記事の続編になります。

わかりやすさのために実験を行います。bタグとiタグでマークアップされたテキストを基にして、次の条件でフォント指定を行います。

  1. Open Sansを選んで遷移したページのスタイルのチェックボックスの中から、「Normal 400」のみを指定して読み込む。
  2. 1とは違い、Open Sansの持つすべてのスタイルを含めた上で読み込む。

注意点として、ここの2ですべてを含めるというのは便宜的な側面が強いので、実際の開発では、それぞれのスタイルの必要性を個別に吟味する必要があることをあげておきます。また、今回の実験では、normalize.cssではなく、reset.cssを使います。normalizeを使うと、どこからが自分の設定しているスタイルなのかがわかりにくくなってしまうためです。反対にreset.cssを使えば、ブラウザ上で反映されているスタイルがすべて自分が書いたものの反映であることがわかりやすくなります。

これから実験とその結果をcodepenの埋め込みによって示しますが、その前にサンプルのHTML構造について補足しておきます。まず、「OK Computer」部分は、<b>マークアップし、スタイルでboldを適用しています。「Radiohead」部分は、<i>で、italicを当てています。繰り返しになりますが、reset.cssを使っているため、すべては私自身が記述したスタイルです。最後に注目して欲しい部分として、パラグラフ出だしの、「OK Computer」には、引用元のWIkipediaと同じく、<i><b>というふうにマークアップしています。詳しくは埋め込み内のタブ切り替えソースを確認してください。

実験

1.「Normal 400」のみを指定して、読み込む

codepen.io

前編の記事を思い出して欲しいのですが、もともとの問題意識としては、「Google Fontsでフォント選んだらチェックボックスだらけなんですけど」というものでした。そしてここでは、「どれを選べばいいかわからないので、初期状態である『Normal 400』のみを選択してリンクを発行してしまった」という状態を想定しています。

上の埋め込みページでは、よくわかっていないまま単一のスタイルのみを指定したために、ある問題が発生しています。いっけん、<b>の部分はちゃんと太くなっているし、<i>の部分は斜めになっているので、全く問題のないように見えます。何が起きているのかというと、ここでは「フェイク、偽(にせ)」*1の問題が起きています。詳しく書いていく前に、「本物」によってスタイリングされたものを確認しましょう。

2. Open Sansの持つすべてのスタイルを含めた上で読み込む

codepen.io

いかがでしょうか。違いがはっきりとわかると思います。感覚的にであれ、こちらの方がしっくりくるのではないでしょうか。

何がフェイクなのか

さて、ここからは1で生じた問題を仔細に見ていく段階になりますが、CSS的には極めて基本的なことになります。ほとんどの人はすでに知っているかもしれませんが、恐れずに書き進めていくことにします。

italicにおけるフェイク

いま扱っている問題は次のように整理することができます。「イタリック体を含めた上でフォントのファイルを呼びしていないのにイタリック体を指定してしまっている」。さらに、「なぜか、イタリック体を持っていないはずなのに、イタリック体のように斜めになっている」。前者に関しては、ちゃんとイタリック体を含めた上でリソースを発行すればいいだけです。ややこしいのは、後者です。ないはずのものがあるように表示されてしまっていることです。

なぜイタリック体がないのに斜めになっているのかと言えば、これはオブリークになっているからです(ちなみに、font-styleプロパティの値は、normal、italic、obliqueの3つです)。Mozillaの開発者向けドキュメントの説明によれば、「イタリック体がない場合、オブリークとして扱われる」とあります*2

オブリークとは「直立した形をそのまま傾斜させたもの」(『欧文組版』)で、スクリーン上では、ノーマルなフォントを機械が自動的に斜めにしたものです。タイポグラフィについてよく知らない段階だと、イタリック体が通常のフォントを単に斜めにしたものだと思ってしまいますが、イタリック体は本来的に手書き風の斜めの書体として設計されていて、直立したものとは、同じフォントファミリーとしての類似性はあっても、全くの別物です。

オブリークを使うのであれば、ちゃんとfont-style:oblique;とするべきです*3。それゆえ、イタリック体を指定しておきながら、リソースに含めていないばかりにオブリーク(ないしfaux italic)が表示されているという状況がここでは問題になっているのです。言ってみれば、「カニ丼」として定食店で提供しておきながら実はそのカニは「カニかまぼこ」である、というような事態がおきているわけです。

boldにおけるフェイク

boldにも偽があります。しかし、boldには、italicに対するobliqueのような関係がないために、話は単純になるはずです。また、「ブラウザによってフェイクがなされる」ということに関しては、「italicにおけるフェイク」の第一段落で触れたので、この項目は短く済ませておきます。

偽/擬似boldは本当のboldに比べてどのような見え方をするかというと、Smashing Magazineの解説では、「縦のストロークをちょっとだけ横に引き延ば」したようなフォントになります。リンク先では「Droid Sans Bold」を例に紹介しています。縦のストロークだけを引き延ばすので、横のストロークとの均整が保てなくなり、不格好になっています。

上のOpen Sansの例でも、本当のboldの方が、全体的な厚みが感じられ、しっかりとした印象を受けるのではないかと思います*4

まとめ (とりあえずの)

まとめは前回記事の冒頭を再び繰り返します。

答え: ウェブデザインで部分的なアクセントとして使いたいだけなら、使いたいスタイルだけを選べばOK。ウェブサービスを作っていたり、ブログなどのユーザー入力領域があるウェブサービスで使う場合には、標準に加えてイタリックやボールドなども追加しておく。

何が必要なのかは個々のプロジェクトによりけりなので、具体的にどうすればいいかは言えません。ただ、サービスを作る場合、あるいはサービスで自分が使う場合は注意が必要だということはわかっていただけたでしょうか。結構な文字数を書きましたが、それでも触れなかったことが幾つかあります。最後にそれを予告に代えて終わりたいと思います。

触れなかったこと

  • <b><i>タグに関わらないスタイルについては触れませんでした。例えば、ノーマルより細いウェイトについてなど。
  • Google Fontsではなく、自前のサーバーでフォントをホスティングするときの指定方法については割愛しました(これについてはいつか書きます)。
  • 実はこのトピックは、ウェブでは @font-face以降の新たな問題として取り上げられることがあるのですが、そこには触れませんでした(これについてもいつか書きます)。

参考文献

Responsive Typography: Using Type Well on the Web

Responsive Typography: Using Type Well on the Web

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

*1:英語では、faux italic、faux boldとして呼ばれます。fauxはフランス語で、英語で言うところのfakeにあたります。ここでいうfakeは、fake leather「擬革」などの文脈で使われるfakeです。日本語で意味を定義するとすれば、「本来あるものが何らかの原因によって欠如しているため、その代理として使われるほとんど同じ機能を果たす別のもの」と言えます。他の例として、fauxの英訳には「artificial」もあるのですが、「人工芝(artificial turf)」は、「天然芝」の代理です。なお、対応する訳語については、『ノンデザイナーズ・デザインブック』(吉川典秀訳)は「偽」を使用し、『伝わるデザインの基本』(高橋佑磨、片山なつ共著)では、「擬似」が当てられています。

*2:ここには若干の議論の余地があって、というのも、faux italicをそのままobliqueと呼んでいいものなのか、確かではないから。たとえば、Helveticaはファミリーにobliqueを含んでいる。ファミリーにあらかじめ含まれているということは、たとえobliqueが単に直立体を曲げただけのものだとしても、それがブラウザによって自動的に曲げられたものとは別物であると考えられる。しかも事実として、Helveticaはブラウザ誕生よりも前に生まれている。これをどう考えたらいいのか、執筆時にはまだわかっていない。

*3:上の注に続く形になるが、おそらくこれも「obliqueがあるならば」ということになる。obliqueがない場合は、「faux italic」へとブラウザによって変形される。obliqueとfaux italicが果たしてどれほど異なるものなのか、というのは上の注で扱った問題。ほとんど違わず、呼び方の問題になるのではと考えるのだが、どうなのだろうか。

*4:セリフ体のfaux boldにいてもいずれは検証する必要あり。