Rewish

CSSでのフォント指定、それは戦い。

最近使用中のフォント指定。

font-family:
    Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
    osaka, 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;

以下戦いの記録。

OSと戦う

まずOSを上げるとすると、WindowsとMacintoshは当然外せない存在。他にも色々あるけれど、今回は敵を減らす為、WindowsとMacintoshおまけでLinuxをちょいす。

ブラウザと戦う

特筆すべきはSafariとMac IE5。まずSafariは、日本語を含むフォントを読み込まない為、アルファベット表記で指定する必要がある。そして、Mac IE5は第一候補で指定したフォントしか読み込まない(対象のフォントがインストールされていない場合はデフォルトフォント)。

以上をふまえた戦いの結果

Verdana
英字フォントで一番のお気に入りなので最近はコレ一本。
'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro'
前述のSafariのことも考え、アルファベットでの指定もする。
osaka
ヒラギノ角ゴ Proが無い場合のMac用フォントはosakaにしてみる。
メイリオ',Meiryo
メイリオの指定については少々悩むところです。MS Pゴシックでアンチエイリアスの無いゴシック体に慣れているので、アンチエイリアスがかかっていると目がチカチカする様な気が。
'MS Pゴシック','MS PGothic'
Windows標準フォント。
sans-serif
ゴシック体 総称ファミリ。

あとがき

紙と違ってWebはフォントの指定が難しい。理由は様々ですが、まず上げられるのは個々の環境でのインストールされたフォントの違いがあります。

例えば、Web制作者側がお気に入りのフォントを指定したとしても、見る側のコーピュータに対象のフォントがインストールされていないと、指定したフォントを表示することは出来ません。そうなると画像で指定してみたくなるものですが、ユーザビリティなどを考えると画像を多用するのも頂けません。

ユーザビリティ伝々を持ち出すならそもそも指定するな!と言う方もいるでしょう。しかし、フォントの指定もデザイン作業の大事なポイントの一つだと僕は考えます。

今回は「最低限指定してみたい」と思うところを書いてみました。