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

ファイヤードブログ

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

Webデザインにおけるタイポグラフィーについて-フォント・前-

はじめに

 後で

  1. OS搭載のフォント
  2. ブラウザのデフォルトフォント
  3. Webフォント

OS搭載の(日本語)フォント

 どうして「日本語フォント」から始めるかというと、個人的な反省があるからで、それはCSSフレームワークのデフォルトをそのまま適用していたという過去のこと。外国産のCSSフレームワークのフォント指定をそのまま使っても、最後がserifかsans-serifかということでしか、フォントファミリーが判断されないということはよくある。
 さて、まず何よりも、和文フォントが欧文フォントよりも数が圧倒的に少ないということを頭に入れておく。少なくとも、ウェブ関連においては、圧倒的に少ないことは確かだ。とりあえず、Windows 7で見られるフォントを羅列していく。

  • MS Gothic
  • MS P Gothic
  • MS 明朝
  • MS P 明朝
  • Meiryo
  • Meiryo UI

デフォルトではこのくらいしかない。なお、名前はCSSでの値とは完全に一致させていないことに注意してほしい。では、Macの方はどうだろうか。Windowsよりも一般的に綺麗に見えると言われるMacでも、決して数が多いわけではない。

 ヒラギノは、ここではあげなかったが、weightでのバリエーションが豊富なので、チェックしておきたい。なお、ここまでの主な参考サイトは、全標準フォント一覧 / もうパンツはかない を主に参照している。
 数が少ないと書いたが、上に挙げたリストは、いま*1自分が使っているWindows 7に合わせて参照したもので、2015年2月現在、新たなWin、Mac対応フォントがあるのを知っている。その中でも最もポピュラーなもの(それ以前に、WinとMacの両方でサポートされているということで画期的なフォント)が、游ゴシック体游明朝体の2つ。これについては、指定方法も含め、以下のリンクが大変詳しい。

 その他の新しいフォントについては、先に貼ったリンクの最新バージョンからチェックできる( 全標準フォント一覧 / もうパンツはかない )。
 ここまで、もっぱらOS搭載の和文フォントについて述べてきた。Webデザインにおけるタイポグラフィーについて馴染みのない段階だと、「OS搭載フォント」、「ブラウザ搭載フォント」、「Webフォント」の区別がつかなくて混乱してしまいがちだ。

ブラウザのデフォルトフォント

 ブラウザのデフォルトフォントといわれても、どういうことなのかよく分からなかったのだけれど、こういう理解でいいと思う。
 まず簡単に分かるのは、CSSのfont-familyで何も指定しなかったときに、適用されるのがブラウザのデフォルトフォント*2だ、ということ。とはいえ、こういう状況というのは想定しにくい。さすがに何もfont-familyの値を指定しないというのは現実に起こりにくい。
 よりアクチュアルな事例として、Wikipediaの指定方法から考えてみる。Wikipediaには、sans-serifとしか指定されていない。ところが、sans-serifというのは種類のことなので、そんな名前のフォントは存在しない。そこで、ブラウザは自分が持っているsans-serifのフォントを適用する、というわけだ。
 ここでこんな疑問が生まれる。ブラウザが持っているフォントをOSが持っていない、ということはあるのか。あるとすれば、その時はどうなるのか。「ブラウザのデフォルトフォント / もうパンツはかない」に挙げられている一覧によれば、こう言える。「ブラウザのデフォルトフォントはどのOSも必ず持っているようなフォントなので気にする必要はない」*3
 一旦ここで止めます。次はWebフォントから再開します。

                    • -

改題
before「Webデザインにおけるタイポグラフィーについて-前-」
after 「Webデザインにおけるタイポグラフィーについて-フォント・前-」

*1:MacBook Proが壊れている2月上旬時点で

*2:正確に言うと、ブラウザのデフォルトフォントで「無指定」に割り当てられているフォント

*3:これが正しいかどうかは正直まだわからない