Windowsの游書体はタブレット向き？

OSはWindowsでのお話。デスクトップPCでWindowsの游書体を適用したとき、外付け液晶モニター上では「デザインは優れてるけどちょこっと細いなぁ」というのが第一印象だった。しかし、2in1タブレットPCで適用したとき、ディスプレイ上では「めちゃめちゃ見やすいなぁ」と印象が変わった。特にウェブブラウザーでのサンセリフ体のYu Gothic UI。Windowsの游書体は、タブレットのような画素ピッチの狭いディスプレイでの表示を考慮されて最適化されてるのか？とまで思った。イマドキだなぁ。

画素とは

ちなみに画素（ピクセル）とは、ディスプレイを構成する一つ一つの点を指し、画素ピッチとは、画素の間隔・距離を指す。画素ピッチが広いとフォントも大きく表示されるが、画素ピッチが狭いとフォントも小さく表示される。言い換えれば、画素ピッチが広いとフォントは粗く表示されるが、画素ピッチが狭いとフォントは細かく、つまりは高詳細に表示される。大雑把だが、横1920ピクセルのモニターに横一列に100文字表示させたとき、24.5インチ（横幅544mm≒1920ピクセル×画素ピッチ0.283mm）と11.6インチ（横幅256mm≒1920ピクセル×画素ピッチ0.134mm）の液晶モニターでは見え方にどのような差異が生じるかを想像すれば簡単だ。

高精細が見やすいとは限らない

イマドキのガジェットのディスプレイは画素ピッチが相対的に狭くて高精細な場合が多い。しかし、ウェブページで最も多く利用されているであろう（Google Chromeで初期設定の）16ピクセル程度の文字だと小さく表示されて困る。ただこのとき、画数の多い（概ね8画以上の）漢字はやや細いくらいのフォントのほうが潰れずに表示されるため見やすいのかも知れない。日本語ネイティブな人は斜め読みするときまず漢字を目で追っていく傾向にあるから、これ、重要。

CSSでのフォント指定でお願い

以上のとおり、タブレットPCのClearTypeに対応したウェブブラウザーで、フォントファミリーのサンセリフ体ではYu Gothic UIを表示するよう設定してみた。しかし、いざウェブページを表示すると、Yu Gothic UIで表示されないことがしばしば。理由は、そのウェブサイトが、CSSで例えばMeiryo UIで表示するようガチガチにフォントを指定しているから。ごく稀だがCJKのウェブフォントを表示させてくるウェブサイトすら存在する。ウェブブラウザーやディスプレイの表示能力、更には己の眼の能力等を考慮し、せっかくウェブブラウザーでフォントを設定していても、華麗にスルーしてくれる。これ、ちょこっと困る。画数の少ない欧文書体は構わないとして漢字、つまりは和文のフォントくらいは設定したものをストレートに使わせてもらえるほうが助かる。

当サイトのCSSの例

当サイトでは次のとおり欧文書体のみ指定。使用テーマのデフォのフォント指定に対し、林檎向けにHelvetica NeueとHelveticaという欧文書体を挿入しだだけ。ちなみにOpen SansとはDroid Sansから派生したオープンソースの欧文書体で、ウェブフォントで提供されている。なおOpen Sansもやや細めなので、ウェブブラウザーでサンセリフ体に太めの和文フォントが指定されている場合の親和性が気にはなっている。Helvetica Neueもやや細め。

html, body, h1, h2, h3, h4, h5, h6, div, p, address, blockquote, dt, dd, li, caption, th, td, input, select, option, label, textarea, object, embed, iframe {
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
textarea, pre, code, kbd, samp, var, tt {
  font-family: monospace;
}

デスクトップPCのフォントは？

デスクトップPCにはMeiryo UIを適用していたが、実はRobotoJ（具体的にはRobotoJAA Regular OTF）に乗り換えようかと考えていた。メイリオはあんなにエレガントなデザインなのに、なぜMeiryo UIはデザイン的にやや落ちるんだろう。見やすいのは確かだけど。