フォントに関する便利なツール【その2】

多言語Webサイト制作

Keyword:

Date:: 2011 / 10 / 05

こんにちは！WebデザイナーのMihoです。
前回は、Webサイトを見ていて「このフォントなんだろう？」
と思った時に、「フォントの種類を調べるツール」をご紹介しましたが、
今回は、実際にWebサイトやロゴを制作する際に、
「フォントの選定に役立つツール」をご紹介します。

tool 1

FontFriend

まず1つめは「FontFriend」です。
ツールをお気に入りに登録して使用する「ブックマークレット」です。
Webページ内のフォントをいろいろと置き替えて、試してみることが出来ます。

「FontFriend」インストール方法

「Font Friend (http://somadesign.ca/projects/fontfriend/)」にアクセスし、
ページの真ん中あたりにある「FontFriend」と書いてあるグレーのボタンを、
「お気に入り」にドラッグして持っていき、インストール完了です。

「FontFriend」使用方法

例えば「http://www.usatoday.com/」にアクセスし、
「お気に入り」に登録してある「FontFriend」をクリックします。
すると、ページの左下に「操作画面」が表示されます。
「body」「h1,h2,h3,h4,h5,h6」「p」などの「親要素 (selector)」を選び、
反映させる「フォント (Font Family)」を選びます。

尚、「Google Web Fonts*」を、選ぶこともできます。
*Google Web Fonts:Googleが提供する無料のフォント

「FontFriend」使用例

今回は、元々のフォント「Arial」を「Comic Sans MS」に置き換えてみました。
かなり極端な例ですが、フォントによって、
サイトの印象がガラリと変わることが見て取れます。
■「FontFriend」使用前（通常画面）

■「FontFriend」使用後

tool 2

flipping typical

次に、複数のフォントを、同時に比較検討する際に、
便利なツール「flipping typical」をご紹介します。

「flipping typical」使用方法

「flipping typical (http://flippingtypical.com/)」にアクセスし、
「ページの一番上、黒いバーの下」に、「任意のテキスト」を入力します。
すると「ページの下側」に、「任意のテキスト」が、様々なフォントで表示されます。
複数のフォントを並べてみることで、「インパクトの度合い」「可読性」など、
様々な指標から総合的にフォントを比較することが出来るので、
ロゴや短めの文章に対して、フォントを選定する際に便利です。
尚、表示されるフォントの数と種類は、
そのPCにインストールされているフォントに依存します。