2021年08月17日

Webサイトのフォントどうする？

みなさんこんにちは。
クリエイターの白石です。

今回は、「Webサイトにおけるフォントの基礎知識」をまとめました。

折りたたむ /表示

■そもそもフォントにはどんな種類がある？

———————————

日本語のフォントは大きく４つの種類があります。

・明朝体（セリフ体）　　　　　　…文字の端に飾りがあり、高級感がでる
・ゴシック体（サンセリフ体）　　…文字飾りがなくシンプルで読みやすい
・筆書体（筆記体）　　　　　　　…筆で描いたような文字
・デザイン体（デザイン）　　　　…手書き文字やデザイン性のある文字

※()は、対応する欧文フォント
セリフ体の「セリフ」は文字飾りを意味し、明朝体のようなデザインです。
サンセリフ体の「サン」はフランス語で「無い」という意味なので、
飾りのないゴシック体のようなデザインです。
呼び名が似ているので、これを覚えておくと間違えないです！

Webサイトのベースの文字（読ませる文字）は、
可読性の高い「ゴシック体」もしくは「明朝体」を使います。

「明朝体」は、高級感を出したいサイトや、和風のサイトに適していますが
文字デザイン的に横線が細いため、小さな文字になると読みづらく
感じることがあるので注意が必要です。
なので、Webサイトでは基本的には１番可読性の高い「ゴシック体」を使います。

見出しや、あしらいなどにデザイン性のある文字を置きたい場合は
イラストレーター等で画像として書き出して配置します。
※ただし、HTML実装時にはタグにalt属性を入れるのを忘れないように
画像として配置すると、文字情報がなくなりＳＥＯ的に不利になってしまう
可能性があります。

———————————

「システムフォント」と「Webフォント」の２種類があります。

システムフォントは、OSにインストールされているフォントのことです。

・文字が表示される速度が速い
・無料で使える

・同じフォントでもOSやブラウザによって微妙に表示が異なる
・閲覧者の環境に無いフォントだと表示されない（代替えフォントで表示される）
・使えるフォントの種類が少ない

Webフォントは、Webサーバ上にあるフォントデータを読み込んで使うフォントです。

・OS、ブラウザに関係なく、全く同じフォントを表示することができる
・デザイン性の高いフォントが使える

・データを読み込むので、文字が表示されるのに時間が掛かる
・利用にお金がかかるものもある

———————————

Webサイトの文字フォントを設定するには、CSSで『font-family』プロパティの設定を行います。

例.
font-family: “ヒラギノ角ゴ ProN W3”, “メイリオ”, Meiryo, sans-serif;

前提として、「Webブラウザは自身の環境に該当するフォントあるかどうか、左から順に
確認して適用する」ということを知っておく必要があります。
そして、その前提のもと『font-family』プロパティで
「フォント名」と、「総称フォント名」の２つを設定します。

フォント名とはそのままの意味で、”メイリオ”など具体的なフォント名を指定します。
カンマで区切って複数してすることが可能です。

フォント名は、全半角、スペース、大文字、小文字など正確に記述しないと、
ブラウザに認識されないため注意が必要です。
また、”メイリオ”、”Meiryo”など同じフォントでもOSによって名称が違う場合が
あるのでこれも気を付ける必要があります！

Windows、Mac両方で安定して使えて、よく利用されているフォントとしては
メイリオ、ヒラギノ角ゴ、游ゴシック、游明朝、Times、Arial、などがあります。
弊社でもこれらをベースに利用していることが多いです。

総称フォント名とは「フォント名」の値で指定したフォントが環境にない場合に
代替えとして、ブラウザのシステムフォントで指定するフォントの種類を指定します。
上記の例だと、一番後ろに記述している「sans-serif」が総省フォントです。

「font-family」の総称フォントは以下があります。

—————————————————————

フォントは、サイトイメージに大きく関わる大事な要素です。
デザイン性と、どの環境でも安定して表示されることのバランスを考えながら
設定しておきましょう！