#はじめに
Advent Calendar 前日の投稿を見て驚きました。
「内容がかぶった！！！」
偶然なのでしょうがない。
ちゃんと住み分けできるよう、続きのような内容に軌道修正しました。
この記事では、<html>のfont-sizeはデフォルトの16pxのまま、4Kディスプレイまで考慮したfont-sizeを設計する方法を紹介します。
#デザインについて
ウェブサイトをデザインする時、文字サイズはある画面幅での固定値が指定されます。
その固定値のまま4Kディスプレイで見ると、文字が小さくなり過ぎ、デザインの印象が変わってしまいます。
それを解決するため、ブラウザ幅に対してのサイズを指定する単位vwを使うのですが、注意しないと文字サイズが小さくなり過ぎたり、大きくなり過ぎてしまいます。
#設計について
今回はブラウザ幅を限定して、要素のfont-sizeにvwを指定します。
それ以外のブラウザ幅の時はremを指定します。
- 1440pxの横幅でデザインされていることとする。
- 基本の文字サイズは16pxとする。
- ブレイクポイントと文字サイズのルールは、以下に設定する。
| ブレイクポイント | サイズルール | サイズ例 |
|---|---|---|
| 768px | ||
| 固定（rem） | 16px | |
| 1440px（デザインサイズ） | ||
| 変動（vw） | 16px ~ 40px | |
| 3600px（デザインサイズの2.5倍） | ||
| 固定（rem） | 40px |
#CSS (Scss)
html {
font-size: 16px;
}
.text {
@include responsive-font-size(16); //本文
}
.title {
@include responsive-font-size(24); //見出し
}
@mixin responsive-font-size($size:16) {
@include min-screen(768) {
font-size: get_rem($size);
}
@include min-screen(1440) {
font-size: get-vw($size, 1440);
}
@include min-screen(3600) {
font-size: get-rem($size * (3600 / 1440) );
}
}
// 切り替え
@mixin min-screen($size) {
@media screen and (min-width: $size) {
@content;
}
}
// 文字サイズ計算
$base-font-size: 16;
@function get-vw($size:16, $viewport:320) {
@return (100 / $viewport) * $size * 1vw;
}
@function get-rem($size:16) {
@return ($size / $base-font-size) * 1rem;
}
#まとめ
この方法ではベースとなるfont-sizeは16pxのまま、ブラウザ幅に合わせて各要素のfont-sizeをvwとremで流動的に切り替えています。
もし、ベースとなるfont-sizeをvwで変化させ、各要素のfont-sizeをremで設定する方法が知りたければ、こちらの記事をご覧ください。
4K、5Kといったディスプレイを使う人が増えてきています。
その人達のために、最優先ではないけれど最低限の設定をしておくと良いと思います。
文字サイズをベースにしてmarginをemで設定することで、余白のコントロールもしやすくなります。
あとはデザインの文脈に合わせて、部分的な対応をしましょう。以上です。