こんにちは、NAEです。
本ブログのヘッダーデザインを変更しました。
画像を差し替え、グローバルメニューまで手が入り、思っていた以上に手間がかかってしまいました。
本当は、フォントを変えたかっただけなんです。しかし、フォントに全てが引っ張られました。
そんなフォントの威力を十二分に発揮できるおすすめWebフォントの紹介と、Google Fontsの便利な使い方その他、ブログタイトル×Webフォントに関するTipsをまとめて紹介したいと思います。
今回はそんなのお話。
- ブログのヘッダーデザインにおいてはフォント選びは超重要
- ブログタイトルにおすすめの英語Webフォント16選
- Google Fontsの便利な使い方
- 注意点：フォントを変えるときは背景画像の変更も考えて
- 余談：Webフォントを読みこませるタイミング
- まとめ：ブログタイトルのフォントはブログの雰囲気を司る
ブログのヘッダーデザインにおいてはフォント選びは超重要
ブログのヘッダーは背景画像と文字（タイトル）でできています。
それぞれの役割は
- 背景画像：おおまかなブログの雰囲気を伝える
- 文字：タイトル名という情報を伝える
だと思うんですが、文字に使うフォントもブログの雰囲気を色濃く語る要素のひとつです。
むしろ、ブログヘッダーは「このブログの名前はこれだよ！」ということを伝えるためにあるので、読む側はむしろ文字に注目するのでは。
それだけ、タイトルのフォントは読者へ多く物語るともいえます。
ブログタイトルにおすすめの英語Webフォント16選
では、実際にフォントの違いによってどれだけ雰囲気に差が出るのか、試してみましょう。
使うのはGoogle Fontsで公開されている英語Webフォント。フォントの雰囲気のみを比べるため、背景画像とフォントの色、文言は同じものを使っていきます。
と、ただ羅列してもツマラナイので、ブログタイトルにおすすめの英語Webフォント16個を厳選してみました。
実際に、ぼくがヘッダーデザインを考えたときに「これいいかな？」と思ったものを含みます。
ブログタイトルという役割をきちんと果たすため、
- インパクトがあり印象に残りやすい
- パっと見でちゃんと読める
ということを条件に選出しています。
それではどうぞ。
デキるオトナのおしゃれ感や親近感を出すなら手書き系フォント
はじめに手書き系のフォントです。
書き味が独特で個性が強く、好き嫌いが分かれやすいのが特徴です。
「Nothing You Could Do」
はてなブログの人気テーマ「DUDE」にも採用されている、サイン風の手書きフォントです。
フォントで語らせ、ラフでアーティスティックな雰囲気を出すならこれがおすすめ。
「Rock Salt」
英語ネイティブの外人の中には、すべてのアルファベットを大文字で書くスタイルの人がいます（中学のときの英語の外人教師がそうでした）。
そんなネイティブの日常的な書き味をそのまま伝えるのがこちらのフォント。こなれた手書き英字フォントを使うならこれがおすすめ。ただし他のフォントと比べて大きめの作りなので、サイズ指定の際は注意を。
「Indie Flower」
丸文字に近いこちらの手書きフォントはやわらかい雰囲気を出したい人にはおすすめ。
大文字小文字の文字の高さが似通っているため、かわいい系ながらもアイコンのようなまとまり感を出すことができます。
「Zeyada」
より躍動感のある手書き（走り書き）フォント。ぼくの書くアルファベットがこういう書き味なので特別枠として選出しました。
エレガントでモダンなオシャレさを醸し出す、セリフ体の装飾系フォント
文字の書き出し・書き終わりに装飾のついたフォント群です。
公的な文書や新聞などに用いられるフォントのため、きちんとしておりエレガントな印象を与えることができます。
「Gravitas One」
縦線と横線の太さのコントラストが印象的なこのフォント。文字の横幅も大きく、1文字1文字ががっちりしているため、重厚感を醸し出すことができます。
昔の英字新聞のような雰囲気のため、中身がしっかりしたブログなんだろうなという印象を与えてくれます。
「Cinzel Decorative」
まるで化粧品のパッケージのようなエレガントな書体です。Nの字の斜め線がいい味出してますね。
筆先に向かって細まっていく丁寧で細身なグリフは、繊細さや華奢さをあらわすのにちょうどいいのでは。
「Flamenco」
後に紹介するサンセリフ体にほど近いフォントです。文字が同じ太さの線で構成されているのが特徴。
タイプライターのような雰囲気のため、淡々と何かを物語るようなイメージを与えてくれます。
「Lobster」
クールなはてなブログのテーマ「Vancouver」の作者であるブライアンねこさんが自身のブログタイトルに使っているのがこちら。
シンプルな装飾のついた大文字、そして筆記体のようにつながる小文字のコントラストが小気味よく、またキレイに揃ったイタリックはまとまり感を出しやすいため、誰にでも使いやすいフォントです。
「Kaushan Script」
大流行したマンガ「NANA」のロゴをほうふつとさせるフォントです。
躍動感あふれる一方、文字のカーブ率や跳ねの方向がきれいにそろっています。元気が良い上品さを出すにはうってつけですね。
「Geostar」
太めの縦線が中抜きになっているのが特徴。斜め線が極力排除されたミニマルなデザインで、セリフ体ながらもデジタルな雰囲気を漂わせます。
背景とのコントラストさえ気をつければ一気に個性を引き出せるフォントです。
しっかり感、サイバー感など、太さで雰囲気が変わるサンセリフ体ベースの装飾系フォント
文字の書き出しや書き終わりに装飾がないサンセリフ体。何かと正対しているような、ドライでがっしりした印象を与えやすいのが特徴です。
一方、文字のグリフの角を丸めることでポップなイメージに仕上がっているものも。
「Poiret One」
真円と直線をベースとした細身の書体。上品なシンプルさがある一方、eの字の角度をはじめ文字のところどころに遊び心が散りばめられているおもしろいフォントです。
シンプルでミニマル、そしてオシャレ。3点揃ったとても使いやすいフォントです。
「Audiowide」
スターウォーズやターミネーターのロゴと似た雰囲気のこちらのフォント。サイバーな雰囲気を出すにはうってつけです。
書き味は好みが別れるところですが、テック系のブログであればしっくりくるかもしれません。
「Fredoka One」
うって変わってミキハウスのようなかわいい書体。文字の角が丸められてるのに加え、カーブも真円ベースなのでよりかわいさが際立っています。
ほんわかした印象を与えるこのフォント、育児や生活などがテーマのブログにはピッタリなのでは。
「Coda」
こちらは長方形をコンセプトとした書体。普段使いのゴシック系フォントに比べ、若干ですが長方形の形を前に打ち出すことで、全体に統一感を持たせています。
パっと見ではあまり味がない普通のフォントですが、よく見るとちょっと違う。隠れたオシャレを楽しみたい人はこちらを検討してみては。
「Plaster」
1文字1文字に縦線が施されている特徴的なこのフォント。ドトールコーヒーを思い出しますね。
とてもアクが強いため、紹介している他のフォントと比べると可読性は落ちます。が、タイトルはロゴであると考えるのであれば、このくらい特徴があったほうが良いのかもしれません。
「Gruppo」
エレガントでシャープな細身のグリフ、そしてゆったりとした横幅がオトナの余裕を感じさせるフォントです。
当ブログで採用したフォントでもあります。
Google Fontsの便利な使い方
さて、これらのフォントを含めGoogle Fontsには809個の英語フォントが掲載されています。（2016-10-25現在）
これだけたくさんあると、実際にブログタイトルにセットしたときにどう見えるかが気になりますし、並べて比べてみたくもなりますよね。
そこで、ちょっと便利なGoogle Fontsの使い方をご紹介します。フォント選びの際にご活用くださいませ。
Google Fontsにアクセスすると表示されるこの画面。実は例文が入っている部分は編集できます。ひとつ選んで例文をブログタイトルに変更し、右下のAPPLY TO ALL FONTSをクリック。
すると、すべての例文がブログタイトルに早変わりします。
気に入ったフォントがあれば右上の（＋）ボタンを押していきます。すると画面下に「買い物カゴ」的なものがあられるので引っ張りだしてみると、こんなモノが表示されますので、右上のを押します。
するとこの画面に。ここで「Type here to preview text」というところにブログタイトルを入力すると・・・
選んだフォントで表示されたブログタイトルが見やすく並んでくれます。これなら並べて比べるのも楽ちんですね。
注意点：フォントを変えるときは背景画像の変更も考えて
以上でブログタイトルに使いたいフォントを選べたかと思うのですが、大事なのはこの後。
背景画像とフォントの整合を取ること
たとえば、「Crafty Girls」というかわいい系の手書きフォントを使ってみましょう。
大人っぽくてシャープな背景画像なのに対し、子供っぽさ満点の文字が使われている。なんだかバランス悪くて気持ち悪くありませんか？
背景画像とフォント、各要素が持つ雰囲気があまりに不整合を起こしていると、そのデザインはサイコパス的な気持ち悪さをただよわせてしまいます。
背景はコレが好き、フォントはコレが好き、で決めるのもいいですが、組み合わせたときの総体としての整合性を忘れないようにしたいですね。
フォントにこだわるなら背景画像もそちらにあわせる。逆も然りです。
余談：Webフォントを読みこませるタイミング
最後に少し余談です。
Webフォントを読みこませる次のようなコードをどこに入れ込むか。これ実に悩ましい問題なんですよね。
<link href="https://fonts.googleapis.com/css?family=Gruppo" rel="stylesheet">
head要素のような先頭で読み込ませる場合、
- メリット：ページが表示されるタイミングで意図したフォントで表示される
- デメリット：フォントの読み込みが終わるまでページのレンダリングが遅延し、ページの表示速度が遅くなる
ということが起こります。
かといって、フッターのような場所で読み込ませると
- メリット：ページ読み込みがブロックされないため、ページが表示が高速になる
- デメリット：フォントが読み込まれるまでデフォルトのフォントが使われ、不格好なロゴが表示されてしまう場合がある（ブラウザによる）
というトレードオフ。
デザインを取るか表示速度を取るか
はてなブログの高速化にお熱なぼくですが、ロゴデザインはさすがに譲れなかったので、head要素で読み込ませています。
まとめ：ブログタイトルのフォントはブログの雰囲気を司る
以上、
ブログタイトルにおすすめのWebフォントの紹介
Webフォントを使う時のTips
の二本立てでお送りしました。
ブログタイトルはブログの顔。ここで与える印象がかなり決まってしまうので、できればこだわりたいところです。
いっそのことプロに頼むという手もありますが、ブログのコンセプトや想定読者があまり定まってない方は、一旦自分でWebフォントを使ってみてはいかがでしょうか。
ブログデザインについては、見出しやSNSシェアボタンにもかなりのこだわりがあります。あわせてどうぞ。