viewport sizeにあわせて変化しつつアクセシブルかもしれないfont-size指定

この記事の概要

font-size の指定に vw や vh などの単位を使用する場合、アクセシビリティ的な問題が起きます。

ユーザーがブラウザの設定としてフォントサイズを変えていても、それが反映されなくなることです。

とは言え vw などで文字のサイズを指定するのが便利な場面もありますから、上手くやれないかと思い考えてみました。

タイトルに「かもしれない」と入れている通り、確証はありません。
ハック的な感じがしますし、コードの理解しやすさも下がっていると思います。
これをきっかけにもっと良いやり方が生まれたら嬉しいです。

内容

仮に 2vw 相当のサイズを指定する場合、次のようになります。

@property --1vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --1vw: 1vw;
  --vw-to-px: calc(tan(atan2(var(--1vw), 1px)));
}

p {
  font-size: calc(var(--vw-to-px) * 1rem / 16 * 2);
}

@property --1vw の部分は、現在 atan2 にバグがあるらしく、それを回避するための記述です。

上記の対応が不要であれば tan(atan2(var(--1vw), 1px)) の部分は本来 tan(atan2(1vw, 1px)) と書けます。
これは 1vw をピクセル換算した際、何ピクセルあるのか を表しています。

このあたりの詳しい内容はこちらの記事をご覧ください。
若干記載が違いますが、ほとんど同じことをやっています。

次に font-size ですが --vw-to-px つまりピクセル換算した vw に 1rem をかけて 16 で割ることで単位を rem へ変換しています。

最後の * 2 は 2vw を表したいので 2 です。
もし 3vw を表したければ * 3、4vw を表したければ * 4 です。

挙動

今回のやり方で作ったものはこのように動きます。
viewport 幅にあわせてフォントサイズが変わりつつ、設定のフォントサイズも反映されます。

逆に、通常の vw の指定だとこのようになります。
ブラウザの設定が反映されていません。

最後に

この記事の途中で引用したものを読んでいる最中にふと浮かび作ってみましたが、実用的かというと……であります。

記事の冒頭で記載していたように、この記事を通じてより良いやり方が生まれたらとても嬉しいです。