今日はWEBCRE8の酒井さん(@glatyou)からお題をいただいて、僕が好きなフォントを紹介します。ツイッターでは#LOVEFONTというハッシュタグで同じようにいろんな方が思い思いのフォントをブログ記事がされていますので、こちらもぜひお楽しみください!みんなフォント好きですね♪

さて、僕が愛してやまないフォントとは、Bodoni(ボドニ)です。実は案件では一度しか使ったことがありません。それまで、「いつか使いたい、いつか使いたい」と思っていて、去年の10月頃に「このサイトに使えばとっても効果的だ!」とビンゴな案件に巡り合わせて意気揚々に制作したのを覚えています。

Bodoniの成り立ち

1790年にイタリアのジャンバティスタ・ボドニさんが、自分で印刷監督官を務めるイタリア北部のパルマ公国の専用書体として制作されたフォントです。(甲谷一(2010)「きれいなフォント欧文書体とデザイン」より。)

調べてみてわかったのですが、フォントメーカーの間でいろんなバリエーションがあるのですね。僕はAdobeから出ているBodoni MTを使用しています。

Bodoniの特徴

セリフ体

文字にセリフがついててオシャレな感じがしますね♪

セリフが極端に細く、縦のラインが太いモダン・セリフ体の始まり

Bodoniはセリフが縦のラインと比べると極端に差があるのが特徴です。余談ですが、この極端にやたらと細いセリフの特徴からモダン・セリフと呼びます。アメリカのファッション誌Vogueの表紙で使われているDidot(ディド)なんかも同じ種類に分類されますね〜。

定規やコンパスで描いたような幾何学的な字形

セリフ体といえば、手書き感が多少残っているものが多く見られますが、Bodoniについてはそのようなものが極端に少ないです。アナログな感じを排除して、幾何学的に見えるようになっています。

繊細さと強さと

縦のラインと横のラインの太さが互いに太すぎず、細すぎずという絶妙なバランスが個人的なポイントです。小さい文字で表示すると、縦のラインが引き立ちやすくなります。

Bodoniを人に喩えると

個人的にBodoniを人に喩えると・・・「ちょっと着飾ったおのぼりさん」。ヘアラインセリフの華奢でかわいい感じと、縦ラインの太さが力強さを感じます。かわいくて、芯が強い。勝手な偏見ですが、こんなところから「ちょっと着飾ったおのぼりさん」というイメージを持っています。大好き!

Macでは標準で。iOSなら5から使えるフォント

Webデザインとして見逃せないのが、MacやiOSにはインストールされているフォントだということ。iOSは5からインストールされているようです。CSSでフォント指定すれば、フォントが使えるようになります。

Bodoniの使いどころ

Bodoniは装飾的面が大きいのでロゴやタイトルなどで使うのがおすすめです。見出しや本文で使うにはちょっと読みにくいと言われそうなので、使いにくいフォントだと思います。業種でいうと、アパレル系やデザイン事務所のロゴタイプに似合いますね。

Webの場合はある程度大きくしないとセリフがにじんで汚く見えてしまうこともあるので、個人的には14px以上、できる限り大きく使えればなと思います。

Bodoniいいところ悪いところ

こじゃれた感の演出

Bodoniのセリフは控えめなので装飾として美しい。これをうまく利用して、背景をシンプルにまとめて、偉いぞ!感に見せることができます。

秩序さの表現

幾何学的という特徴から直線が強調される字面なので、整然とした印象をセリフ体で表現することができます。直線を強調するのはサンセリフのほうが得意かもしれませんが、どうしてもセリフ!っていうときにはBodoniがおすすめです。

小さい文字サイズには弱い

Webに限ると文字サイズを大きくしないと細い線がにじんでしまいます。本文に使うことはなくてもバナーなどでロゴを小さいサイズで表現するときには一工夫必要になりますね。

使われてる(有名な)アートワーク

レディ・ガガ 公式サイト

ニルヴァーナ 公式サイト

エル・オンライン

終わりに

今回はBodoniを紹介してみました。Webにおいては大きめなバナーやフルスクリーンサイトでないと、大きな文字が配置しにくいため、使いどころが限られてしまうところが難なところですが、セリフの美しさはたまりません!

ぜひ自分の制作しているサイトを知ってるフォントだけで選ばずに「このフォントは使えるだろうか?」と検討してもらえたらなと思います^^

冒頭にも書きましたが、今回はWEBCRE8の酒井さんからお声をいただたのがきっかけで執筆しました。記事を書くことで自分の知識の整理にも役立ちましたね。あなたが愛してやまないフォント、紹介してみませんか?

フォントの愛を語りませんか?

皆さんのブログ記事で、自分のそのフォントへの愛を語り尽くしてみませんか?特に欧文フォントのweb上の情報は圧倒的に英語が多く、webcre8は読めてません…。好きなフォントなのになんでそのフォントが出来たか、とかはサッパリ、そんなの悲しいですよね。この機会に調べてみるのも良いでしょう。そしてwebcre8は、それらの記事を並べて、にやにやするつもりですw

もちろんデザイナに限らず、見ていて美しいといった思い入れを持っているならそれも良いと思います。

お約束はタイトルに#LOVEFONTのハッシュタグをつけてもらえればOK。

どう書いたらいいかわからない方は、とりあえず当記事に見出しを合わせてもらえればよいかと思います。もちろん飛ばしたい項目は飛ばしても構いませんし、書きたい項目があれば追加して頂いて構いません。勿論和文、欧文、有料、無料も問いませんのでなぜそのフォントなのか、あなたの感じる魅力をゴリゴリ表現してみてください☆

シンプルで重厚。webcre8の愛するフォント「Impact」 #LOVEFONT - WEBCRE8.jp