さて,この記事では,Webサイト作成時に「font-family」で指定できる代表的なフォントをご紹介したいと思います。
よく使われるフォント
“メイリオ”, “Meiryo”
このフォントはだれもが見たことのある日本語フォントの一つです。
特にWordなどで文章を作成する際に,上位に表示されるのでなじみ深いものかもしれません。
個人的には,Wordなどで文章を作成するときのフォントの「メイリオ」は,なんとなくぼてっとしており,正式な手紙やメールを書くときには,「ちょっとフォーマルでない」印象を受けていました。
しかし,Webサイト内のページで使用すると,また少し違った印象になります。
このフォントの特徴は,その名の由来にもなっている通り,見やすいことです。もっとも,このフォントは好き嫌いがわかれるようです。
“MS ゴシック”, “MS Gothic”
このフォントは,文章作成などの際にかなり一般的に用いられていると思います。
文章やメールなどでの使用には相性がいいかもしれませんが,Webサイト上で使用すると,すこし全体的にアンバランスな感じになることが多いように感じています。
そして,書体が「いまどき」のものではないため,全体的にすこし古い印象を与えます。 もっとも,そのようなイメージをWebサイト上で持たせたい場合もあると思いますので,場面に応じて活用できると思います。
また,特徴としては,文字と次の文字までの間隔が広いことがありますので,表示を確認しておかないと、意図しないところで文字列が改行されて表示されることなどもありますので,注意が必要です。
“游ゴシック”, ”Yu Gothic”
このフォントは,完成度がかなり高くきれいに表示されるとの意見が多いフォントです。
フォントは「メイリオ」よりも細く,洗練された印象を与えます。
特に若者向けのサイトや,家族向けのサイトなどで多く活用されているようです。
個人的にも,「font-family」で指定できるフォントの中ではかなり綺麗に表示されるものだと感じていますので,よろしければお試しください。
“游明朝”, “Yu Mincho”
このフォントは,比較的新しく2002年頃から使用されているフォントのようです。
よく見かける「MS 明朝」と比較しても,かなり綺麗に表示されるようになっていることが分かります。
これはもはや好みの範囲ではあるものの,「メイリオ」などのような丸っこい文字ではなく,もう少しフォーマルな感じを出したいサイトにおいては大いに活用できると思います。
また,開発者は,小説などを組む際に使用できるフォントとして開発しているようで,そのおかげか文字それぞれの調和がとれているフォントとなっています。 それで,サイト内でこの文字を使用したときに,全体的にしっくりする感じになると思います。
個人的にもおすすめのフォントの一つです。
ヒラギノ角ゴ シリーズ
デザイナーやクリエーターが多く使用するのがMac OSであるため,彼らに人気なのは「ヒラギノ角ゴ」シリーズです。
全体的に安定感があり,美しいフォントの一つです。 文字間の間隔もかなり使いやすく,いろいろなサイトでの汎用性に富んでいます。
また「メイリオ」のように,ボテっとしすぎていないのも個人的には気に入っています。
もちろん,上記のフォントは,Mac OS用のフォントですので,Windows OSでも同じような表示をしたい場合は,似たようなフォントを選択し,この「ヒラギノ角ゴ」も併記しておくことで実現できます。
ここまでで有名処のフォントをいくつか取り上げてきました。
Webサイトのページの全体的なイメージに合ったフォントを選ぶことができます。
でも,Webサイトを日常的に作っているクリエーターでも,「どのフォントの組み合わせにしようか…」と悩むことは少なくないようです。
仕上がりを見ながら,一つ一つフォントを指定していくのは,最初はかなり難しいものです。
ではどうしたらいいでしょうか?
結局どうしたらいいか分からないとき
最初は,有名なWebサイトや,閲覧していて気に入ったWebサイトなどのお手本となるサイトから,参考になるものを学ぶというのも一つの手です。
例えばGoogleのサイトなどでは以下のようにフォントが指定されています。
body, html {
color: #757575;
font-family: Roboto,Arial,Helvetica,sans-serif;
font-size: 16px;
}
思ったよりもずっとシンプルです。
このように特定のサイトで指定されているフォント名を知りたいときは,サイトを開きGoogle ChromeやEdgeの場合「Fn +F12」で確認できます。
そうすると開発者モードが開きますので,そこで「body」や「html」でどんなフォントが使用されているか確認できます。
それらを完全にコピーすることはしなくてよいと思いますが,これらの「先輩」のお手本を参考にすることはできるでしょう。
まとめ
結論からすると,「これが正解」というフォントの組み合わせがあるわけではなく,作成中のサイトのイメージや企業ブランドにマッチしたフォントを選択することが効果的であると言えます。
そして,いろいろな組み合わせや,他のお手本になるサイトなども参考にし,フォントの選び方を上手に行っていけるようになりたいものです。
では,次回は別のフォントの指定方法,つまり「Webフォント」についてまとめてみたいと思います。