サブピクセルレンダリング


Windows版のSafari(3.0.2)で日本語表示が可能になったのを記念して。
「サブピクセルレンダリング」という技術がある。液晶モニタの特性(RGBの画素が横に並んでいる)を利用して、アンチエリアスの滑らかさを横方向に実質3倍向上させるためのものだ。
OSXにもいつの間にか(最初から?)導入されていたが、当時、自分のモニタはCRTだったので気づかなかった。
「サブピクセルレンダリング」は一般名刺だが、ライセンスの問題だろうか、各社様々な呼び名がある。
OSXでは具体的な名称はないが(※1)、Windowsだと「ClearType」となる。
また、Adobe Flashにも同様の技術がある(※2)。こちらにも特に名称はない。
さらにはAdobe Acrobat(pdfの文字表示)だと「CoolType」と呼称している(※3)。
基本的な技術/概念は共通なのだが、表示はそれなりに違う、ていうかかなり違う。困っちゃうぐらい違う。
条件を極力揃えてブラウザごとに比較してみた。
サブピクセルレンダリングの比較

“サブピクセルレンダリング” の続きを読む

擬似ボールド

ググっても出てこないので、自分で「擬似ボールド」の定義をまとめてみた。
検証画像

上 Safari(2.0.3)による表示。正しい太字表示(W3→W6へのウェイト変更)。
下 Firefox(2.0.0.3)による表示。擬似ボールドによる太字表示。


定義ここから。
1.
欧文フォント(書体)は基本的に単体で設計されておらず、ファミリー(同デザインの書体群)で設計されている。
ファミリーの内訳は、太さ(ボールド/ライト)幅(コンデンス/エキスパンド)斜体(イタリック/オブリーク)など様々(※1)。
2.
日本語のOS(Macintosh/Windows)で、標準搭載されている日本語フォント「ファミリー」は大変少ない。具体的には、
Macintosh(OSX)ならば、
・ヒラギノ角ゴシック
・ヒラギノ明朝
Windows(Vista)ならば、
・メイリオ
のみである。
OsakaやMS ゴシックなど、永らく日本語OSには、フォント「ファミリー」は用意されていなかった(※2)。
3.
(各種ソフトウェアや)webブラウザでは、ファミリーを持たない書体の為に、ユーザーが太字指定したものを(上位のウェイトを使用せず)、輪郭を拡張することで「太字のようなもの」を表示させる機能がある。
この機能、およびこの機能で表示される表示を「擬似ボールド」と呼ぶ(※3)。
定義ここまで。


4.
cssで、日本語フォント「ファミリー」を指定した場合、
正しく解釈するものと、解釈できずに無視するものがある(ようだ)。
日本語フォント「ファミリー」を解釈できないブラウザに対しては、目的のフォントを表示させるためには、「フォントファミリー」でなく「(個別の)フォント名」を指定する必要がある(ようだ)。
5.
個別のフォント名を指定してしまうと、<strong></strong>などの太字指定は、擬似ボールドになってしまう(場合があるようだ)。
※1 活字時代の使用サイズから派生した「オプティカルサイズ」などもある。
※2 Osaka-Boldはあったが、ビットマップ表示では、実質的に擬似ボールドと同じ表示だった。
※3 擬似コンデンス、擬似オブリークなども定義しだすと収拾がつかないのでとりあえずここまで。
地道な検証終わり。

使えるメイリオのfont-size

XPのMS ゴシックにくらべれば、Vistaのメイリオはかなりできがよい。
だが、文字をすべてデバイスフォントでまかなえるほどでもない。
検証してみた(画像は「ワードパッド」で入力し、キャプチャーしたもの)。

◎ 7ポイントでは完全につぶれてしまっている。
◎ 9ポイントの「鬱」になぜかベースラインのずれが。
◎ 16ポイント以上は極端に品質の低下。特に欧文に。

太字も検証。

◎全般的にboldは品質が低い。
◎9ポイントと10ポイントの間に品質上のジャンプが。
◎同じく17ポイントと18ポイントの間にも。

font-family

現時点でのゴシック系ベスト。
font-family: “Lucida Grande”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “メイリオ”, Verdana, “MS Pゴシック”, Osaka, sans-serif;

直前でちょっと変えた。XPも和欧混植になるように。Verdanaの位置を変更した。
色々悩んでこのようにしたけれど、結局OSXの為の設定だな……。
Windowsにはあまりたいした影響がない……。
冷静に考えると不毛かも。

Lucida Grande
OSX用|文章中の欧文がLucida Grandeになる。
Safariでは、特定のキャラクターに(※|アスタリスク状になる、●|ブレット状になる、…‥|ベースラインが変わる)影響があるが、目をつぶる。

Hiragino Kaku Gothic Pro
OSX用|フォントファミリーを認識するブラウザであれば、「strong」などを指定した際、きちんとW3→W6のウェイトの変更が行なわれる。

ヒラギノ角ゴ Pro W3
OSX用|フォントファミリーを認識しないブラウザのための指定。「strong」などを指定した際、
擬似ボールドによる太字になってしまう場合がある(きちんと表示されるブラウザもある)。

メイリオ
Vista用|Windowsで最もましな日本語書体はこれだけ。ClearTypeにきちんと対応している日本語書体もこれだけ。

Verdana
2000、XP用|ユーザーの環境設定次第では欧文部分にのみアンチエイリアス(ClearType)がかかってしまう場合もあるが、目をつぶる。

MS Pゴシック
2000、XP用|入れないわけにはいかない。別に表示が改善するわけでもない……。

Osaka
OS9用|一応入れた。

sans-serif
その他(unix)用|一応入れた。