引き続き、見出しのウィジェットについて、このページでは見出しウィジェットの [スタイル] タイポグラフィの設定についてご紹介します。改めて、タイポグラフィ内で設定できることはこちらです。
フォント：フォントの種類を設定（基本的にGoogle fonts）
サイズ：文字の大きさを設定（px, em, rem, vw, 手入力）
太さ：文字の太さを設定（100〜900, 普通, Bold）
変換：アルファベット表記変換（大文字、小文字、先頭大文字）
スタイル：スタイル変更（普通、イタリック、斜体）
装飾：わずかな装飾が設定可（下線、上線、取消線）
Line Height：行間高さ
Letter Spacing：文字間幅の設定
文字間隔：半角スペースの幅
特に大事な項目として今回はフォント、サイズ、太さ、Line Height、Letter Spacingを詳しく見ていきます。
フォント
フォントの種類はGoogle Fontsから基本的に選択できます。日本語対応していないフォントも含まれます。
サイズ
パソコンデスクトップのアイコン表示があるものはレスポンシブ対応でデスクトップ、タブレット、スマートフォンでそれぞれのサイズで設定が可能です。
フォントサイズの単位については好きなものが選べます。
Googleは、本文の最小フォントサイズを16pxにすることを推奨しています。文字が小さすぎるとエラーの対象となることから、SEOに影響するおそれがあるため注意が必要です。
ちなみに、pxは固定サイズなので表示環境に関わらず常に一定となり、そのほかem等は変動します。ここでは詳しい説明は省きますが、筆者は本文なら0.8〜0.9em程度にすることが多いです。
太さ
font-weightはここで変更できます。基本的には500(Medium) が多いかと思いますが、ページの見出しでの使用か、装飾としての使用、本文としての使用など用途によって合わせます。また、フォント選択によっても印象が変わるので、フォントを選び直したときには合わせて太さも変更します。
Line Height（行間）
行間は文字の大きさによって適切な数値が変わります。目安として、推奨はフォントサイズ16pxだとLine Heightは24.0〜28.8pxです。筆者は1.5em〜1.7emで設定することが多いです。行間を詰めすぎたり取り過ぎると読みにくくなるので注意が必要です。
Letter Spacing（文字間）
文字間についても文字の大きさによってとるべき数値が変わります。例えば本文などの小さい文字は、+0.02em〜0.06em、ページ見出しなどの大きめの文字でフォントによっては0にすることもあります。
代表的な項目についてでしたが、どれも共通して言えることはサイトの方向性や世界観に合わせて設定するので、文字が読めなくなる以外はどれも必ずしも間違いではありません。ただ、サイトの中で使うフォントの種類やサイズなどが合っている方が統一感が出ることは確かです。
