本日は、Web制作をする際のフォントの単位のお話です。
Webサイトを作る際はフォント関連だけでいうと
フォントのカラーだったり、サイズだったり、太さだったり 色々あると思います。
その中でもまあ設定に悩むであろう単位のことについて触れていきます(*‘∀‘)
↓↓ まずWebサイトの制作でよく使われるフォント単位の一覧 ↓↓
・px
・%
・em
・rem
・vw
・vh
最近、よく使われるのは、remとかですかね。筆者はあまり使ったことがないのでWebサイトとか作る人としてはヤバいので次回から意識してみようと思いました（感想
さてではおひとつずつ見ていきましょう。
●px（ピクセル）
フォント単位の古豪。昔から使われている単位ですね。絶対指定の単位になります。画面サイズなどに対してその値から動かない。とのことです。古いIEでは拡大しても拡大されない問題が起こってしまうそうな。。。へぇ。。。( ˙-˙ )
筆者はこの単位がわかりやすいので今でも使ってしまいます。
●% (パーセント)
相対設定ですね。筆者はこれが今でもよく使う単位ですね。
親要素のフォントサイズに対応してのパーセンテージになります。
だいたい設定してなければ16px＝100%なんじゃないかなと思います。
14pxとかにして小さくしたいなーとすると88%となります。
●em(エム)
だいたい、% と同じです。（雑
bodyに62.5%と設定しておくと10pxと同義になるので楽だそうです。
●rem(レム)
上記2つの単位とは違いHTML（Root）に対してのemのためremと呼ばれます。
要はhtmlにフォントサイズ100%を充てておくと1remだと基本的に16pxになる感じですね。
最初にhtmlに指定しておけば難しいことはないですね。
筆者はあんまり使ってませんがレスポンシブの流行など今後のことを考えるとWeb上ではこちらの単位を使っていこうと思います。
●vw(Viewport width)
●vh(viewport height)
端末やブラウザの横幅に対して可変にするのが、vw
高さに対して可変になるのが、vh
筆者は何度かこの単位を使用したことがあるのですがなかなか難しい単位です。
よく考えて設計しないとフォントが超絶でかくなります（白目
どの場面で使うのかいまだに模索中です。
フォントサイズだけの話ではないですが
可変幅デザインなどが現代では主流なので、
やはり絶対値のpxはなるべく使わず、相対値での制作が望ましいですね。