---
title: "流体タイポグラフィの基礎とアクセシビリティへの配慮について"
canonical_url: "https://olein-design.com/blog/fluid-typography-basics-and-accessibility"
language: "ja"
date_published: "2026-02-24T17:09:16+09:00"
date_modified: "2026-02-24T17:12:32+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "Web制作豆知識"
    - "備忘録"
  post_tag:
    - "流体タイポグラフィ"
---

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

この記事では、ウェブサイトのタイポグラフィについて考えていた流れから「流体タイポグラフィ（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()` 関数は、値の範囲を制限しつつ、その範囲内で値を流動的に変化させることができる便利な機能です。

[埋め込みコンテンツ](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/clamp)

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

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

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

例えば、

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

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

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

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

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

[埋め込みコンテンツ](https://alistapart.com/article/responsive-web-design/)

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

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

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

> 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/](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`）を組み合わせた計算式**で構成されます。

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

- x1x _1：変化を開始する最小の画面幅（例：`600px` など）
- x2x _2：変化を終了する最大の画面幅（例：`1400px` など）
- y1y_1：最小の画面幅の時のフォントサイズ（例：`36px` など）
- y2y_2：最大の画面幅の時のフォントサイズ（例：`52px` など）

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

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

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

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

### vv（変化率）の計算

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

v=100⋅(y2−y1)x2−x1v = \frac{100 \cdot (y_2 - y_1)}{x_2 - x_1}

### rr（ベースとなる定数）の計算

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

rpx=x1⋅y2−x2⋅y1x1−x2r_{px} = \frac{x_1 \cdot y_2 - x_2 \cdot y_1}{x_1 - x_2}

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

rrem=r16r_{rem} = \frac{r}{16}

### clamp() へ導入

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

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

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

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

### vvの算出

v=100⋅(52−36)1400−600 =2v = \frac{100 \cdot (52 - 36)}{1400 - 600} \ =2

### rrの算出

rpx=600⋅52−1400⋅36600−1400 =24r_{px} = \frac{600 \cdot 52 - 1400 \cdot 36}{600 - 1400} \ =24

### rem への変換

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

### clamp() に組み込む

算出された vv と rremr_{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](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html#dfn-captions) and [images of text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html#dfn-image-of-text), [text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html#dfn-text) can be resized without [assistive technology](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html#dfn-assistive-technology) up to 200 percent without loss of content or functionality.
>
>  参照：[https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html)

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

> [キャプション](https://waic.jp/translations/WCAG21/Understanding/resize-text.html#dfn-captions)及び[文字画像](https://waic.jp/translations/WCAG21/Understanding/resize-text.html#dfn-image-of-text)を除き、[テキスト](https://waic.jp/translations/WCAG21/Understanding/resize-text.html#dfn-text)は、コンテンツ又は機能を損なうことなく、[支援技術](https://waic.jp/translations/WCAG21/Understanding/resize-text.html#dfn-assistive-technology)なしで 200％ までサイズ変更できる。
>
>  参照：[https://waic.jp/translations/WCAG21/Understanding/resize-text.html](https://waic.jp/translations/WCAG21/Understanding/resize-text.html)

この達成基準に対する意図などはこちらのドキュメントでしっかりと解説されています。

[埋め込みコンテンツ](https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)

こちらの内容ですが、ブラウザのズーム機能を使ってユーザーが200%まで拡大できるようにしましょうということです。

例えば、ブラウザを 500% までズームした場合、テキストは元のサイズの 200%（２倍）以上に拡大される必要があります。

そして、ブラウザのズーム機能は、ビューポート自体を変えるものではないため、`vw` （ビューポート単位）で指定された値はズームしても拡大されません。

ですので、`clamp()` で最大値を制限しすぎたり、推奨値を `vw` のみで依存させたりすることで、ズームしてもテキストが十分に拡大されず、達成基準を満たせない可能性があります。

### アクセシビリティを確保するための対応方法

まず1つ目は、**最大サイズは最小サイズの2.5倍以内にする**という点です。

モダンブラウザにおいて、最大フォントサイズが最小フォントサイズの2.5倍以下であれば、500%ズームした場合でも確実にテキストが200%以上に拡大されるということが、数学的な分析により示されています。

[埋め込みコンテンツ](https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/#thinking-mathematically)

2つ目に、`rem` 単位と`vw` 単位を組み合わせるという点です。

この点は、これまで紹介している流体タイポグラフィを実現する上で、必然的にそうなることを紹介しているので特に問題はないかと思います。

注意する点としては、推奨値だけでなく、最小値と最大値も `rem` を使用するようにしましょう。

## 〆

今回は流体タイポグラフィについて、改めて調べてみた情報と、その途中でアクセシビリティへの観点からも調べてみた際に得られた知見をまとめてみました。

昨今では、生成AIを使ってなんでも簡単に作れるようになってきてはいますが、指示を出す側がさまざまな視点を持った上でプロンプトを入力しないと、AI側は特に配慮してくれないことも多いです。

ですので、しっかりと指示を出せる側になるためにも、こういった基本的な内容を振り返ってみて実際に活かせるように準備しておかないといけませんね。

参照記事

- [アクセシビリティを意識したフォントサイズについて](https://evoworx.dev/blog/a11y-font-size/)
- [Modern Fluid Typography Using CSS Clamp — Smashing Magazine](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)
- [Why should type be fluid, anyway? by Elise Hein](https://elisehe.in/2021/03/13/fluid-type)
- [CSS Clamp and its Accessibility Concerns](https://www.michelecheow.com/css-clamp-and-its-accessibility-concerns/)
- [Addressing Accessibility Concerns With Using Fluid Type — Smashing Magazine](https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/)