👀

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

2021/02/11に公開

CSS

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

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

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

始めてみよう

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

index.html
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つのカスタムプロパティを使用しています。

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

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

適用してみよう

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

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

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

終わりに

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

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

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

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

始めてみよう

CSSを掘り下げよう

適用してみよう

終わりに

Discussion