デコマガジン
Google Fonts の Variable フォントとは、文字の太さや傾きなどを自由に調整できるフォント。
Adobe、Apple、Google、Microsoftが共同で開発したフォントの規格で、OpenTypeの進化版。
Googleでは、PC、スマホとも16pxを推奨されている。
Googleの生成AIの標準は style:normal weight:400 size:18px line-height:24px color:#001d35
Google検索の概要テキストは style:normal weight:400 size:14px line-height:22px color:#4d5156
Google検索のタイトルテキストは style:normal weight:400 size:20px line-height:26px color:#1a0dab
生成AIに少し大きめの書体を使用している。これは、通常検索画面との「差」を出していることもあると考えられるが、現状の会社用ウェブサイトでの傾向として、文字サイズが大きくなっていることから、上記の
style:normal weight:400 size:18px line-height:24px color:#001d35
が、PCの標準として使用したいと考える。
スマホについては、18pxは大きすぎるので、14px~16pxあたりが良いと思われる。
大きいほうが読みやすいが、スマホの画面内の情報量が少なく、スクロールが増えてユーザーに手間をかける気がするためである。
よく読んでいる Qiita 様のサイトでVariable Fontsを使ったアニメーションの解説をしていたのでパスを載せさせていただきます。