あなたはシステムフォントとWebフォントのそれぞれの特徴や違いについて知っているでしょうか？
今回は、「システムフォント」と「Webフォント」について簡潔にまとめました。
「システムフォント」と「Webフォント」にはメリット・デメリットがあるので、違いを知りつつ使い分けていきましょう。
システムフォントとは？
システムフォントとは、パソコンやスマートフォン内にすでに搭載されているフォントのことを言います。
代表的なフォントですと、Macの「ヒラギノ角ゴシック体」やWindowsの「メイリオ」「Yu Gothic UI」があります。
システムフォントのメリット
1つ目のメリットは、Webフォントと比べて表示速度が早いことです。
システムフォントはPCやスマートフォンにフォントがもとから搭載されているので、Webフォントのように外部サービスからファイルを読み込む必要がないので表示速度が上がります。
2つ目は、フォントのスタイリング設定が簡単ということです。
Webフォントを使う際はheadタグに別途外部ファイルを読み込ませるコードを記述する必要があります。
しかし、システムフォントはCSSでfont-famiyプロパティを指定したら使えるので、Webフォントと比べて手間がかかりません。
システムフォントのデメリット
デメリットとしては、ユーザーが見ているデバイス環境によって違うフォントが表示されることです。
例えばMacでは「ヒラギノ角ゴシック体」のフォントが表示されますが、Windowsだと別のフォントが表示されます。
つまり、デバイスによって表示されるフォントを統一することが出来ません。
Webフォントとは？
Webフォントとは、外部サーバーに保存されているフォントです。
指定のコードをheadタグに入れることで、システムフォントでは表すことが出来ないフォントを表示させることが出来ます。
有名なWebフォントは無料だとGoogle fontsで、有料だとTypeSquareやAdobe Fontsがあります。
Webフォントのメリット
1つ目のメリットは、どのデバイスでもフォントの表示を統一させることが出来ることです。
Webフォントは外部サーバーからファイルデータを引っ張ってくるので、システムフォントみたいにブラウザごとに表示がバラバラになる心配がありません。
2つ目は、フォントのデザインがシステムフォントよりも豊富だということです。
システムフォントだけだと、どうしても狙ったフォントデザインに出来ない場合が多いです。
例えばGoogle fontsだと、2022年4月時点で1400もフォントが用意されています。
Webフォントのデメリット
1つ目のデメリットは、表示速度がシステムフォントを使っている場合と比べて遅くなるということです。
理由は、Webフォントは外部サーバーからフォントデータを引っ張ってくる必要があり、その分読み込みに時間がかかるからです。
2つ目は、webフォントによっては有料になることです。
基本的には無料のGoogle fontsで対応できると思いますが、もしGoogle fontsでカバーされていないフォントを使う際は有料フォントを使う必要が出てきます。
まとめ
以上が、「システムフォント」と「Webフォント」についての説明でした。
【おまけ】ブログサムネイルの解説
ターゲットは、「Webデザインかコーディングを始めたばかりで、システムフォントとWebフォントの違いをあまり理解していない駆け出しの方達」を想定しました。
システムフォントとWebフォントは違うということが見て分かるように、タイトルに黒と白の帯を用意して違いを表現しました。
背景画像はフォントの画像を引っ張ってきてテキストと彩度が被らないようにトーンを落としました。
フォントサイズと余白は8の倍数にし、キャッチコピーとタイトルでそれぞれ余白の割合を変えることで、キャッチコピーとタイトルが違う情報であることがパッと見て分かるようにしています。
