フォントサイズのあれこれ

最近のマイブームは焼きそばパン。

どうもこんにちは、カリスマギタリストです。

夏もいよいよ本番・・・みなさん満喫してますか？

さて、今回はフォントサイズに関してのあれこれ。

弊社ではレスポンシブ対応が基本なのですが、そこで発生するのがフォントサイズ問題・・・。　毎回どうするかなーと少し考えてしまいます。

従来通りのやり方であればブレイクポイント毎にPC、Table 、SPとそれぞれに設定するのがセオリーですよね。

※だがしかしブレイクポイントが少ないに越したことはない・・・(やらないとは言っていない)

かと言って可変サイズにすると計算が・・・

そんな時にはこんな方法を使っています。

みんな大好きそう、 SASS ですね。

SASSのmixinを使用すると面倒な計算が不必要！

■例えば画面幅1280pxの10pxを基準にしたとします。

@function get_vw($size, $viewport:1280) {
$rate: 100 / $viewport;
@return $rate * $size * 1vw;
}

@mixin fs-vw($font_size:10) {
font-size: $font_size * 1px;
font-size: get_vw($font_size);
}

上記の通り設定し、あとは include の引数に指定したいサイズを入力するだけ！

んー　簡単である。　便利である。

でも注意すべき点もあるのです。

例えばデザイン上で12pxとかだと可変した時(ブラウザサイズを狭める)に非常に見づらい・・・　小さい・・・。　

少々、駆け足でのお話となりましたが、フォントサイズで悩んだ際は是非ご検討を！

一応、下記に全部のコードを載せておきますので、

コピペで使用してください。

----------------例-------------------

@function get_vw($size, $viewport:基準となる画面幅) {
$rate: 100 / $viewport;
@return $rate * $size * 1vw;
}

@mixin fs-vw($font_size:画面幅に対する基本フォントサイズ) {
font-size: $font_size * 1px;
font-size: get_vw($font_size);
}

@include  fs-vw(デザイン上でのフォントサイズ);