08. WEBにおける文字まわりの設定

スマホやPCで見ると、同じ文字でも読みやすかったり読みにくかったりするよね？

それは画面表示に最適化されたフォント設定ができているかどうかが関係してるんだよ。Webでは表示環境に合わせた設計が大事なの！

✴️ フォントサイズ（文字サイズ）

• Webではpx（ピクセル）単位が基本。
• 小さすぎる文字は読みづらく、アクセシビリティにも問題が。

📌 おすすめ設定：

• 本文：16px（視認性と可読性のバランスが良い）
• 小見出し：20〜24px
• メイン見出し：32px以上で視覚的にメリハリを

✴️ 行間（line-height）

• 行と行の間のスペース。単位は数値（倍率）またはpx。
• 読みやすさには行間1.5前後が一般的

📌 おすすめ設定：

• 本文：line-height: 1.6;
• 小さめの文字や縦長レイアウト：1.7〜1.8でもOK

✴️ 字間（letter-spacing）

• 一文字ずつの間隔。日本語ではあまり詰めすぎない方が良い
• 欧文フォントでは見出しに合わせて微調整することも

📌 おすすめ設定：

• 本文：letter-spacing: 0.05em;
• 見出しや英語タイトル：-0.03em〜0.05emで調整

✴️ カーニング（font-kerning）

• 自動カーニングの有効・無効の指定
• 一部のブラウザでは対応状況に差あり

📌 おすすめ設定：

font-kerning: normal;

• デフォルトで問題ないが、デザイン性を求める際はCSSで調整も検討

✴️ トラッキング（全体の文字詰め）

• Webでは「字間調整」と同様、letter-spacingで対応する
• フォント全体に均等な余白を持たせたいときに活用

📌 おすすめ設定：

• 本文や説明文：0em〜0.05em
• タイトルなど：-0.02emで少し詰めると締まる印象に

✴️ コントラスト（背景と文字の差）

• デジタル画面では背景との明度差が読みやすさに直結
• WCAG（アクセシビリティガイドライン）に準拠すると安心

📌 おすすめ設定：

• 本文・UI要素：4.5:1以上のコントラスト比
• 見出し・強調：7:1以上を目安にすると視認性アップ
• 極細フォントは避ける。最低でもfont-weight: 400

✴️ レスポンシブと単位の選び方

• pxだけでなく、emやremを使うと拡大表示にも柔軟に対応
• モバイルファーストの設計では特に重要

📌 おすすめ設定：

html {
  font-size: 100%; /* 16px */
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

✴️ マージンと余白設計

• 文字だけでなく周囲の余白（padding / margin）が読みやすさに影響
• 「囲みすぎない」こともポイント

📌 おすすめ設定：

• 段落の上下：margin: 1em 0;
• セクション間：margin-top: 2em;などで適切に距離をとる
• 文字まわりには十分な余白を意識

🌟 まとめ：読みやすいWeb文字設計のために

Webの文字って、サイズや余白もコードで調整できるんだね〜！

そうだよ！読みやすいWebサイトには、ちゃんと見た目のルールがあるんだよ♪