Google Fonts & Google Material Symbols

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900
&family=Roboto:wdth,wght@75..100,100..900
&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet">

CSSへの設定

/*------------------------------------------------------------
 Google Fonts CSS sample
------------------------------------------------------------*/
/*
・weight
 100:thin 200:ExtraLight 300:Light 400:Regular 500:Medium 600:SemiBold 700:Bold 800:ExtraBold 900:Black 
・Noto Sans JP | Valiable | Weight: Full axis:200-900
 font-family: "Noto Sans JP", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal;
・Noto Serif JP | Valiable | Weight: Full axis:100-900
 font-family: "Noto Serif JP", serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal;
・Roboto | Valiable | Style: One value:Roman | Weight: Full axis:100-900
 | Width: Full axis: 75:condenced, 87.5:semiCondenced, 100:normal
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal;
 font-variation-settings: "wdth" 100;
*/

/*------------------------------------------------------------
 Google material symbols
------------------------------------------------------------*/
.material-symbols-outlined {
 font-family: 'Material Symbols Outlined';
 font-weight: normal;
 font-style: normal;
 vertical-align: middle;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 word-wrap: normal;
 direction: ltr;
 -webkit-font-smoothing: antialiased;
}

/*------------------------------------------------------------
 Google material symbols の個別設定
------------------------------------------------------------*/
/* 
・HTMLへ入れる場合
 <span class="material-symbols-outlined">navigate_next</span>
・CSSで入れる場合
 font-family: "Material Symbols Outlined";
 content: "\e5e1";
*/

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