最近は日本語のWEBフォントも気軽に使える様になってきた気がしますが、ページ内に多用することは表示スピードの懸念から、まだあまり積極的にはしていません。
かといって、ユーザー環境が違っても、割と等しく綺麗に表示される日本語デバイスフォントの選択肢というとあまり無く…
「メイリオ」「游ゴシック」あたりでしょうか。
そのメイリオを使用する際には、難点となるウェイトの問題があります。
それはノーマルとボールドしか選択肢が無く、ボールドも太すぎてタイトル等に使用する際にサイズによっては文字がつぶれて見えたりと、イマイチ納得の見た目にならないことです。
なんとかならないものかと長い間悩んでいたのですが、ごまかし方？を見つけました。
それは、フォントに text-shdow を設定する。です。
2番目のテキストがその設定をしたものです。
上記画像は上から以下の設定をしています。
１）ノーマルウェイト（font-weight:normal）
２）ノーマルウェイト＋テキストシャドー
（font-weight:normal, text-shadow:0.8px 0px 0px #fff）
３）ボールドウェイト（font-weight:bold）
（他にもletter-spacingやfont-familyなどを適当に設定します）
シャドーは文字サイズにより「0.8～1px」程度を設定し、あまり線がいびつにならないようにすることで、メイリオでも私が思い描いている太さを表現できるようになりました。
ちなにに、FIrefox,IE,Chromeでは問題なく同じ太さが保たれていました。
これ意外にけっこう使えるんじゃないでしょうか。
