カスタムプロパティ（CSS変数）とclampを利用してレスポンシブなフォントサイズ

端末の横幅(指定した範囲内)に比例してサイズを大きくするフォントの設定を、CSS変数とclampを利用して計算した時のメモです。

フォントの最小値と最大値、フォント最小値の時の端末の横幅とフォント最大値の時の端末の横幅を変数に代入するため、変更が容易にできそうです。

CSS 生成ツールを作成しました。Responsive font-size

contents

CSS
画面で確認
CSSジェネレーター

CSS

:root {
  --font-size: 100;
  --rF: calc(16 * var(--font-size)/100); /* root font size 16 */
  --minW: 375; /* viewport width at the minimum font size */
  --maxW: 1200; /* viewport width at the max font size */
}

.html {
  font-size: calc(var(--font-size) * 1%); /* 16px */
}

body {
  --minF: 0.875; /* minimum font size 14px */
  --maxF: 1; /* max font size 16px */
  font-size: clamp(var(--minF) * 1rem, var(--minF) * 1rem + (var(--maxF) - var(--minF))/(var(--maxW) - var(--minW)) * (100vw - var(--minW) * 1px) * var(--rF), var(--maxF) * 1rem);
}

h1 {
  --minF: 1.5; /* minimum font size 1.5rem 24px */
  --maxF: 3; /* max font size 3rem 48px */
  font-size: clamp(var(--minF) * 1rem, var(--minF) * 1rem + (var(--maxF) - var(--minF))/(var(--maxW) - var(--minW)) * (100vw - var(--minW) * 1px) * var(--rF), var(--maxF) * 1rem);
}

計算式が長くなりますが、紐解くと以下のとおりです。
①ルートのフォントサイズ、フォントの最小値と最大値、フォント最小値の時の画面幅とフォント最大値の時の画面幅を設定
②フォントの最小値と最大値の差を、最大横幅と最小横幅の差で除算（範囲内で1pxあたりどれだけフォントサイズを大きくするか）
③フォント最小値に、その時の端末の横幅と最小横幅の差（最小横幅からどれだけ大きくなっているか）を乗算したものを加算