- IT Tips
READ MORE
こんにちは。デザインチームのニシです。
今日はフォントの話です。フォントの話は奥が深くて沼。あんまり長くならない様に焦点を絞って書きます。
今回は前々から気になっていた「Webサイトで使われているフォント」について調べてみました。
自分でデザインするときは大体欧文フォントをWebフォントから1〜2種類選んで、日本語は游ゴシック、みたいに形式化していたので、他サイトのフォントを調べることでデザインの幅を広められたらなと思いました。
結論からいうと、
「欧文フォントは自由に選択されている」
「和文フォントは游ゴシックかNoto Fonts」
という結果でした。
欧文フォントは書体数が少なく軽いため、フォントファイル読み込みでもなんでも自由!和文は書体数が多く重いためOS搭載フォントかWebフォント!というところですね。納得。
Webサイトでのフォント使用方法は、大体以下の3パターンです。
OSに搭載されているフォントを利用するパターンです。
最近はWin/Macで游ゴシックと游明朝体が搭載されたので、Webサイトでよく使われます。
メイリオ、ヒラギノ、なんかも使われることがあると思います。
しかし、iPhoneやAndroidも含めた全ての端末で統一して使えるフォントはなさそう(※異論募集中)。
なので、OS搭載フォントを使う場合は端末ごとに差異が出ることを許容するのが大前提となります。
みんな大好きなWebフォントですね。詳細は省きますが、GoogleやAdobeなどのサーバからフォントを読み込ませていただけるサービスです。
この場合は全ての端末で統一したフォントを使用することができます。ただし、たくさんのフォントを読み込むと重くなり表示速度が下がるので注意が必要。
サーバにフォントファイルをアップロードして@font-face
で指定する方法です。
これなら好きなフォントを自由に指定することができます。ただし和文フォントは基本1MB超えるのが普通なので注意が必要。
そういえばWeb上で使う場合、フォントファイルってどんな種類のを指定したらいいんだろうと調べたところ、対応ブラウザを最近のものに限っていいのであればwoff
とttf
だけで十分らしいです。へえ!
参考:CSSでWEBフォントを指定できる@font-face規則の書き方
と、ざっと説明したところで、様々なサイトの様々なフォントを調べてみました。
欧文フォントを使ってかっこよくデザインされているサイトに使われているフォントを調べてみました。
ちょっと沼すぎたなと早くも反省し始めた。
キービジュアルに使われているシャープでカッコいい欧文フォントはDIN Condensedでした。
DINはドイツ生まれで、標識や工業製品に使われる、視認性の高さが魅力のフォントです。
フォントサイズが小さくなっても読みやすくて良いです。Adobe Fontsで利用できるため、実装も楽そう。これは良いフォントですね。
butlerはフリーフォント。gibsonはAdobe Fontsで利用可能でした。
特にbutlerは美しいセリフ体で、上記の様に&
の形が素晴らしいです。これは良いフォントだ!
ハイブランドなアパレルのサイトには高級感あるこのフォントがピッタリですね。
使用されている欧文フォントは、軽く調べたところどちらも有料っぽいです。
キービジュアルの目立つタイポグラフィに使用されているMirador
はかなり個性的。
01
などの数字もこのフォントで、かなりキャッチーに記憶に残ります。
基本フォントで使われているのはAkzidenz Grotesk
で、これは19世紀に作られた古典的なサンセリフ体だそうです。こう聞くとちょっとロマンを感じてしまいますね。
オランダの美術館のサイトです。これはかなり個性的なサンセリフ体。美術館のサイトならではの突き抜け感があります。
読みやすいかというとそうでもないですが、ここまで個性的なフォントを使えるとデザインが楽しくなりそう。
フォントだけでなく、フロントのコーディング技術もとても高いように見えます。興味のある方はぜひサイト内を回遊してください。
紙物のサイトってフォントこだわってるイメージがあります。
ということで集めてみました。
欧文フォントのセリフ体が気になって調べたところ、Yrsa
でした。Google Fontsで使える嬉しいフォント。飾りが強すぎず、使いやすそうなセリフ体。グローバルメニューの小さい文字サイズでも読みやすいです。
グローバルメニューや見出しに使われているセリフ体の欧文フォントはMontserrat
でした。Google Fontsで利用可能。
フラットな印象で、丸みが可愛いです。
特に、上記のようなCO
の並びが良い感じ。CがOに重なっているような、パックマンみたいなところが好きです。
Montserrat
は人気があるのか、他の雑誌サイト(LEON、& Premium)でも使われていました。
和文フォントはヒラギノ角ゴ
、メイリオ
、欧文フォントはOswald
(Google Fontsで利用可能)でした。Oswald
は幅が狭いのでレスポンシブしやすそう。…レスポンシブ…しやすそう…!!!
縦に長いコンデンス書体が個人的にあんまり好きじゃないのですが、欧文フォントはシャープでモダンな印象になる感じがして良いですね。
女性誌ばっかりになってしまいすみません。雑誌ヨクワカラナイ…。
ところで、今回見た雑誌のサイトはほぼ完全にスマホファーストになっていました。ユーザの閲覧環境がスマホ中心なことがよくわかる。
(サンプル画像を全部PCビューで撮ってしまいましたが、スマホビューにした方がよかったかも)
和文フォントは重いし、游ゴシック・Noto JP・ヒラギノ・メイリオあたりだろうと思いきや意外と色々なWebフォントでデザインされているサイトがありました。
筑紫ゴシック!!!webフォントではどうやって使うんだろうと調べたところ、FONTPLUSというWebサービスで有料でした。ディテールが書き文字っぽいです。
なんとなく紙っぽいフォントだなあと思ったら印刷物ではよく使われるフォントだそうです。
欧文フォントはGoogle Fontsでも使えるBarlow
です。和文・欧文どちらもフラットでナチュラルな印象に整えられています。
A1明朝だモリサワフォントだ!!!
このフォントはXサーバやさくらサーバなどで、サーバ側のサービスとして利用できるWebフォントです。モリサワフォントの一部はこうしてWebサイトで利用することができます。
個人的にA1明朝はすごく好きです。墨だまりが手書きっぽくて上品。万年筆で書かれたような丁寧さ、高級さを感じるフォントです。
和文フォントも欧文フォントもGoogle Fontsで利用可能でした。
めっちゃおしゃれな欧文フォント。機会があったら使いたい。
古典的・クラシックな印象で風格を感じます。
fとiが繋がっていて、なんだこれと思ったら「合字(リガチャ)」というらしいです。グラフィックや印刷物の世界では当たり前に使われるものらしい。へえ!!!!
欧文フォントがサイトロゴに似ていて統一感のあるサイトになっています。調べたところフリーフォントでした。
「安心安全」を謳いたい仮想通貨関係のサイトだと、明朝体やセリフ体を使いたくなりますが、あえて親しみやすいゴシック体やサンセリフ体を使っているのかも。
大きい文字から小さい文字までとても読みやすくカッコ良いフォントでした。
Geomanistの公式サイトはこちら
最近のサイトだと和文フォントは游ゴシックが多いのかなと思っていましたが、Noto Fontsを使っているサイトもとても多かったです。
確かに、スマホには游ゴシックが搭載されていないため、端末ごとのレイアウトや印象を統一したいのであればNoto Fontsの様なWebフォント一択ですね。
ただし和文フォントは書体が多くとても重いため、どうしても読み込みに時差が出ます。jsでローディング画面挟むとかしたいところです。
(因みに、フォントファイル自体を軽くすることもできますが、この記事では省きます)
これまで私は「フォントは重いからGoogle Fontsを使おう」と考えていました。
しかし、英文フォントは書体数が少ないためとても軽く、フォントファイル読み込みなどものともしません。大体見た感じ40KB前後でした(勿論、大量に読み込みするとその分重くなるので、書体数は絞った方が良い)。
ということで海外のサイトは比較的自由にフォントを選択してタイポグラフィックできるんだなということがわかりました。
正直、フォントファイル用意して読み込ませて端末チェックしてーっていうのが面倒で、Webフォントで使えるものを選んでいましたが、最近のサイトではフリーフォントや有料フォントを使用して自由にデザインしているようでした。
確かにこういう自由さがあるとデザインにも幅が出て良さそうです(勿論、予算との兼ね合いはある)。
この記事を書いていたところ思いついたのですが、ひらがなフォントやカタカナフォントなら、フリーフォントで軽いものが山ほどありますよね。ということは、
font-family: 'ひらがなフォント','カタカナフォント','Noto Sans JP';
みたいな感じで指定すれば、ひらがなやカタカナだけは色んなフォントを自由に使えるのかなー。
と、ちらっと思いました。
実際、和文フォントって「漢字は全部小塚フォント」なものもあったりするんですよね。
機会があったらやってみようと思います。
最後にBPSデザインチームの宣伝です。私たちは「開発会社から生まれたデザインチーム」として、Webサイト制作を中心にお客様の課題解決を叶えるデザインを提供しております。
などなど、そんなお客様からのご依頼募集中です。