最近のフォントサイズ指定について考える

写真:Font

最近はレスポンシブ対応などで、フォントサイズの指定に迷ってしまいます。
レスポンシブのない時代はpxを使っていて、その後yui fontをSASSで使用してましたが、親要素に引っ貼られてしまうし、新しい技術も調べてみたかったので、まとめてみました。

スポンサードリンク

YUI Font

枯れた技術のYUI。と言いつつ最近のプロジェクトで使ったこともあります。pxを使った場合に発生する、ブラウザ間の差異をなくしてくれるものです。%指定なので親要素に引っ貼られてしまうのが問題ではあります。
 

 

em

Pxの強化版。だけど親要素に引っ貼られてしまうのが玉に瑕。
 
こちらはbodyにremを使用して、バグを回避しています。でもIE疑似要素については言及してませんね。そこだけpx使うとかかな。
 

 

rem

 

Root em。親要素に引っ貼られることなく、直感的に使用することができる。当初大本命的に扱われてましたが、バグ多いですね。
こちらの方はpxとremの二段構えで挑もうとしています。正直2つ分指定するのは面倒くさいです。
 
でもAutoprefixerを使うことで自動的にpxを出力してくれるので、この点は問題ないと思います。
 
気をつけなければ行けないところは、IEでは最新版にも関わらず疑似要素でバグがあるそうです。
 

 

ビューポート基準

calcやvwなんていうCSS3時代のフォントサイズ設定。メディアクエリーで再度指定する手間がかからないので、めちゃ便利みたい。でもpxみたいに直感的にわかりにくいしなぁ。
 
 
この方のやり方はなかなかいいのでは、と思います。
ただ、vwとcalc()はAndroid4.4未満では使用できません。とある通り、実用化はまだ先になるでしょう。
 
このあたり本当数学の分野似になってきているので、頭悪い自分の手には負えないですね。。。。。
 

まとめ

 
自分の場合は疑似要素に気をつけつつremをAutoprefixer使いつつ利用していこうと思いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください