流体タイポグラフィの基礎とアクセシビリティへの配慮について

投稿日：

2026年2月24日

カテゴリー：Web制作豆知識備忘録

タグ：流体タイポグラフィ

Facebook

LINE

B! ブックマーク

この記事では、ウェブサイトのタイポグラフィについて考えていた流れから「流体タイポグラフィ（Fluid Typography）」について、今一度自分で調べてみた結果をまとめてみました。

フォントサイズのサイズを指定する際に用いている単位から、流体タイポグラフィを使う上で気にするべきアクセシビリティに関する知識など、広い範囲の情報をまとめていますので、興味のあるものから読んでいただくと良いかなと思います。

フォントサイズによく用いる単位について

px（ピクセル）

これまでもよく利用されてきた単位で、最も直感的に扱うことができる単位です。また、デザインカンプを用意されているような実装であれば、デザインカンプの数値を読み取って、そのまま利用することで再現することができました。

しかし、相対的な拡大・縮小に弱い点や、ユーザーの設定に柔軟に対応しにくいというデメリットもあります。

body {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

このような実装になっていた場合に、全体的に10%大きくしたくなったら全て書き換える必要があります。これが拡大・縮小に弱いと考えられる点です。

また、ユーザーの設定に柔軟に対応しにくいという点ですが、

html {
  font-size: 100%;
}

としている場合、ブラウザのデフォルト設定を 20px にした場合、1rem = 20px となり、全体的に自然に大きくなります。

しかし、

html {
  font-size: 16px;
}

としている場合、ブラウザのデフォルト設定を 20px にした場合でも無視されてしまいます。これがユーザーの設定に柔軟に対応しにくいという点です。

em（エム）

親要素のフォントサイズを基準にする相対単位です。注意点としては、入れ子（ネスト）すると累積していくという点です。

.oya {
  font-size: 20px;
}

.kodomo {
  font-size: 1.2em; /* 20px * 1.2 = 24px相当 */
}

.mago {
  font-size: 1.2em; /* 24px * 1.2 = 28.8px相当 */
}

部品（コンポーネント）単位でスケールしたい場合には利用価値は高いです。しかし、ウェブサイト全体を em で設計しようとすると、大変になることもあるかもしれません。

rem（レム）

ルート（html）要素のフォントサイズを基準にした単位です。

html {
  font-size: 16px;
}

と設定している場合、1rem = 16px となります。

rem を使うことで、全体のスケール管理がしやすくなります。そして、em での注意点でもあった入れ子（ネスト）を気にする必要がないのも特徴的です。

また、アクセシビリティに対応しやすいという点も大きく評価されていて、最近では実務でもよく利用される単位になっています。

vw/vh

画面サイズに応じて自動で変わる単位です。

1vw は画面幅の 1%
1vh は画面高さの 1%

画面幅が 1000px なら 1vw = 10px となります。また、画面幅が 500px であれば 1vw = 5px となります。

ファーストビューなど画面いっぱいに表示したい際に、

.first-view {
  height: 100vh;
}

というような形で使います。

しかし、フォントサイズに活用しようとすると、大きくなりすぎたり、小さくなりすぎたりするため、扱いが難しい場面もあるので注意が必要です。

clamp() について

CSS の clamp() 関数は、値の範囲を制限しつつ、その範囲内で値を流動的に変化させることができる便利な機能です。

clamp() – CSS | MDN

clamp() は CSS の関数で、中央の値を定義された下限値と上限値の範囲内の値の範囲内に制限します。この関数は、最小値、推奨値、および最大許容値の 3 つの引数を取りま…

developer.mozilla.org

基本的な書き方は以下のようになります。

clamp( [最小値], [推奨値], [最大値] )

最小値：値がこれよりも小さくなることはありません
推奨値：通常、vw などの可変単位を使用して、画面サイズに合わせて値を変化させます
最大値：値かこれより大きくなることはありません

例えば、

font-size: clamp( 1rem, 2.5vw, 2rem );

このように指定した場合、文字サイズは通常画面幅の 2.5%（2.5vwより） になりますが、どれだけ画面を小さくしても 1rem 未満にはならず、どれだけ画面を大きくしても 2rem より大きくなることはありません。

メディアクエリを使ったフォントサイズの指定について

現在でも使われている場合も多いであろうメディアクエリを使ったフォントサイズに切り替えについても紹介しておきます。

メディアクエリ自体の概念は 1990 年代から存在していたようですが、実際にウェブ制作の現場で画面サイズに応じてフォントサイズやレイアウトを帰る手法が確立されたのは、2010 年にイーサン・マルコッテ氏がレスポンシブ・ウェブデザイン（RWD）を提唱したことが大きな転換点となりました。

特定のブレイクポイント（画面幅の切り替わり目）でフォントサイズを明示的に定義するもので、例えば、モバイル向け、タブレット向け、デスクトップ向けといった画面サイズごとに値を実装します。

メリットとしては制御のしやすさが挙げられます。特定の画面幅で、どのようなサイズになるのかが明確であり、設計がとてもシンプルです。

また、ウェブコンテンツ内にある本文として扱われるテキストに対しては、画面幅の変化に対して数ピクセル程度の変化しかないことも多く、そういった場合には流動的に変化させるよりもメディアクエリによる管理の方が推奨されるケースもあります。

Fluid typography is not as effective or useful if the difference between the minimum and maximum is just a few pixels, as it’s the usual case with the body text. Body text with a small difference between the minimum and maximum font sizes won’t look out of place on any viewport width, as it’s the case with larger font sizes. For those cases, it’s recommended to use regular responsive typography with breakpoints.

参照：https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/

またデメリットとしては、ブレイクポイント付近での不自然なサイズ変更が考えられます。

.hoge {
  font-size: 1rem;
}

@media ( min-width: 768px ) {
  .hoge {
    font-size: 1.5rem;
  }
}

@media ( min-siwth: 1024px ) {
  .hoge {
    font-size: 2.0rem;
  }
}

上のコードのように、ブレイクポイントごとに固定値を使用するため、ブレイクポイントの直前や直後で文字サイズが急激に変化したり、余白とのバランスが崩れて見えたりすることがあります。

また、広く多くのデバイスに対応しようとしてブレイクポイントを増やしていくと、コードの管理が難しくなり、メンテナンス性が低下してしまいます。

流体タイポグラフィとは

流体タイポグラフィ（＝Fluid Typography）とは、滑らかに流動的にフォントサイズを変化させる手法のことを指します。

上でも紹介した従来のレスポンシブなタイポグラフィでは、タブレットやデスクトップPCといった特定のブレイクポイントでメディアクエリを使用してフォントサイズを段階的に切り替えていました。

これに対して、流体タイポグラフィは主に CSS の clamp() 関数とビューポート単位 vw を組み合わせて実現されます。（clamp() 関数については上で簡単に説明しています）

流体タイポグラフィを利用するメリットとしては、

滑らかな変化
コードの簡素化
一貫性の維持

などが考えられます。

メディアクエリを使ったフォントサイズの指定でも紹介したように、その方法ではブレイクポイント前後での変化の大きさがありました。しかし、流体タイポグラフィの仕組みを利用することによって、この問題を回避することができます。

また、多くのブレイクポイントを記述することでコードが煩雑になってしまうこともデメリットとして紹介しましたが、流体タイポグラフィの仕組みではそのようなコードの記述は必要ないため、コードを煩雑にはしません。

さらに、画面サイズに関わらず、見出しの大きさやグリッドのギャップなどを一定の比率で保つことができるため、タイポグラフィやレイアウトの規則に一貫性を持たせることができます。

しかし、すべてのケースにおいて万能というわけではありません。

フォントサイズの変化が大きいテキスト要素に対しては適しているものの、本文など変化の小さいテキスト要素には適していないと考えられています。

流体タイポグラフィの推奨値を算出する方法

推奨値は clamp() 関数の2つ目の引数に定めることができる値で、特定の画面幅（ビューポート幅）の範囲内でフォントサイズを滑らかに変化させるためのものです。

一般的に、ビューポート幅（vw）とベースサイズ（rem）を組み合わせた計算式で構成されます。

計算に必要な４つの値として、

$x _1$ ：変化を開始する最小の画面幅（例：600px など）
$x _2$ ：変化を終了する最大の画面幅（例：1400px など）
$y_1$ ：最小の画面幅の時のフォントサイズ（例：36px など）
$y_2$ ：最大の画面幅の時のフォントサイズ（例：52px など）

算出したいフォントサイズ $y$ は、現在の画面幅 $x$ に対して以下の式であわらすことができます。

y = \frac{v}{100} \cdot x + r

ここで、 $v$ は変化率（＝vw 単位）、 $r$ はベースとなる定数（px 単位、後に rem に変換）です。

これらの値を clamp() の推奨値として使用できる形式にするために、以下の２つのステップで計算します。

$v$ （変化率）の計算

画面幅の変化に対して、どれくらいの割合でフォントサイズを変化させるかを求めます。

v = \frac{100 \cdot (y_2 – y_1)}{x_2 – x_1}

$r$ （ベースとなる定数）の計算

次に、画面幅の影響を受けない固定値部分をピクセル単位で求めます。

r_{px} = \frac{x_1 \cdot y_2 – x_2 \cdot y_1}{x_1 – x_2}

得られた $r$ はピクセル単位のため、最終的にブラウザのデフォルトフォントサイズ（通常16px）で割り、rem 単位に変換します。

r_{rem} = \frac{r}{16}

clamp() へ導入

ここまでで求めた値などをclamp()へ入れます。

clamp(\;[最小サイズ\;rem],\;v\;vw + r_{rem}\;rem,\;[最大サイズ\;rem]\;)

具体的な数値で計算してみる

では実際に計算をしてみましょう。画面幅が 600px まで 36px(=2.25rem)、1400px で 52px(=3.25rem) に変化させたい場合、以下のように計算します。

$v$ の算出

v = \frac{100 \cdot (52 – 36)}{1400 – 600} \ =2

$r$ の算出

r_{px} = \frac{600 \cdot 52 – 1400 \cdot 36}{600 – 1400} \ =24

rem への変換

r_{rem} = \frac{24}{16} \ =1.5

clamp() に組み込む

算出された $v$ と $r_{rem}$ を組み合わせて、以下のように記述することができます。

font-size: clamp( 2.25rem, 2vw + 1.5rem, 3.25rem );

このような数学的アプローチをとることで、異なる複数のフォント要素が同じ画面幅で同期して変化を開始・終了できるようになります。これにより、デザインの一貫性とアクセシビリティを両立させることが可能になります。

アクセシビリティに関して配慮しなければならないこと

流体タイポグラフィの仕組みを利用する上で、アクセシビリティの観点から配慮しなければならない点の一つに、ユーザーによるテキスト拡大（ズーム）を妨げないことがあります。

WCAG 達成基準 1.4.4 への対応

ウェブアクセシビリティのガイドラインである WCAG（Web Content Accesibility Guideline）の 1.4.4 に記載されている以下の内容への対応について配慮が必要です。

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

参照：https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

日本語ドキュメントから引用すると、