フォントやタイポグラフィについて知りたいなら1度はチェックしておきたいWebサイト21選

タイポグラフィ(英：typography)とは、一般的に活字を配置して文字の体裁を整える方法や技術全般を指しています。
単純に同じフォントフェイスを使っていても、並べ方やサイズ、行間や字間によっても印象が全く変わってくるので、その奥深さに魅了されているひとは、デザイナー・非デザイナー問わず世界中にたくさんいます。

また、フォントそのものも、多くの人を魅了しています。
例えば、同じ「セリフ書体」のフォントであっても、「ハネ」や「はらい」の具合などが少し異なるだけで、感じ方が180度変わってくるものも少なくありません。

今回は、フォントやタイポグラフィについて知りたいなら1度はチェックしておきたいWebサイトを集めました。
デザイナーでなくとも、文書作成やスライド作成などでフォントにはお世話になっていることと思います。
役に立ちそうなサイトがあれば、ぜひブックマークしておきましょう。

フォントやタイポグラフィのことが大好きなら1度はチェックしておきたいWebサイト21選

1. Font Inspiration

Font Inspirationはさまざまなフォントを使ったロゴデザインやタイポグラフィなどが掲載されているギャラリーサイトです。
シンプルなものからテクスチャに凝ったリアリティ溢れるものまでさまざまなロゴが掲載されているので、ロゴデザインのアイデアが浮かばないときに役立つでしょう。

また、Font combinationsではWebサイトで実際に使われているフォントの組み合わせがギャラリー形式になっているので、ブログサイトのデザインなどに一役買ってくれそうです。

2. FONTVIEW.info

FONTVIEW.infoはPC上にインストールされているフォントを一覧で確認することができるWebサービスです。
白背景に黒字と、黒背景に白字の2種類で表示されるので、フォントフェイスをさくさく確認することができます。

上のテキストボックスに文字を入力することで、テキストサンプルの文字を変更することもできます。
テキストボックスに日本語文字を打ち込むことで、日本語のタイプフェイスも確認できます。

3. Fontjoy

Fontjoyはフォントの組み合わせ(フォントペアリング)を確認するための無料のツールです。
上部の目盛りバーを左右に動かすことで「Similarity」(近似性)を調整し、「Generate」ボタンを押すことでランダムにフォントの組み合わせを入れ替えることができます。

文書やホームページを作成したいときに、組み合わせを確認する時間が取れないときに、役に立つかもしれません。

4. Typecast

Typecastはタイポグラフィを意識しながらテキスト入力を行うことができるオンラインエディターです。
豊富なフォントをブラウザ上で表示することができるので、非常に便利です。
また、設定したタイポグラフィをCSSに書き出すこともできるので、見た目を先に設定・確認を行なってから、ご自身のブログなどにスタイルを簡単に適用することもできます。

5. I love Typography

I love Typographyは、タイポグラフィに関するオンラインメディアです。
フォントの由来やカーニングのコツなど、非常にギークな知識が満載で、フォントのことが大好きならハマってしまうでしょう。

欧米フォントだけでなく、アラビア文字やハングルなど、いろいろな国の文字のタイポグラフィに関する記事も掲載されているようです。

6. Game Fonts

Game Fontsは発売されているゲームソフトやオンラインゲームなどで使われているフォントを閲覧することができるギャラリーサイトです。
一部はダウンロードすることも可能なようです。

日本人にも馴染みの深いゲームもたくさんあるようです。
自分が子どものときにプレイしたゲームはどんなフォントが使われているのでしょうか？
お時間のあるときにぜひチェックしてみてください。

7. typewar

typewarは、ある文字を見てそのフォントが何のフォントなのかを2択で推測するゲームです。
例えば「Times New Roman」か「Helvetica Neue」かを区別するのはフォント好きにとっては簡単なことだと思いますが、一方で「Diot」と「Century」を比べるような難しい問題も出題されます。

最初は正答率90％以上の問題が多く出題されますが、連続で正解するごとに正答率の下がる難しい問題に移行していきます。
フォントに詳しいと自負している方は、ぜひ一度挑戦してみてはいかがでしょうか。

8. フォントフリー

フォントフリーは日本語も利用できるフリーフォントを集めたギャラリーサイトです。
角ゴシック・丸ゴシック・明朝・手書き風・毛筆・ポップなど、さまざまなジャンルをカテゴリごとに検索することも可能です。
また、商用利用が可能なのか、収録範囲がひらがな・カタカナ・漢字のどこまでなのかも、一目で確認することができるようになっています。

スライドやバナーデザインなどでは、多くのフォントを持っているほうがデザインの可能性の幅も広がります。
日本語も使えるフォントは貴重なので、ぜひチェックしておきましょう。

9. Google Fonts

Google Fontsは、言わずと知れたGoogleによるWebフォントサービスです。
一般的なアルファベットのほか、ギリシア文字やキリル文字、タイ文字やヴェトナム文字など、さまざまな文字に対応していますが、残念ながら日本語には対応していないようです。

太さや横幅などの細かいスタイルを指定する絞り込み検索を使うと、欲しいフォントが簡単に見つかるかもしれません。
選んだフォントは、生成された数行のコードをホームページやブログに差し込むことで、簡単にWebフォントとして表示できるようになります。

10. Shape Type

Shape Typeは、ベクターデータのフォントを、本来の正しいプロポーションで表示するために、ハンドルを動かして形の正確さを競うゲームです。

実際にハンドルを動かして「Compare」(比較する)ボタンを押すと、「Similarity」(近似性)がパーセンテージで表示されますが、100％に近づけるには相当の記憶力やフォントに関する知識が要求されます。

問題数は全10問で、それぞれに違ったタイプフェイスが採用されています。

11. FontBase

FontBaseはWindows・Mac・Linuxでインストールすることのできる高機能の無料フォントマネージャーです。
インストールされているフォントを入れ子状にフォルダ分けすることができたり、必要なフォントを条件に合わせて検索することができます。

どれだけフォントがインストールされていても、動作が軽快で、シンプルなUIを採用しているのもポイントです。

12. Font Famous

Font Famousはアメリカの有名企業を中心に、ベクターロゴをWebアイコンフォントのように簡単に表示することのできるサービスです。
掲載されているのは、「The New York Times」や「CNN」「Forbes」「lifehacker」「Tech Crunch」「Time」「The Wall Street Journal」など、その名の通り「有名」なメディアのロゴばかりです。

もちろん、基本的な使い方はWebフォントと同じなので、CSSで「color」や「font-size」などを指定することで色や大きさをカスタマイズすることも可能です。

13. Fontea

FonteaはPhotoshopで800以上のGoogle Fontsのフリーフォントを選べるようにすることができる無料のプラグインです。
検索窓も付いているので、ブラウザを開かなくとも常に最新の状態で好きなフォントを選ぶことができます。

Mac・WindowsのPhotoshopに対応しており、CC 2015以降が対象になっています。

14. Fontface Ninja

Fontface Ninjaは、Firefox・Google Chrome・Safariでインストール可能なブラウザエクステンションです。
さまざまなサイトに使われているロゴやヘッダーテキスト、UIなどのフォントを瞬時に表示し、必要に応じてダウンロードや購入もできるようになっています。

「あれ、このフォントなんだろう？」といった疑問にすぐに答えてくれる優秀なエクステンションです。
画像ではなくテキストベースのものであれば、日本語フォントも確認することができます。

15. Fontself

FontselfはPhotoshopやIllustratorで自分だけのフォントを作成することができるプラグインです。
現状アルファベットと特殊文字しか対応していませんが、Open Type(.otf形式)での出力に対応しており、MacでもWindowsでも利用することができます。

ドラッグ＆ドロップやコピー＆ペーストなど、PhotoshopやIllustratorの基本操作で作成することができるので、こうしたソフトの操作に慣れている方には使いやすいでしょう。

16. FontLab VI

FontLab VIはフォントの作成と編集を専用に作られたフォント編集ソフトです。
ベクター形式で編集することができ、WindowsとMac用にリリースされていますが、現在はパブリックベータ版としてリリースされています。

フォント専用ソフトということもあり、既存のフォントを読み込んでカスタマイズすることもできます。
ゼロから作ると大変だと思いますが、ベースを決めてオリジナルフォントを作成することで手間が省けそうです。

17. Google Noto Fonts

Google Noto FontsはGoogleが公開している多言語のフリーフォントです。
Google Fontsでは日本語フォントがありませんでしたが、Noto Fontsを利用することで漢字やかなにも対応したWebフリーフォントを簡単に導入することができます。

あまり知られていませんが「Noto」とは「No more tofu」の意味で、文字化けするときの四角(□)が豆腐のように見えることから、豆腐を増やさないという意味でつけられた名前だそうです。
日本語対応フォントとして、ゴシック調の「Noto Sans CJK JP」と明朝調の「Noto Serif CJK JP」があり、他にも絵文字専用フォントなども用意されています。

18. Better Google Fonts Finder

Better Google Fonts Finderは、Google Fontsの機能を拡張してさらに希望のフォントを探しやすくしたWebサービスです。
「I」や「O」の形から検索するというユニークな探し方も搭載しており、普段は見つからないようなフォントが見つかるかもしれません。

19. Type Anything

Type Anythingはテキストブロックのフォントファミリーやフォントサイズ、行間やマージンなどを瞬時に変えて、可読性をチェックすることができるツールです。

どうしてもWebデザインを行うときには、ブラウザ状でのテキストの見え方をチェックするために、ブラウザとCSSエディターを行ったり来たりしてしまいます。
しかし、このツールを使うことで、そうした余計な作業も必要がなくなります。

20. Trendy CSS Text Shadows

Trendy CSS Text Shadowsは、テキストシャドウを用いたCSSエフェクトを集めたコレクションサイトです。
親切にも、実際に利用している色の組み合わせまで16進数で表示してくれています。

もちろん一見画像に見えるものでもすべてCSSで作成しているので、「View CSS」をクリックすることでコードを確認したり、コピー＆ペーストで自分のホームページやブログサイトに利用することもできます。

21. Typefont

Typefontは、AIによって画像のフォントを判別することが可能なオープンソースのライブラリです。
ソースを読み込み、簡単なコードを記述するだけで、本の表紙に使われているフォント、雑誌や広告のタイポグラフィなどで使われているフォントが何か、候補を一覧表示してくれます。

JSONでのデータ出力や、Recognition Timeout(識別にかける時間)などを設定することもできます。
Webサービスなどに組み込むこともできそうです。

まとめ

フォントクイズから、Webフォントサービス、AIを活用したサービスまで、フォントに関するさまざまなWebサイトをご紹介いたしました。
タイポグラフィは結局のところ自分がデザインすることになるかと思いますが、こうしたツールを活用することで、デザインがしやすくなったり、フォントに対する考え方や世界観が変わってくるのではないでしょうか。

フォントは、わずかな字間、ちょっとしたタイプフェイスの違い、大きさや色などでずいぶんと印象が変わってくるので、非常に奥深く、それゆえに多くの人を魅了してきました。
ぜひ興味の湧いたサイトがあれば実際に訪れて確認してみてください。