ユーザー設定フォントサイズと許容サイズの課題と解決

ページ全体のフォントサイズを設定する際、ブラウザのデフォルト値（16px）を使うのが一般的だ。

html {
  /* ブラウザのデフォルト値を使う */
  font-size: 1rem;
}

しかし、ブラウザのユーザー設定フォントサイズは9〜24pxと幅広く、推奨値以外を設定した場合、デザインが崩れたり、ユーザー体験が損なわれたりする可能性がある。

例:Chromeのフォントサイズ

• 極小: 9px
  • ※2024年頃にfont-size: 10px未満でもレンダリングできるようになった
• 小: 12px
• 中（推奨）: 16px
• 大: 20px
• 極大: 24px

ユーザー設定フォントサイズの解決案

1. 上限/下限のガードレールを設定する

許容できるfont-sizeの大きさをもとに、clamp()を使ってユーザー設定のフォントサイズを制限することでデザインの崩れを防ぐ。

html {
  /* フォントサイズ上限 */
  --MAX: 20px;
  /* フォントサイズ下限 */
  --MIN: 12px;

  font-size: clamp(var(--MIN), 1em, var(--MAX));
}

2. 加重平均でデフォルトとユーザー設定のバランスをとる

デザイナー・開発者が想定するデフォルトのフォントサイズと、ユーザー設定のフォントサイズを加重平均を使ってバランスをとる。ユーザー設定がそのまま反映されないが、フォントサイズを大きく（または小さく）したいという意図を尊重できる。

html {
  /* ページのフォントサイズの重み */
  --WEIGHT-SITE: 0.6;
  /* ユーザー設定の重み */
  --WEIGHT-USER: 0.4;
  --DEFAULT-FONT-SIZE: 16px;

  font-size: calc(
    var(--WEIGHT-SITE) * var(--DEFAULT-FONT-SIZE) +
    var(--WEIGHT-USER) * 1em
  );
}

デモ

参考

• Designing for User Font-size and Zoom | OddBird