Studioで使えるフォントの基本——システムフォント・Webフォント・独自フォントの違い

Studioで作ったサイトは、初期設定のままでも十分読みやすいフォントが使われていますが、ブランドのイメージに合わせてフォントを変えたい、という場面もあると思います。

Studioで使えるフォントは、大きく分けて3種類あります。この記事では、それぞれの特徴と、選ぶときに意識したいポイントを整理します。

種類1：システムフォントを使う

システムフォントは、パソコンやスマートフォンなど、閲覧している端末にあらかじめ搭載されているフォントです。追加の読み込みが発生しないため、表示速度を重視したいサイトに向いています。

一方で、閲覧環境（端末やOS、ブラウザ）によって、実際に表示されるフォントが変わることがあります。デザインの見え方より表示速度を優先したい、コーポレートサイトやテキスト主体のサイトなどに向いた選択肢です。

種類2：Webフォント（Google Fonts・TypeSquareなど）を使う

Webフォントは、クラウドやサーバーからフォントを読み込んで使う方式です。Studioでは、無料で使えるGoogle Fontsに加えて、モリサワが提供する日本語書体サービスTypeSquareも標準で利用できます。フォント名で検索して選ぶだけで使えるようになるため、特別な準備は要りません。

どの閲覧環境でも同じ見た目で表示できるうえ、選べる書体の種類も豊富です。特にTypeSquareは、デザイン性の高い日本語書体を数百種類そろえているため、コーポレートサイトやブランドイメージを重視するサイトで重宝します。反面、閲覧時にフォントの読み込みが発生するため、使う書体やウェイトの数によっては表示速度に影響することがあります。

種類3：独自フォント（アップロード）を使う

会社やブランドで契約している専用の書体（購入したフォント、コーポレートフォントなど）を使いたい場合は、フォントファイルをアップロードして使う方法もあります。

この方法はブランドらしさを出しやすい反面、フォントごとに定められた利用範囲（Webサイトへの埋め込みが許可されているか、ファイルの再配布にあたらないかなど）を確認してから使う必要があります。購入・契約したフォントであっても、Webサイトへの組み込みは別途許諾が必要なことがあるため、提供元の利用規約を確認しておくと安心です。

Webフォント・独自フォントは、使うウェイト（太さ）を絞る

1つのフォントには、細い・標準・太いといった複数のウェイト（太さの種類）が用意されていることがあります。見出し用・本文用・強調用など、必要なウェイトだけを絞って使うと、読み込むデータ量を抑えられます。

この工夫は、閲覧時に読み込みが発生するWebフォント・独自フォントで特に効果があります（端末に最初から入っているシステムフォントには、この読み込みの心配はありません）。追加する前に、実際にそのウェイトをどこで使うかを決めておくと、あとから見直す手間が減ります。

見出しと本文で、フォントを使い分ける考え方

見出しには少し個性のあるフォントを、本文には読みやすさを優先したフォントを、というように役割ごとに使い分けると、メリハリのあるデザインになります。

ただし、使うフォントの種類を増やしすぎると、統一感がなくなり読みにくくなることもあります。見出し用・本文用の2種類程度に絞っておくのが、扱いやすい目安です。

まとめ

フォント選びの基準は「表示速度」か「デザインの自由度」かで変わります。速度を優先するならシステムフォント、デザインの幅を優先するならWebフォント、ブランド専用の書体を使いたいなら独自フォント、という考え方で選ぶと迷いにくくなります。選んだフォントをサイト全体で一括管理する方法はStudioのグローバルスタイル入門で扱っているので、あわせてご覧ください。