即日対応可能!スグ依頼できる 基本料金0円のコーディング代行サービス「コーディングラボ」

スタッフブログ

お見積り依頼

Webサイト制作に欠かせない標準フォントの知識とは?(PCサイト編)

Webサイトで文字情報を伝えるHTMLテキスト。グラフィックソフトを使った画像デザインの場合はフォントを意識することが多いかもしれませんが、HTMLテキストを使う場合は、それほどフォントを強く意識しない人も多いのではないでしょうか。

フォントを意識せずにHTMLテキストを使っていても、OSやOSのバージョンによって、フォントの見た目が違っていることは多いもの。今回はWebサイト制作に欠かせない標準フォントについて解説していきます。

標準フォントとは?

標準フォントとは、Webサイトの閲覧者のパソコンやスマートフォンにインストールされているフォント。OS標準フォントやバンドルフォントなどとも呼ばれます。

CSSによって標準フォントを指定することで、どんな環境でもある程度統一された表示が担保されるため、Webサイトの見栄えを安定させることができます。 また、サーバーにフォントそのものをアップロードする必要がないため、ライセンスを気にすることなく利用することができます。

標準フォントはWindowsやMacなどOSによって異なりますし、OSのバージョンによっても異なります。次は、それぞれの標準フォントについて見ていきましょう。

メイリオ

「メイリオ」はWindows Vistaのシステムフォントとして開発された和文フォント。その由来は、日本語の「明瞭」からきているとされています。

Windows XPまでのOSでは、「MS ゴシック」が使用されていたWindowsの標準フォントですが、それに代わるサンセリフ系ゴシック体のフォントとして開発されたのが「メイリオ」です。

それまでのWindowsの標準フォントに比べると、滑らかに見えるのが「メイリオ」の特徴。「ClearType」と呼ばれるフォントスムージング技術によって、極小フォントでも液晶ディスプレイでの高い可視性が担保されています。

MSPゴシック

「MSP ゴシック」は、Windows初期からのシステムフォント。「MSP ゴシック」の「MS」は、Microsoftの略で、「P」はプロポーショナルフォントを指します。

フォントは大きくわけて、等幅フォントとプロポーショナルフォントに分類されます。すべての文字の幅を一定に揃えた等幅フォントに対し、プロポーショナルフォントでは文字をバランスよく表示するため、文字ごとに異なる幅が設定されています。

現在主流となっている高解像度のディスプレイなどではなく、解像度の低いディスプレイや貧弱な文字の表示性能しか備えていなかった昔のパソコン環境において、読みやすさを担保するために作られたのが「MSP ゴシック」です。

游ゴシック

「游ゴシック」はWindows8.1から導入された標準フォント。MacではOS X Mavericksから導入されています。WindowsとMacでのフォントの見た目を共通化できるのが特徴です。

ただし、同じ游ゴシックを使っていてもWindowsとMacでは表示が少し異なります。font weightのサポートの違いなど、書体の設定がOSごとに違うため、Windowsの方がやや細い見た目になります。

游明朝

「游明朝」も「游ゴシック」同様、WindowsはWindows8.1から、MacはOS X Mavericksから導入された標準フォントです。

「游明朝」は時代小説も組める明朝体をテーマにデザインされたフォント。単行本や文庫などで小説を組むことを目的に開発された「游明朝体 R」を核とした明朝体ファミリーです。

ヒラギノ角ゴ

Windowsを使っている人にはあまり馴染みがない「ヒラギノ角ゴ」。OS Xをはじめ、iOSに標準搭載されているフォントです。

「ヒラギノ角ゴ」は現代的な明るさを持ちつつ、オーソドックスな印象を与える書体。読みやすさと存在感を両立したフォントです。

可読性が高いのが「ヒラギノ角ゴ」の特徴で、高速道路の標識などでも一部採用されているように、標準フォントの中でも目にする機会が多いフォントと言えるでしょう。

OSAKA

「OSAKA」は文字の開きが大きく、可読性に優れたMacの標準フォントです。「ヒラギノ角ゴ」が標準フォントとして搭載されるまでは、Macの基本書体として多く用いられていました。

Mac英語版のシステムフォントはChicagoが採用されており、シカゴと大阪が姉妹都市であることから、日本語版のシステムフォントに大阪という名前がつけられたとされています。

フォントの違いを意識してみましょう

日ごろはあまり強く意識せずに指定しているCSSのfont-family。それぞれのフォントには、見た目の特徴はもちろんのこと、標準フォントに指定された背景など、どれもが個性を持ったフォントなのです。

フォントの美しさや可読性はこれからもどんどん進化していくはずです。無意識にHTMLテキストを眺めるのではなく、それぞれのOSの標準フォントに注目しながら、Webコーディングに取り組んでみてはいかがでしょうか。