【2024年】Web制作会社20社のフォントサイズ調べてみた

皆さんはフォントサイズをどの単位で指定していますか？
会社のコーディング規約で指定されていることもあれば、特に指定がないこともありますよね。

特にスマホ表示時は、vwで指定するか、remで指定か、はたまたcalcで計算するか、結局どれがいいんだろう？
と思ったことありませんか？

ということで今回は、制作会社20社のスマホ時のフォントサイズ指定を調べてみました。
これでだいたいのトレンドをつかんで、コーディングに活かしましょう。

１．調査方法

まず調査方法ですが、以下のようにします。

• 位置情報での検索結果の影響を防ぐため、アメリカ版googleで「Web制作会社」と検索
• １ページ目に表示された制作会社、もしくは「制作会社おすすめ○○選」といった記事から20社抜粋
• 制作実績ページから最新の２件を調査（合計40ページ）
• フォントの指定が複数あった場合、本文テキストの指定単位を持ってきています

となります。
では早速結果にまいります。

２．調査結果

ということで結果はこのようになりました。
以下は調査結果をまとめた表になります。

縦軸の数字がサイト（1-1）は１社目の１ページ目を表します。
横軸がフォント指定の単位

％・・・1サイト
px・・・4サイト
vw・・・6サイト
rem・・・28サイト

その他・・・calcで可変
また、１社モバイル対応していないストロングスタイルな会社もありましたが、今回は除外しています。

3．総評

remでの指定が圧倒的に多い

ということでWeb制作会社20社40ページ、スマホ表示のフォントサイズで一番多い指定は圧倒的に「rem」でした。

ちなみにルート(html)のフォントサイズ指定をさらに見ると。

font-size:62.5%・・・ 70%
font-size:vwで指定・・・20%
font-size:pxで指定・・・10%

と、定番のルートフォントサイズ62.5%を指定したうえでのrem指定が最も多かったです。
直下的なフォントサイズの分かりやすさが人気のようですね。

％、emでの指定は圧倒的に少なかった

今回の調査では、％は１件のみ、emに至ってはゼロでした。
やはり親要素のサイズに影響を受けますので、直感的にサイズが分かりにくかったり、修正がしづらかったりする影響でしょうか？

ｐｘは少しだけあった

4件少ないですね。
ブラウザの文字サイズに影響受けない点はいいとは思いますが。。。

ｖｗは意外に少ない

これは個人的に結構以外でした。
スマホの画面に合わせて見た目を統一できるという点では、ｖｗはスマホ表示では結構メジャーかと思いましたが、そうでもないようですね。

画面幅が小さくなると、想定外にフォントサイズが小さくなったり、逆にタブレットだと大きくなりすぎたりその辺りの影響でしょうか？

clamp、minなどの使用がほぼなかった。

私が見落としていない限りclampやminなどの関数を使用しているフォントサイズはほぼありませんでした。
一部、使用している箇所はありましたが、本文やタイトルにはなかったです。（隅々まで見たわけではありませんが）

minやclampは、IE対応していないのでその影響かもしれません。
IEは昨年6月でサポート終了しており、サイト公開日は10月や11月でしたが、一応IE対応でコーディングしたということかもしれません。

ですので、今後はclamp、minなど関数を使用した、フォントサイズの指定が増えてくるかもしれませんね。

まとめ

以上　web制作会社20社のスマホフォントサイズの単位を調べてみた。でした。
今後さらに、font-familyの指定はpadding、ボタンの作り方などを調べる予定（一緒に調べとけという感じですが。。）ですので、また更新したいと思います。