Bootstrapのタイポグラフィ調整！$font-family・$font-size-base・line-heightを使った設計方法

タイポグラフィの調整：$font-family・$font-size-base・line-heightの設計

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapを使うと文字の大きさやフォントって最初から決まっていますよね？自分のサイト用に変えることはできますか？」

先生

「はい、できますよ。BootstrapではSass変数を使って、フォントや文字サイズ、行間を管理しています。代表的なのが$font-family、$font-size-base、$line-height-baseです。」

生徒

「それぞれ何を意味しているんですか？」

先生

「簡単に言うと、$font-familyは『文字の種類』、$font-size-baseは『基本の文字サイズ』、line-heightは『文字の行間』を表しています。これを調整すれば読みやすくて統一感のあるデザインにできますよ。」

1. $font-familyとは？

$font-familyは文字の種類を指定する変数です。Bootstrapの初期設定では「-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto…」など、見やすくて使いやすいフォントが順番に並んでいます。

これは「使えるフォントがなかった場合の保険」として複数のフォントを並べておく仕組みです。初心者の方は「フォントの候補リスト」と覚えると分かりやすいでしょう。例えばブランドサイトなら、自社のイメージに合ったフォントを追加することで雰囲気を統一できます。


<style>
body {
    font-family: "Noto Sans JP", Arial, sans-serif;
}
</style>

<p>これはNoto Sans JPを使った文字です。</p>

ブラウザ表示

2. $font-size-baseとは？

$font-size-baseは「文字の基本サイズ」を決める変数です。Bootstrapのデフォルトは16px（1rem）です。これを基準に、h1やh2などの見出しのサイズが自動的に計算されて決まります。

つまり、この数値を変えるとサイト全体の文字バランスが一気に変わります。例えば「少し大きめの文字で読みやすいブログを作りたい」なら18pxに変更すれば、全体的に文字が大きく見やすくなります。


<style>
body {
    font-size: 18px;
}
</style>

<p>これは18pxに設定した文字です。</p>

ブラウザ表示

3. line-heightとは？

line-heightは文字と文字の行間を調整するプロパティです。Bootstrapの初期値は1.5になっており、これは「文字サイズに対して1.5倍の行間」という意味です。

行間は狭すぎると読みにくく、広すぎると間延びした印象を与えます。新聞や本でも読みやすさを考えて行間が設計されています。Webサイトも同じで、line-heightを適切に設定することで「スッキリ読みやすい文章」になります。


<style>
p {
    font-size: 16px;
    line-height: 1.8;
}
</style>

<p>これは行間を1.8に広げた例です。文章が少しゆったりして読みやすくなります。</p>

ブラウザ表示

4. 文字デザインをカスタマイズする理由

なぜ文字サイズや行間、フォントを調整する必要があるのでしょうか？理由はシンプルで、「文章はサイトの印象を大きく左右する」からです。

例えば、同じ内容でも文字が小さく詰まっていれば読みにくく、大きめで余白があると読みやすいです。また、フォントの選び方でサイトの雰囲気も大きく変わります。カジュアルな印象を出したいなら丸みのあるフォント、ビジネス向けならシンプルで硬めのフォントが適しています。

5. Bootstrapでの設計のポイント

BootstrapのSass変数を活用すれば、$font-family、$font-size-base、line-heightを全体で統一できます。ポイントは次の3つです。

サイトの目的に合わせてフォントを選ぶ
読みやすさを意識して文字サイズを決める
行間を調整して文章を快適に読む体験を作る

これらをバランスよく組み合わせることで、初心者でもプロのように整ったデザインを作ることができます。

まとめ

Bootstrapのタイポグラフィ設計を振り返る

ここまで、Bootstrapを使ったタイポグラフィ設計について、$font-family、$font-size-base、line-heightという三つの重要な要素を中心に学んできました。文字はWebサイトの中でも最も目に触れる要素であり、文章の読みやすさやサイト全体の印象を大きく左右します。そのため、配色やレイアウトと同じくらい、フォントや文字サイズ、行間の設計は重要なポイントになります。

Bootstrapは、最初から読みやすさを意識したデフォルト設定が用意されていますが、そのまま使うだけでなく、サイトの目的やターゲットに合わせて調整することで、より伝わりやすいデザインに仕上げることができます。ブログ、企業サイト、サービス紹介ページなど、用途が違えば最適な文字設計も変わってきます。

font-family・font-size・line-heightの役割

$font-familyは、サイト全体の雰囲気を決める「文字の顔」とも言える存在です。やわらかい印象、真面目な印象、親しみやすさなどは、フォント選びによって大きく変わります。また、複数のフォントを指定しておくことで、環境差による表示崩れを防げる点も重要です。

$font-size-baseは、文章の読みやすさに直結する要素です。文字が小さすぎると読む気が失せ、大きすぎると間延びした印象になります。Bootstrapでは、この基本サイズを基準に見出しや本文の大きさが計算されるため、最初にしっかり設計しておくことが全体の統一感につながります。

line-heightは、見落とされがちですが、実は非常に重要です。行間が適切に取られている文章は、目の移動がスムーズで、長文でも疲れにくくなります。特にスマートフォン表示では、行間の調整が読みやすさを大きく左右します。

シンプルなタイポグラフィ調整の例


<style>
body {
    font-family: "Noto Sans JP", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
}
</style>

<p>
Bootstrapを使ったシンプルな文章表示です。
文字サイズと行間を調整するだけで、読みやすさが大きく変わります。
</p>

ブラウザ表示

このように、特別な装飾をしなくても、フォント・文字サイズ・行間を整えるだけで、文章は驚くほど読みやすくなります。Bootstrapのタイポグラフィ設計は、「派手に作る」ためのものではなく、「自然に読ませる」ための土台作りだと考えると理解しやすいでしょう。

先生と生徒の振り返り会話

生徒

「フォントって見た目の問題だけだと思っていましたが、読みやすさにここまで影響するんですね。line-heightを変えるだけでも印象が全然違いました。」

先生

「そうなんです。文字は情報そのものなので、読みやすさの設計はとても大切です。Bootstrapはその土台を用意してくれているので、あとは目的に合わせて少し調整するだけで十分なんですよ。」

生徒

「$font-size-baseを変えると、見出しまで一緒に変わるのが便利だと思いました。全体のバランスを一気に調整できますね。」

先生

「その気づきは大事ですね。Bootstrapの設計思想は『全体で整える』ことです。細かい調整に入る前に、まず基本の文字設計を決めるクセをつけると、デザインが安定します。」

生徒