レスポンシブなフォントサイズのための公式

 (jameshfisher.com)
28 ポイント 投稿者 xguru 2024-03-22 | 3件のコメント | WhatsAppで共有
  • ニューヨーク・タイムズ、Medium、Substack など多くのウェブサイトは、ブレークポイント（768px など）を設けて、その基準でフォントサイズを変更している（1.125 rem と 1.25rem）
  • CSS の calc を使えば、これに近い値を記述できる calc(1.0625rem + 0.2604vw)
  • これを丸めると 1rem + 0.25vw と表せる。だから私は今、多くのウェブサイトで次の CSS を使っている
:root {  
  font-size: calc(1rem + 0.25vw);  
}

関連記事

3件のコメント

 
yanggitak 2024-03-25

PCでデザイン案どおりに実装するには、スクロールバーの幅を除外するCSS variableも式に含める必要があるのではないかと思います。vw単位はスクロールバーの幅まで含んだ幅を基準にすると理解しています。

画像全体のように周辺要素の余白まで同じ比率で増減させる必要がある場合は、以下のサイトのフォント設定方式も参考になると思います。Galaxy Fold（320px）や高解像度モニターの場合は、ブレークポイントで適切に制限をかけてもよさそうです。
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
 
cometkim 2024-03-22

これは有用な近似値ではありますが、実際の Fluid Typography で使われるブレークポイントを完全に置き換えるのは難しいです。

通常、clamp(min_rem, calc_relative_vw, max_rem) はブレークポイントごとにコンテンツの視認性やコンテナの形状に応じて異なる形で適用されますが、単一の式で対応しようとすると、一般的ではないフォームファクターへの対応が難しくなります。

たとえば、Android のポップアップウィンドウや 21:9 モニター、HMD のような環境です。
 
nemorize 2024-03-23

AndroidのポップアップやHMDみたいなものはよく分からないのですが……
21:9 みたいなものは vh も組み合わせて使えば悪くないのではないでしょうか？
calc(1rem + min(1vw, 1vh) * 0.25) みたいな感じで。