Webデザインにおいて、フォントの選択は可読性やデザインの印象に大きな影響を与えます。本記事では、CSSのfont-familyプロパティの基本から、実践的な使い方までを解説します。
font-familyの基本
font-familyプロパティは、テキストのフォントを指定するためのCSSプロパティです。
p {
font-family: "Arial", sans-serif;
}フォントファミリーの種類
font-familyには、大きく以下の種類があります。
- Serif（セリフ）: 例:
Times New Roman,Georgia（文字の端に飾りがある） - Sans-serif（サンセリフ）: 例:
Arial,Helvetica,Verdana（飾りがなく、シンプル） - Monospace（等幅フォント）: 例:
Courier New,Consolas（全ての文字の幅が同じ） - Cursive（筆記体）: 例:
Comic Sans MS,Brush Script MT - Fantasy（装飾フォント）: 例:
Impact,Papyrus
font-familyの設定方法
フォールバックを指定する
ユーザーの環境によっては指定したフォントが存在しない場合があるため、複数のフォントを指定するのが一般的です。
p {
font-family: "Helvetica", "Arial", sans-serif;
}左から順番に適応されていきます。この場合、Helveticaが利用可能であれば適用され、なければArial、さらにどちらもなければ汎用フォントのsans-serifが適用されます。
Webフォントの活用
Google FontsなどのWebフォントを利用すると、より自由なフォント選択が可能になります。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">body {
font-family: "Roboto", sans-serif;
}上のフォントのリンクはこちら
システムフォントを利用する
システムフォントを利用することで、OSごとのデフォルトフォントを統一的に扱うことができます。
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}4. まとめ
font-familyを適切に設定することで、デザインの統一感や可読性を高めることができます。フォールバックを考慮しつつ、Webフォントやシステムフォントを活用して、より魅力的なデザインを目指しましょう！
コメント