fluid()関数で可変フォントサイズをpx感覚のまま扱う

はじめに

前の記事では、html { font-size: 62.5%; } を使わず、rootの文字サイズは標準のままにして、Sassの rem() でpx感覚を残す方法を整理しました。

まだ読んでいない場合は、先に CSSのfont-size: 62.5%をやめたい。でも1rem=16pxに慣れない問題 を見ると、この続編の流れが追いやすいと思います。

固定サイズなら、たとえば rem(16)、rem(24) のように書けばかなり扱いやすくなります。

ただ、記事タイトルや大きな見出しは少し話が変わります。スマホでは24pxくらい、PCでは48pxくらい。ブレークポイントで急に切り替えるのではなく、その間を滑らかに変化させたいことがあります。

.article-title {
  font-size: clamp(1.5rem, 5.769vw - 2.192rem, 3rem);
}

clamp() は、最小値・推奨値・最大値の3つをまとめて指定できるCSS関数です。現在は主要ブラウザで広く利用でき、可変フォントサイズにも使いやすい機能です。

問題は、式を見ただけでは「1024pxから1440pxの間で、24pxから48pxへ変化する」と読み取りにくいこと。そこで、使う側にはデザイン上の数字だけが残るようにします。

clamp() を直接書くとつらい理由

clamp() 自体はとても便利です。MDNでも、値を最小値と最大値の範囲に収めながら、間では推奨値を使う関数として説明されています。

たとえば、次の指定はCSSとしては問題ありません。

font-size: clamp(1.5rem, 5.7692307692vw - 2.1923076923rem, 3rem);

ただ、制作中に本当に確認したいのは、だいたい次の4つです。

• 最小サイズはいくつか
• 最大サイズはいくつか
• どの画面幅から可変にするか
• どの画面幅で最大サイズにするか

計算済みの vw や切片だけが残っていると、この4つがコードから見えにくくなります。式として正しくても、あとから調整するときに「この数字、何の数字やったっけ？」となりやすいわけです。

fluid() 関数を用意する

まず、使う側の書き方を決めます。

1024pxから1440pxの間で、24px相当から48px相当へ滑らかに変化させたい場合は、次のように書けると分かりやすいです。

.title {
  font-size: fluid(24, 48, 1024, 1440);
}

引数は、最小サイズ、最大サイズ、可変開始幅、可変終了幅の順です。

CSSとしては clamp() を出力しつつ、Sassを書くときはデザインカンプ上のpx値で考えられます。修正するときも、どこを変えればよいかが分かりやすくなります。

前の記事で使った rem() と組み合わせるなら、関数は次のように書けます。

@use "sass:math";

@function rem($px, $base: 16) {
  @return math.div($px, $base) * 1rem;
}

@function fluid($min-size, $max-size, $min-width: 768, $max-width: 1440) {
  @if $min-width >= $max-width {
    @error "$min-width must be smaller than $max-width.";
  }

  $slope: math.div($max-size - $min-size, $max-width - $min-width);
  $slope-vw: $slope * 100vw;
  $intercept: rem($min-size - $slope * $min-width);

  @return clamp(
    rem($min-size),
    calc($slope-vw + $intercept),
    rem($max-size)
  );
}

この関数では、最小値と最大値は rem、その間は画面幅に応じて変化する値として計算します。可変開始幅と終了幅も引数として残るので、あとからコードを見返したときにも意図を追いやすくなります。

現在のSassに合わせて calc() を書く

以前のSassコードでは、calc() の中で変数を使うために #{$value} のような補間を多く書くことがありました。

ただ、現在のDart Sassでは、calc() の中でSass変数やSass関数をそのまま使えます。Sass公式ドキュメントでも、不要な補間を使うと計算の簡略化や型チェックが働きにくくなるため、変数はそのまま書く方法が案内されています。

// 以前よく見かけた書き方
calc(#{$slope-vw} + #{$intercept});

// 現在はこの形で書ける
calc($slope-vw + $intercept);

また、Sassの除算は引き続き math.div() を使います。CSSでは / が区切り記号として使われる場面も多いため、Sass側の計算は @use "sass:math"; と math.div() に寄せておく方が意図が明確です。

実務での使い方

使い方はシンプルです。固定でよいものは rem()、画面幅に合わせて印象を調整したいものだけ fluid() に分けます。

body {
  font-size: rem(16);
  line-height: 1.7;
}

.article-title {
  font-size: fluid(32, 64, 768, 1440);
}

.section-title {
  font-size: fluid(24, 48, 768, 1440);
}

.lead {
  font-size: rem(18);
}

すべてを可変にする必要はありません。本文、注釈、ボタン内テキストのように読みやすさを安定させたいものは固定で十分です。

一方、記事タイトルや大きなセクション見出しなど、画面幅に合わせてページ全体の印象を調整したい部分には fluid() が向いています。

clamp() とアクセシビリティ

可変フォントサイズで、もうひとつ忘れたくないのがアクセシビリティです。

clamp() で文字サイズに上限を付けるときは、ユーザーが文字を拡大した場合にも十分なサイズまで大きくできるかを確認します。MDNでは、文字サイズに clamp() を使う場合、最大値には相対単位を使い、少なくとも最小値の2倍を確保する例が案内されています。

// 24px相当 → 48px相当
.heading {
  font-size: fluid(24, 48, 768, 1440);
}

もちろん、数値だけでアクセシビリティが決まるわけではありません。ブラウザズーム、文字サイズ変更、実際の行間や折り返しも含めて確認する必要があります。

個人的には、「見た目として気持ちよく縮む」だけでなく、「拡大しても読める」までセットで確認するようにしています。

rem() と fluid() の使い分け

最後に、実務での使い分けを整理します。

自分なら、まず次のルールから始めます。

• rootの font-size は標準のままにする
• 固定サイズは rem() に通す
• 可変にする理由がある見出しだけ fluid() を使う
• 可変開始幅・終了幅はプロジェクト内でなるべく揃える
• clamp() の計算は関数内へ閉じ込める
• 文字サイズは拡大時の見え方まで確認する

参考情報

今回の記事では、clamp() の仕様とアクセシビリティ上の注意、Sassの計算式、math.div() の扱いを確認しました。

• MDN Web Docs「clamp()」
• MDN Web Docs「<length>」
• Sass「Calculations」
• Sass「Breaking Change: Slash as Division」
• Sass「sass:math」