文字の大きさ

2017-08-24

日々、勉強をしています氷翠です。

WEBのデザインをするとき、最初に考えているのが、基本の文字の大きさ。
スタイルシートで言うところの「font-size」です。
昔からあるのだけど、あまり気にしていなかったｗ

パソコンのブラウザでは、文字サイズは標準で16pxという設定になっているかと思います。
もちろん、これは使っているブラウザによって違っているかもしれません。

まず、スタイルシートで使える単位ですが、基本的には「px（ピクセル）」を使っているかと思います。
その他に「pt（ポイント）」「%（パーセント）」「em」…といったものがありますが、CSS3では「vw」とか「vh」とかが登場しています。

その画面の大きさ全体の横幅が「100vw」、画面の縦の幅が「100vh」という感じ。％とどう違うのか？
％はとある要素の中でいけるところまでが100%。別に画面全体が…というわけではないわけです。

そういった違いを理解していないと、なかなか単位は難しいものです。

ということで、HTMLタグ、bodyタグの中で基本になる文字の大きさを設定しますが、氷翠は計算によって出てきた答えを設定してみます。
つまり、画面の大きさによって変化する。

例えば、キャリアのベースが「iPhone7」横幅は375px。これを100vwということになります。基本的には16pxにしたいので、比例の式で表現してみます。
375px : 100vw = 16px : Xvw;
つまり、画面の大きさによって基本文字サイズが変化するので、画面に対してどのくらいのサイズなのか？
という式です。
そこで出て来る答えが…

1600 ÷ 375 = 「4.2666……」という答えです。