文字はWebサイトの基本的な情報伝達手段。
CSSを使えば、もっと読みやすく、見た目を印象的にできます！
本記事では、文字周りのCSSプロパティをまとめてやさしく解説します。

font-weightで太さを調整

h1 { font-weight: bold; /* 太字 */ }
p.light { font-weight: 300; /* やわらかい印象 */ }

letter-spacingで文字間を広げる

h2 { letter-spacing: 2px; }

text-transformで大文字／小文字を統一

button { text-transform: uppercase; /* 全て大文字 */ }

text-shadowで文字に影を追加

p.shadow { text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }

応用例まとめ

h1 {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

まとめ

文字装飾は、見た目の印象や可読性を大きく変える力があります。
覚えておくと、ヘッダー・ボタンラベル・引用などの演出にすぐ使えます！