【初心者向け】CSSでフォントの見た目を整える6つの基本

フォントの基本とCSSでできること

ウェブサイトを作るうえで、「文字の見た目」はとても重要なポイントです。読みやすさはもちろん、デザインの雰囲気やブランドイメージにも大きく影響します。
CSSを使えば初心者でも文字のデザインを簡単にカスタマイズでき、フォントの色・太さ・サイズ・種類などをうまく調整してサイト全体の印象はぐっと良くすることができます。
フォントには、以下のような基本的な要素があります。

▼CSSでフォントに関して設定できる主な項目

項目	CSSプロパティ例	説明
フォントの種類	font-family	文字の書体を指定
文字の色	color	文字の色を設定
太さ	font-weight	文字を細字〜太字まで指定
サイズ	font-size	文字の大きさを指定
行の高さ	line-height	行と行の間隔を指定
文字間のスペース	letter-spacing	文字と文字の間隔を指定

フォントの種類を指定する（font-family）

body {
  font-family: "游ゴシック体", YuGothic, sans-serif;
}

まず最も基本となるのが「どの書体を使うか」という指定です。これには font-family を使います。
フォントは「複数候補」をカンマ区切りで書くことで、端末に応じて代替が効くようになります。
OSやブラウザによって標準搭載のフォントが異なるので、複数フォントを指定しておくことで意図したデザインを保ちやすいです。

▼詳しくはこちらの記事で解説しています

【初心者向け】CSSのfont-family書き方と優先順位・フォント指定方法を完全解説！

フォントの色を変える（color）

p {
  color: #333333; /* 濃いグレー */
}

h1 {
  color: rgb(255, 100, 100); /* 赤みのある色 */
}

フォントの色はcolorで指定します。色はキーワード（例: red）、16進数（例: #ff0000）、RGB形式など、複数の指定方法があります。

フォントの太さを調整する（font weight）

.light-text {
  font-weight: 300;
}
h1 {
  font-weight: bold; /* または 700 */
}

font-weightを使うことで文字の太さをコントロールできます。
100刻みの数値（100〜900）や normal / bold を使って調整可能です。

値	説明
normal or 400	標準の太さ
bold or 700	太字（ボールド）
100～900	100単位で数値が大きいほど太く

フォントサイズを調整する（font size）

h1 {
  font-size: 2rem; /* 基本の2倍 */
}

p {
  font-size: 16px; /* 16ピクセル */
}

文字の大きさはfont-sizeで指定します。単位にはpx（ピクセル）、em、rem、%などがあります。
相対単位(em, rem)を使うと、画面サイズやブラウザ設定に柔軟に対応しやすいです。

▼em・remに関してはこちらの記事で解説しています

フォントサイズの単位はどう選ぶ？px・em・remの違いを初心者向けに解説

テキストの行間を調整する（line-height）

line-height: 1.6;

文章が改行したときの行間はline-heightで指定します。
px（ピクセル）、em、rem、%などで指定できますが、単位なし（1.6など）や emでの指定がレスポンシブの時にも便利です。
上記のような単位なしの line-height: 1.6; は、要素自身のフォントサイズに対する比率（1.6倍）として計算されます。

テキストの文字間を調整する（letter-spacing）

letter-spacing: 0.05em;

letter-spacingは 文字と文字の間にスペースを追加するための指定で、px（ピクセル）でも em（相対単位）でも指定可能です。
一般的にはem単位がよく使われます。1emは現在のフォントサイズを基準にした長さを意味し、たとえば0.05emは「文字サイズの5%」という小さな調整ですが、視覚的には十分な効果があります。

Google Fontsを使っておしゃれなフォントを導入する

「サイトの雰囲気をもっとオシャレにしたい！」
そんなときにおすすめなのが、Google Fonts（グーグルフォント）です。
Google Fontsは、無料で使えるウェブフォントのサービスで、世界中のデザイナーが愛用しています。フォントを自分で用意する必要もなく、HTMLとCSSに少しコードを追加するだけで、誰でも手軽にデザイン性の高いフォントが使えるようになります。
しかも、どのブラウザやOSでも同じように表示されるので、見た目がバラバラになる心配もありません。

Google Fonts 導入の流れ

1. Google Fontsのサイト（https://fonts.google.com/）へアクセス
2. 好きなフォントを選び、「タグ」をコピー
3. コピーしたタグを、HTMLの 内に貼り付ける
4. CSSで font-family を指定すれば完了です

<link href=""https://fonts.googleapis.com/css2?family=Roboto&display=swap"" rel=""stylesheet"">
<style>
body {
  font-family: 'Roboto', sans-serif;
}
</style>

▼詳しくはこちらで解説しています

Google Fontsとは？初心者でも簡単に使えるWebフォントの基本と導入ガイド

Google Fontsの注意点

Google Fontsは、サイトのデザインを手軽におしゃれにできる便利なサービスですが、使い方によってはページの表示速度に悪影響を与えることもあります。
とくに、フォントの種類やウェイト（太さ）をたくさん読み込んでしまうと、その分だけ外部からの読み込みが増え、ページ表示が遅くなる原因になります。

• フォント数・スタイルは必要最小限に：使うフォントは1〜2種類、ウェイトも必要なものだけに絞りましょう。
• 読み込みは タグで： CSS内の @import ではなく、HTMLの に で読み込む方が高速です。
• font-display: swap を活用する： フォント読み込み前でも文字がすぐ表示されるようできます。

▼詳しくはこちらで解説しています

WebフォントでSEOを改善！表示速度を速くするための実践テクニック

まとめ

CSSでフォントを整えるだけで、ウェブサイトの印象は驚くほど変わります。たとえレイアウトや配色がシンプルでも、文字の見た目が整っているだけで「洗練されたデザイン」に感じられるのです。
読みやすさはもちろん、情報の伝わりやすさやサイト全体の信頼感にも直結するのがフォントの力。だからこそ、見やすく・わかりやすく・信頼されるデザインを目指すなら、「フォントの基本」をしっかり理解することが一番の近道です。