デコマガジン

Google Fonts 備忘録

Google Fonts 備忘録画像

Google Fontsの文字太さ:Variable (1 axis)とは

Google Fonts の Variable フォントとは、文字の太さや傾きなどを自由に調整できるフォント。

Adobe、Apple、Google、Microsoftが共同で開発したフォントの規格で、OpenTypeの進化版。

Google画面の標準的な文字サイズ、太さ 等

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あたりが良いと思われる。
大きいほうが読みやすいが、スマホの画面内の情報量が少なく、スクロールが増えてユーザーに手間をかける気がするためである。

補足:Variable Fonts を使ったアニメーション

よく読んでいる Qiita 様のサイトでVariable Fontsを使ったアニメーションの解説をしていたのでパスを載せさせていただきます。

https://qiita.com/xrxoxcxox/items/5f318759d595b0d249b2

記事一覧


ホームページ制作
について

デコジャパンの
サービス内容

ホームページの
実績紹介

デコマガジン
HP&PC