CSS font

HTML&CSS

CSS font を適切に設定して読みやすいwebページを作ろう

CSSフォントについて、分かっているようで適切なフォントとなるとかなり難しくなります。
フォントのサイズ、配置、英文と日本語のバランスなどなど様々なプロパティを適切に組み合わせることが重要です。
この記事では、font-familyの概要とfontプロパティについて説明して行こうと思います。
まずは、フォントの種類から見ていきましょう。

総称フォントファミリー(generic-name)

予め用意されている以下のフォントファミリーを指定することで、大まかな書体を指定できます。
総称フォントファミリーはフォント名ではなくてキーワードなので観覧のPCで最も類似したフォントが選択されます。

font-familyでは複数のフォントを指定することができますが、その指定したすべてが表示できない場合に最終的に、総称フォントファミリーが表示されるのが望ましいので、最後に記述すべきです。

フォントファミリー名はダブルクォーテーションで囲うことが良いとされていますが、キーワードとして設定されている総称フォントファミリーはそのまま指定します。

キーワード英語フォント日本語フォント
serif セリフ明朝体  
sans-serifサンセリフゴシック体
monospaceモノスペース等幅フォント
cursiveカースィヴ草書体・筆記体
fantasyファンタジー装飾フォント等のファンタジー体

font-family

フォントの種類を指定するプロパティです。指定するフォント名は複数指定可能で、先に指定されたものが使えない場合には順にフォールバックしていきます。

日本語環境でのfont-familyの指定例(ゴシック体の場合)

font-family: ”Arial”,“メイリオ”,”ヒラギノ角ゴシック”,sans-serif;

注意点は英語フォントを先に指定しないと日本語フォント内に含まれる英語フォントが使用される。
この場合だとメイリオを先に指定するとメイリオ内の英語フォントが使用されarialは使用されない。

Webフォント

ローカル環境に依存しないWebで使用可能なフォントです。
主にGoogle Fonts 、Adobe Fonts 等があります。

【メリット】

Webフォントを使用することで、Webサイトのフォントに関して自由度が高まります。
Webサイトが独自のブランドイメージを持つことができ,他のサイトと差別化され、強いブランドイメージを確立するために重要です。

【デメリット】

ページの読み込み時間が遅くなる場合がある。
大量のフォントを使用する場合には、ページの読み込み時間が非常に遅くなることがあるので注意が必要です。
特に日本語フォントは容量が大きくなる傾向がありますので十分考慮する必要があります。
著作権の問題も絡んでくるのでgoogle Fonts等のOpen Source Fontsを選ぶことも重要です。

google Fontsの使用方法

google Fontsのサイトにアクセスしフォントを選びます。
例では”noto sans Japanese”を設定してみます。

html内に埋め込む場合

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<style>
  p {
    font-family: 'Noto Sans JP', sans-serif;
}
</style>
</head>

CSSファイルに記述する場合

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
  p {
    font-family: 'Noto Sans JP', sans-serif;
}

※pタグで指定していますが一例です

ここまではフォントの種類についてでしたが、その他のフォントプロパティについて見ていきます。

font-size

フォントサイズを指定するプロパティです。
指定する単位はpx、em、rem、%、vw、vhなどがあります。
相対的な値を使用する ことでサイト全体のサイズの一貫性が保たれます。
相対的な値とは、他の要素のサイズに基づいて設定される値のことです。たとえば、「em」や「%」などの相対的な単位を使用することができます。これにより、ユーザーがブラウザのフォントサイズを変更した場合でも、サイト内のフォントサイズが一貫して表示されます。

レスポンシブにする
スマートフォンやタブレットなどの様々なデバイスで閲覧されることが前提となりますのでフォントサイズの設定はレスポンシブにする必要があります。つまり、異なる画面サイズやデバイスに応じて、フォントサイズを適切に調整する必要があります。

メディアクエリを使用して、異なる画面サイズに応じてフォントサイズを変更することができます。例えば、以下のようなCSSを記述することで、画面幅が600px以下の場合にはフォントサイズを14pxに、それ以上の場合には16pxに設定しています。

@media screen and (max-width: 600px) {
  body {
	font-size: 14px;
  }
}
@media screen and (min-width: 600px) {
  body {
	font-size: 16px;
  }
}

ビューポート単位を使用する

ビューポート単位を使用することで、画面サイズに合わせた相対的なフォントサイズを指定することができます。例えば、以下のようなCSSを記述することで、画面幅に応じてフォントサイズが変化します。

body {
  font-size: 4vw;
}

@media screen and (min-width: 600px) {
  body {
	font-size: 16px;
  }
}

font-weight

フォントの太さを指定するプロパティです。normal、bold、lighter、bolderなどのキーワードで指定します。通常は、bloldを指定して太くするのに使用します。

例: font-weight: bold;

font-style

フォントのスタイルを指定するプロパティです。normal、italic、obliqueなどのキーワードで指定します。通常イタリック体テキストのオン・オフを切り替えるために使用します。

例: font-style: italic;

text-transform

テキストの変形方法を指定するプロパティです。通常はuppercase、lowercase、capitalize、noneなどのキーワードで指定します。

例: text-transform: uppercase;

text-decoration

フォントのテキスト飾りを設定/設定解除するプロパティです。

テキスト飾りを解除する none
テキストの下線を引くunderline 
テキストに上線をつけるoverline
テキストに取り消し線を引くline-through

例:text-decoration:none;

letter-spacing

文字間隔を指定するプロパティです。通常はpx、emなどの単位で指定します。

例: letter-spacing: 1px;

line-height

行の高さを指定するプロパティです。通常は数値で指定します。

例: line-height: 1.7;

font-variant

フォント変更を行うためのCSSプロパティの一つです。
normal:通常の文字列を表示します。
small-caps:小文字の代わりにスモールキャップスを使用します。

all-small-caps : 小文字をすべてスモールキャップスに置き換えます。
petite-caps : 小文字と比較してわずかに小さくなったスモールキャップスを使用します。
all-petite-caps : 全ての小文字をわずかに小さくなったスモールキャップスに置き換えます。
unicase : 大文字と小文字を同じサイズで表示します。
titling-caps : 大文字の代わりにタイトリングキャップスを使用します。タイトリングキャップスは、通常の文字と比較して大きく、細くなっています。

最後にfontプロパティ(一括指定)について見ていきます。

font(一括指定)

一括設定できるプロパティは以下の通りです。
font-style
font-variant
font-weight
font-size
font-family
line-height

基本設定

 font: font-style font-variant font-weight font-size/line-height font-family;

注意点

fontで必須のプロパティはfont-sizeとfont-familyで必ず指定しなければなりません。

fontで指定していない個別のプロパティはそれぞれの初期値が設定される。それまでに設定した個別の値を上書きします。

font-variantは”normal”と”small-caps”のみが指定可能です。

font-size/line-heightは、フォントのサイズと行間を指定します。font-sizeの値は必須で、単位を含めて指定します。line-heightの値は省略可能で、/で区切って指定します。例えば、16px/1.5のように指定します。

font-familyは最後に指定する必要があります。

今回は以上です。

まだまだ、様々なフォントに関するプロパティがありますが

またの機会にしたいと思います。

コメント