ブラウザ別フォントレンダリングの比較（欧文編）

この記事は最終更新日から13年以上経過しています。
内容が古い可能性がありますのでご注意ください。

googlefonts

Google Fonts APIで遊んでいたら、IE9でのフォントの描画が異様にきれいなことに気付いた。IE9にバージョンアップしたのは結構前だけど、起動することは滅多にないから今まで知らなかった。

この際なので主要ブラウザとフォントフォーマット別の表示を比較してみることにした。
フォントの描画品質のみをチェック。CSSの解釈がズレる、間違っているといった部分は評価の対象としない。

このエントリでは欧文フォントをサンプルにした。日本語フォントの比較は次のエントリで。

検証環境
まずまとめ
詳細

検証環境

OS: Windows7
ブラウザ: InternetExplorer 9
Firefox 8
Chrome 15
Opera 11
Safari 5
使用フォント: Garamond （TrueType / OSに付属）
Garamond Premier （OpenType / AdobeReaderに付属？）
EB Garamond （Google Fonts API）

フォントはGaramondと名のつくものを使った。細部は異なるが、大まかなシルエットは同じなので。なおWOFF版フォントはOpenTypeの「Garamond Premier」を以下のサイトでWOFFに変換したものを使用。

Font Squirrel | Create Your Own @font-face Kits

検証に使ったHTMLとCSSソースは以下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtmv/DTD/xhtmv-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="latin.css" />
	<title>Font Test</title>
</head>
<body>
<div id="true">
	<p>Garamond (True Type)</p>
	<p class="v">Nokto de la Galaksia Fervojo</p>
	<p class="g">Nokto de la Galaksia Fervojo</p>
	<p class="t">Nokto de la Galaksia Fervojo</p>
	<p class="s">Nokto de la Galaksia Fervojo</p>
</div>
<div id="open">
	<p>Garamond Premier (Open Type)</p>
	<p class="v">Nokto de la Galaksia Fervojo</p>
	<p class="g">Nokto de la Galaksia Fervojo</p>
	<p class="t">Nokto de la Galaksia Fervojo</p>
	<p class="s">Nokto de la Galaksia Fervojo</p>
</div>
<div id="woff">
	<p>Garamond Premier (WOFF)</p>
	<p class="v">Nokto de la Galaksia Fervojo</p>
	<p class="g">Nokto de la Galaksia Fervojo</p>
	<p class="t">Nokto de la Galaksia Fervojo</p>
	<p class="s">Nokto de la Galaksia Fervojo</p>
</div>
<div id="google">
	<p>EB Garamond (Google font API)</p>
	<p class="v">Nokto de la Galaksia Fervojo</p>
	<p class="g">Nokto de la Galaksia Fervojo</p>
	<p class="t">Nokto de la Galaksia Fervojo</p>
	<p class="s">Nokto de la Galaksia Fervojo</p>
</div>
</body>
</html>

@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
@font-face {
    font-family: 'Garamond Woff';
    src: url('garamondpremrpro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
div {
    margin:30px 20px;
    padding-left:10px;
    border-left: solid 3px #ccc;
}
p{ margin:3px;}
.v { font-size: 34px; }
.g { font-size: 27px; }
.t { font-size: 20px; }
.s { font-size: 13px; }
div p:first-child { font-family: arial; font-weight:bold; color:#777; font-size: 13px;}
div#true {font-family: 'Garamond';}
div#open {font-family: 'Garamond Premr Pro';}
div#woff {font-family: 'Garamond Woff';}
div#google {font-family: 'EB Garamond';}

まずまとめ

最初にブラウザごとの結果をまとめて書いてしまう。

InternetExplorer

現時点では最強かも。どのタイプのフォントを使っても、異様になめらかな描画を実現している。
アンチエイリアスのかかり方も、強すぎず弱すぎずでいい感じ。個人的には一番好みの描画。

Safari

デフォルト設定だと特にOpenTypeが惨憺たるありさまなのだが、オプションで「フォントのなめらかさ」を「Windows標準」以外にすると、さっきの惨状は何だったのかと言いたいぐらいきれいになる。
今回はこのオプションを「中 - フラットパネルに最適」にして検証した。
アンチエイリアスがIEに比べてちょっと強めの印象。

Firefox、Chrome、Opera

この３つはほぼいっしょ……というか、多分同じ。こいつらは自分ではフォントのレンダリングを行っておらず、OSに任せてるのだろう。
OS任せと言うことで品質はIE、Safariに劣る。OpenTypeとそれ以外のフォーマットでは、描画の差が大きい。

３つ共通の傾向として、OpenTypeは他のフォーマットに比べてなめらかだが、アンチエイリアスが効きすぎに思える。なめらかというよりボンヤリ。

詳細

InternetExplorer

フォントのフォーマットを問わず、きれいな描画。
中でもWOFFが一番きれいなようだ。「Garamond Premier」のOpenType版とWOFF版を比較すると、WOFF版の方が字が小さくなってもなめらか。「G」のカーブの部分を見ると分かりやすい。ただ、なめらかな分「e」なんかはWOFFだと上の部分がつぶれてしまっている。

Safari

IE9と同等のなめらかさでフォーマットによる差もほとんどない……というか、差が分からないｗ
しかし、どんなフォントも一回り太くなってしまう。
オプションの「フォントのなめらかさ」を「CRTに最適」にすると他のブラウザと同等の太さになるが、今度はアンチエイリアスが効きすぎて、微妙にボンヤリとした印象。とはいえ気になるほどではないかも。