CSS clampを使った動的タイポグラフィ

6 min read読了の目安(約5600字

https://twitter.com/piccalilli_/status/1357713340852826114

元記事:Fluid typography with CSS clamp

【邦訳にあたって】レスポンシブレイアウトのために、min-font-sizemax-font-sizeのようなものをどうにか実装できないか思案していました。今までは、font-size: calc(1vw + 10px)のような形で代替していましたが、どうしても細かい調整に難を抱えており、より良い方法を探していました。そんな折、元記事であるFluid typography with CSS clampと偶然出会いました。筆者であるAndy Bell氏のご好意により、邦訳の許可をいただきましたので、私の学習を兼ねて公開させていただきます。


モダンなCSSのサイジング機能を使用した、シンプルでアクセシビリティに配慮した設定可能な動的なタイプシステムの作成方法を学びましょう。


私は clamp()の大ファンです。これは、私が CSS で最もやりたいこと、つまり、ブラウザを適切に機能させる方法のヒントを与えてくれます。また、調整も容易なので、レイアウト要素に用いるにも便利です。

このチュートリアルでは、clampを使用して、CSS のカスタムプロパティを使用して設定できる、動的なタイプシステムを作成してみましょう。

始めてみよう

このチュートリアルに必要なのは、HTMLページとCSSファイルです。以下のファイルを作成してください。

  1. index.html
  2. global.css

次に、index.htmlの中身を下記のようにしてください。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Fluid type demo</title>
    <link rel="stylesheet" href="global.css" />
  </head>
  <body>
    <article class="[ post ] [ flow ]">
      <h1>Fusce dapibus, tellus ac cursus commodo</h1>
      <h2>Donec ullamcorper nulla non</h2>
      <h3>Morbi leo risus, porta ac consectetur</h3>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
    </article>
  </body>
</html>

HTMLは以上です。テキストの中身は、動的タイプシステムを適用するためのダミーのプレースホルダーです。よくできました!

CSSを掘り下げよう

さて、いよいよお楽しみです。まずは基本的なグローバルスタイルを追加してみましょう。global.cssを開いて、以下を追加します。

global.css
body {
  background: #f3f3f3;
  color: #252525;
  line-height: 1.5;
  font-family: Georgia, serif;
  padding: 2rem;
}

h1,
h2,
h3 {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
    helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  line-height: 1.1;
  font-weight: 900;
}

これで少し見映えがよくなりましたね。ベースには私のお気に入りのフォント、Georgia を使用し、見出しにはシステムフォントスタックを使用しています。このようにコントラストをつけることで、動的タイプシステムが実際に動作しているのがよくわかるようになります。

次に、今回肝となる部分、つまり動的タイプの設定を追加します。global.css を開いて、次のように追加します。

global.css
h1,
h2,
h3,
p {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
}

ずいぶんと色々加筆しましたが、少しずつ分解して見ていきましょう。
clamp()関数は最小値、理想値、最大値を取ります。これにより、サイズの制限を作成することができます。

これらすべてを動かすために、3つのカスタムプロパティを使用しています。

  1. --fluid-type-min はテキストが入る最小値です。
  2. --fluid-type-target は、私たちの理想とする流動的タイプ設定です。calc()を使用しているのは、ビューポート単位で文字の大きさを指定すると、ズーム時に問題が発生する可能性があり、WCAGアクセシビリティの障害になるからです。
  3. --fluid-type-max は、テキストを許容する最大のサイズです。

3つのカスタムプロパティについては、2番目のパラメータとしてデフォルト値を設定しています。これは、この動的タイプのシステムをどのプロジェクトにも適用できることを意味しています。

動的タイポグラフィを用いる際には責任を持って使用してください。幸いなことに、 Adrian Roselli氏がこのことについて詳しく書いてくれています具体的な基準はこちらです。

拡大したときにテキストが十分な大きさとなり、縮小したときにテキストが十分な小ささとなっているかどうかをテストすることは本当に重要です。このチュートリアルでは動的なフォントサイズの計算の一部として rem を使うことで、十分なサイズの範疇に収まるようになっています。

適用してみよう

上記CSSで、動的タイプシステムをh1, h2, h3, pの要素に適用しました。なお、このチュートリアルでは、CSS記述においては、セレクタ指定を使ってシンプルにしています。移植性を最大限に高めるためには、これらをユーティリティクラスに変えてもよいでしょう。

さて、カスタムプロパティを使用して、それぞれに特定の設定を追加しましょう。そうしないとすべてのテキストが同じサイズになってしまいますからね。

では、global.cssを開いて、以下を追加します。

global.css
h1 {
  --fluid-type-min: 2.5rem;
  --fluid-type-max: 5rem;
  --fluid-type-target: 5vw;

  max-width: 15ch;
}

h2 {
  --fluid-type-min: 1.8rem;
  --fluid-type-max: 3rem;
}

h3 {
  --fluid-type-min: 1.5rem;
  --fluid-type-max: 2.5rem;
}

h2,
h3 {
  max-width: 30ch;
}

p {
  max-width: 60ch;
}

<h1>については、--fluid-type-target5vwと大きなサイズにしています。ビューポートに基づく単位を用いることで、画面サイズに応じて大きくなる割合を高めて、特大サイズを維持しやすくしています。逆に大きくなるペースを下げて、最小サイズと最大サイズの差を少なくするには--fluid-type-targetのサイズを小さくします。

他の要素については、標準的な変化率で構わないので、標準的なrem単位を使って、一般的な最小サイズと最大サイズを設定しているだけで十分です。

読みやすさを向上させるためにch単位で全ての要素の幅を制限しています。それについてはこちらの記事で詳しく紹介しています。

これで完成です!作ったものがどんな風になっているかはこちらのライブデモで確認することができます。また、完成したソースファイルをダウンロードすることもできます。

終わりに

これは非常にシンプルでシンプルなシステムで、多くのユースケースを快適にサポートします。より高度で複雑なデザインには、非常に細かいコントロールが可能な Typetura や、今日学んだこのアプローチからレベルアップした Utopia などを使うことをお勧めします。

正直に言うと、私は個人的に動的タイポグラフィの大ファンというわけではありません。長年に渡る動的タイポグラフィの歴史は波瀾万丈の連続でり、個人的には、メディアクエリを使ったサイズスケールを作りたいと思っています。なお、このサイト(訳者注:元記事のサイトであるpiccalil.li)もこの記事の執筆時点ではそうなっています。

とは言っても、動的タイポグラフィはまだまだ需要があるので、今日学んだことは間違いなくどこかの時点で役に立つでしょう。

それではまたお会いしましょう!お元気で 👋