1. naoyeah

    No comment

    naoyeah
Changes in body
Source | HTML | Preview

コーディングするときちょっと気になったフォントのこと

フォントのことを言うと、コーディングする際にfont-familyのことなんてほとんど考えない。
けど、背景画像に合わせてテキスト(デヴァイスフォント)を配置するとき、ふと気になって夜も眠れなくなってしまったのでとりあえず書いてみる。

具体的な例をあげると、

・地域LPOとか言われるやつで地域別に訴求する文言を変えたいとき
・キャンペーンをさも今しかやってませんみたいに言うとき

campaign.png

要はこんな画像に毎月末の数字を動的に表示させるんだけど、
…なんと!ぴったり合わせたはずのベースラインがずれている…??
ということがありました。

MeiryoとHiraginoではベースラインの位置が違う

既存のサイトで指定されていたのがこんな感じのスタイル

css
font-family:"Meiryo", "Hiragino Kaku Gothic Pro", Arial, Verdana, sans-serif;

で、調べてみたらMeiryoとHiraginoではベースラインの位置が違うらしい。
というより「メイリオは特に広いディセンダを持っているようです。」とのことで、
悪いのはどちらかというとメイリオだった。
というお話。
※ディセンダ=ベースラインの下のスペース

結論

・背景画像の上に文字を重ねるときは、文章全部をデヴァイスフォントにしましょう。(画像に文字いれるな)
・あるいは、1~2pxくらいずれてもいいようにテキストを入れる部分に余裕を持たせましょう。
・動的に出す部分をテキストじゃなく画像にしましょう。
(↑この場合、すごい数の画像がいるはずなので、めんどくさかったらあきらめましょう。)

余談

そもそもなんでこーなったかというと、職場ではデヴァイスフォント(テキスト部分)=メイリオ だから。
あと、コーダーのpcにはヒラギノが入っていないから。
ヒラギノ入ってんのデザイナーくらいでしょ!スルーしよ、と思ったけどマックとかどーなの?(汗)
結論としてはコーディングというよりデザインの問題みたいになっちゃったけど
MSゴシックとかだったら位置がずれたりしないはず。
他にもありそうだけど検証できない…