#はじめに
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で設定することで、余白のコントロールもしやすくなります。
あとはデザインの文脈に合わせて、部分的な対応をしましょう。以上です。