Webサイトでおしゃれなフォントを活用する①- 新米Web担のためのホームページの作り方 | 番外編

今回は,Webページ上のフォントの基本的な指定方法から,おしゃれなWebフォントの使用方法までをまとめたいと思います。

好みでフォントの種類を選ぶこともできますし,そのページにふさわしいフォントを用いることもできます。

 

 

Webサイトでフォントを指定する - なぜ重要か

Webサイトを作成する際に,ふさわしいフォントを選択することは重要です。 なぜでしょうか?

それは,Webサイト上で指定されるフォントによって,ページ全体のイメージが大きく左右されるからです。

そして,「適切なフォント」とは,そのWebサイト全体でどのようなイメージに仕上げたいかによって異なってきます。

 

例えば,以下のサイトのように,小さな子供や,小さな子供を持つ親向けに作成されたWebサイトと,高級感や老舗感を演出したいサイトでは,当然使用されるフォントは変わってきます。

 

 

言い換えると,適切なフォントを設定するように工夫することによって,作成中のWebサイトを一層魅力的で,効果的なものにすることができるということです。

では,フォントの基本的な指定方法から見ていきましょう。

 

 

フォントを指定する方法(font-family)

これはもっとも基本的な形となるフォントの指定方法です。

CSS側で,フォントを調整したいタグを指定し,その部分で「font-family:」と記述し,その後に好きなフォント名を入力するだけでOKです。

例えばWebページ全体にそのフォントを適用させたいのであれば,「body」タグや「html」タグなどにフォントを指定することができます。

さらに,この「font-family」による指定方法は,複数のフォントを続けて記入することができ,最初に書かれているフォントから優先して使用されることになります。

この「font-family」による指定方法は,閲覧するユーザーのコンピューターにインストールされているフォントの中から表示されることになるため,もしこちらで指定したフォントがユーザー側でインストールされていない場合,その次に指定したフォントで表示するということになります。

なお,このように複数のフォントを指定する場合には,フォント名とフォント名の間を「,」(カンマ)で区切り,”MS Pゴシック” のようにフォント名の中にスペースを含むものは、フォント名の前後をシングルクォーテーション(’)、またはダブルクォーテション(”)ので括るというルールになっています。

例えば以下のようにフォントを指定することができます。

body {
 font-family: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
 font-size: 15px;
 color: #192034;
 width:100%;
 min-width:100%;
}

なお,この「font-family」を使用して指定できるフォントには限りがあり,正しい名称で指定することが必要ですので,設定の際には以下のサイトを確認し,フォントを指定してください。

font-familyプロパティで指定できるフォント名

 

そして,念のために上記に挙げたフォントすべてが使用できなかった場合に,「総称ファミリ」と呼ばれるフォント名を指定しておくことが推奨されています。

うえに取り上げた「font-family」で列挙した中の最後に書かれている「sans-serif」がそれにあたります。 これは,Mac osでユーザーが閲覧しており,そのパソコンに先に挙げたいずれのフォントもインストールされていない場合の最終手段として,「sans-serif」系統のフォントのいずれかを用いて,Webサイトを表示することを指定するものです。

多くの場合,一般に多く使われているフォントのどれもインストールされていないということはあまりないのですが,念のための指定ということになります。

この「font-family」による指定は簡単で,もっとも基本的な形になりますが,いくつかの注意点もあります。

 

 

1.使用OSによって,標準的にインストールされているフォントが異なる

確かに複数のOSで標準的にインストールされているフォントもあります。

それは,”Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana” などです。

しかし,これらはすべて欧文フォントなのです。

つまり,Webサイトの文面が日本語で作成されている場合,ややこしいことになります。

特に,「Safari」「iOS」「Android」などでは,”MS Pゴシック”などのように,フォント名に日本語が含まれているものは認識しないことになっています。

それで,「Google Chtome」では問題なくきれいに表示されるのに,「Safari」では,フォントが変わってしまうということが起こります。

 

 

2.ユーザーの使用環境によって表示できるフォントが異なる

これは先にも取り上げたことですが,「font-family」によるフォントの指定は,ユーザーのPCにインストールされているフォントの中から指定されます。

それで,Webサイトの作成者側のPCで綺麗に表示されていても,ユーザー側でそのフォントがインストールされていない場合,表示が崩れる場合があるということです。

もっとも,フォントの種類が変わってしまうだけであれば,まだ良いのですが,フォントの種類によっては,標準のフォントサイズが微妙に異なっていたり,「font-weight」と呼ばれる文字の太さなどが異なるものがあります。

それで気を付けていないと,制作時には問題ないものの,実際にサーバーにアップして他のPCでそのページを見てみると,「なんか,おもってたんと違う」というようなことになりかねません。

 

 

まとめ

「font-family」によるフォントの指定方法は,注意点もあるものの,もっとも簡単で基本的な方法ですのでWebサイト作成の基本として抑えておきたいものです。

次の記事では,「font-family」で指定できる代表的な3つのフォントについてまとめたいと思います。

 

>コアース株式会社

コアース株式会社

業務システム開発一筋32年

コアースは、オーダーメイドでシステム開発を行う大阪の会社です。 特に中小企業様のニーズにぴったりなシステムをご提案いたします。

CTR IMG