今やタイポグラフィを見る、学ぶ、知る、活用する、作る。それらすべてのことが様々なサイトやツールを使って実現することが可能です。

ここ1ヶ月くらい、僕のFacebookで投稿させて頂くネタ／書かせて頂く記事の内容がタイポグラフィに偏っていたのですが、実はちょっとタイポグラフィに関するお話をさせて頂く機会があったので、ずーーっと調べていました。

それこそ、作ってみたり、動画みたり、チュートリアル見たり…あれやこれやとまぁ、よくやったわと自分で自分を褒めてみたり…

とは言っても、僕はタイポグラフィを学校や専門で勉強したことは無いので、その辺りは別の人にお話頂き、僕はとにかくWEB上での活用、情報収集面に注力させて頂いたのですが、本当に色々あってびっくら仰天。

とういわけで、今日はその時話しさせてもらった内容を。あーんど！僕が以前からお世話になっている物を加えてご紹介！

かなり、がっつりしたボリュームになってしまいましたので、時間の有るときにでも便利帳替わりに使ってもらえればなと思います。もちろん、僕も自分で書いておきながら今まで知り得たサイトを全てまとめた記事になるので、もはや備忘録扱いですね。

目次

• 目を肥やせ！レベル高すぎるタイポグラフィの参考サイト達！
• フォントの事を知れ！フォントに関する色々を知るために役立つサイト達！
• そのフォントを使うとどんな風に見えるかを確認出来るツールやサイト達！
• もはやフォント作っちゃえ！フォント作って共有したりDLしたりするようなサイト色々！
• フォントを購入するならココ！フォント購入サイト色々！
• フリーフォント紹介サイト多すぎまとめ！（ライセンス注意！）
• その他フォント／タイポグラフィに関する諸々！

目を肥やせ！レベル高すぎるタイポグラフィの参考サイト達！

タイポグラフィに関することに興味を持ってもらう時、とにかく最初にタイポグラフィを使ってどんな物を作っているのか、どんな作品があり、どうやってつくっているのかを考えることが大事だと思っています。

美しさの中にはいつだって理由があり、その大半は解析／分解ができるものだと僕は思っているので、そういった観点から見ると自分自身の成長にも、またやる気にも火をつけてくれる気がするので、是非お勧めです！

Typography Served :: Gallery

もはや、タイポグラフィ好きならば絶対に見て損はないタイポグラフィ専用ギャラリーサイト！マジでテンション上がりますね！

fonts, typefaces and all things typographical — I love Typography (ILT)

iLTと言うだけで通じたのがびっくりしましたが、それだけ人気のブログなんでしょう！タイポグラフィに関する様々な記事を取り上げているブログで、僕の中ではタイポグラフィブログの中でも抜きん出て人気かと！

Typographica. Type Reviews, Books, Commentary.

先日、こちらのサイトから2011年のおすすめタイプフェイスが出ていましたが、抜粋にセンスありすぎる！それいがいにもBook Reviewなどの本に対するタイポグラフィギャラリー等は見ておいて損は無いかと！ http://typographica.org/2012/features/our-favorite-typefaces-of-2011/

Fonts In Use – Type at work in the real world.

こちらはフォーマット毎に様々なタイポグラフィを参考にすることができます。ブランディング、WEB、本、パッケージと、タイポグラフィに関する発見に事欠くことは無いでしょう！

フォントの事を知れ！フォントに関する色々を知るために役立つサイト達！

自分がデザインするとき使うフォント。そのフォントのことを語れると、相手への説得材料の一つになることがあります。例えば、『このGothamフォントは信頼感を生みます！』みたいな話をするときだって、『Gothamフォントはオバマ大統領のスローガンに使われてる背景から～』とかそんな言い回しができれば、依頼者への説得材料や納得、時には安心を生むこともあります。あくまでも材料でしかありませんが、知っておいて損はないかと！

Die 100 Besten Schriften

かの有名なFontShopさんから良く使われるタイポグラフィのベスト100が紹介されていました！第一位はもちろんあのフォント！

Thinking with Type | Home

タイポグラフィを考えるサイト！カーニング、マージンの取り方／意味、タイポグラフィにおけるグリッドレイアウト等、とにかく文字好きなら目を通しておくべき情報が山のよう！

Typedia: A Shared Encyclopedia of Typefaces

タイポグラフィのWikipediaならぬTypedia！使用するフォントのことは語れるようにしておくとベスト！

Identifont – Identify fonts by appearance, find fonts by name

上記同様にフォントのことを調べられるサイトの一つ！

iOS Fonts

IOSに入っているフォントが何かを知りたい時に見る！

The Web Font Combinator

フォント同士のコンビネーションを見て比較することが出来るサイト！Georgia／Garamond／Times New Romanの夢の競演を見るサイト！？

A lesson on typography

こちら、つい先日超かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめでもご紹介させて頂きましたが、バンクーバーにあるVancouver Film Schoolという超有名校からの映像作品、フォントの部位や種類等について学ぶことができる映像です！

今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのWEB屋

自分記事ですが、僕が考える有名フォントをいくつかまとめてあります。簡単ですが、解説付きですので、よければご参考までにどぞ！

そのフォントを使うとどんな風に見えるかを確認出来るツールやサイト達！

WEB系の人は特に知っておいて欲しかったネタですね。フォント確認のためのツールやアプリは色々ありますが、僕は結構シチュエーションによって使い分けるタイプです。

長い文章なのか、ロゴタイプのように短い文章なのか、行間の設定とかまで意識するのか、Macでの見方は？Windowsでは？考えることは山のようにあるので、その時々の場合に合わせて使い分けるようにすると良いかもしれませんね！

wordmark.it

自分のPCに入ってるフォントを確認するなら最高のサイト！文字を入力してLoad fontsを押すだけ！短い文章向け。

Typetester – Compare fonts for the screen

さらに、一言じゃなくて文章でタイポグラフィを確認したいならこちらのサイト！かなり細かい調整が可能！

STC :: fontBROWSER ::

こちらも文章として表示確認するタイプ！特徴的なのはフォントリストがセレクトボックスじゃないので、見やすい！

Typechart – Browse Web Type, Grab CSS.

WinとMacの両方でWEB上の表示確認ができ、なおかつCSSまでダウンロードできる便利サイト！Macユーザーは特にWindowsで見た時との違いを意識しながら見てみると吉かと！

Font Tester – CSS Font Comparison Tool

カラム毎に表示比較が可能で、なおかつ設定項目の多さが特徴的なサイト！UIは他サイトの方が僕は好きですが、時と場合によってはこっちの方が便利かも！

ワンクリックで使用してるフォントが分かる「WhatFontTool」が便利！ | バンクーバーのWEB屋

以前僕のブログでも、こちらのツールをご紹介させて頂きましたが、サイト上で使用されているフォント（Font-family）が何かわかる拡張機能！

もはやフォント作っちゃえ！フォント作って共有したりDLしたりするようなサイト色々！

あまり数は知りませんが、フォントを作るっていうと敷居が高いように感じます。僕自身そう感じていますので、まずは下記のようなオンラインのツールを使って試し作りをしてみるのは良いかもしれません！

また、どれだけフォントを作るということが大変なのかも知っておくと、フォントに対するありがたみのような物を感じることができます！

FontStruct | Build, Share, Download Fonts

フォント作成と聞いて一番最初に思いつくサイト！ これとか もう変態だろ！

Font Generator – Make Your Own Handwriting Font With Your Fonts

手書きフォントを自分で作るサイトらしい！（僕の汚い字で試すのは嫌なので、誰かに今度やってもらう…）

フォントを購入するならココ！フォント購入サイト色々！

フォント購入を検討するときにとりあえず見るサイト達！フォント購入サイトってあんま知られてないけど、様々な特集や企画、イベントがてんこ盛りで見てて飽きることが無い！

Download fonts from classic to cool – Linotype.com

つまり、僕が好きなフォントが多い（笑）

MyFonts: Webfonts & Desktop Fonts

WEBフォントも扱ってますね。ユニークな奴が多い気がします！

Web fonts and desktop fonts | Fontspring

おなじくWEBフォントも扱ってる！最近フォント購入できるサイトってWEBフォント扱ってるのやっぱ多いですね！

FontShop. The World’s Best Fonts.

恐らく個人的に最も重宝してるサイト！先程の Die 100 Besten Schriften もこちらのサイトからの特集ですね！

Lost Type Co-op

購入専用サイトってわけじゃ全然ないんだけれども、個人的に好きすぎるからご紹介！

フリーフォント紹介サイト多すぎまとめ！（ライセンス注意！）

フリーフォント紹介しているサイトにも触れておこう、って思ったくらいのノリだったのに、量が多すぎてどうしていいかわからないので、全部載せておくことにしやした！ライセンス系には十分ご注意ください！

Abstract Fonts – 13,462 Free Fonts

Fawnt – Top free fonts | Font – Archive | Blog Design and Webdesign

FreeTypography — only high quality free typography from the web

The League of Moveable Type

Free Fonts – Cool Fonts

16,687 free fonts for Windows and Mac – FontSpace

Free Fonts Download, Fonts for Free

Download Free Fonts – Search Free Fonts

Better Fonts – Thousands of Free Fonts for Instant Download!

Free Fonts to Download + Premium Typefaces

Download fonts | ShowFont.net | Download 10,000 Free Fonts

Open Font Library – Open Font Library

Download Free Fonts for Mac, Android, Windows | Font Cubes

その他フォント／タイポグラフィに関する諸々！

Kern Type, the kerning game

こちら、日本でも話題になりましたね！カーニングゲームのサイト！（※カーリングじゃないよ！）

Typekit

アドビ提供のサイトかな。年間契約で様々なフォントの使用が可能！お話させてもらった人も何人か使ってた。

11 jQuery Plugins That Can Enhance Your Typography

Lettering.jsを筆頭にjQueryのタイポグラフィ関連のプラグインをまとめた記事！

Mobile FontFonts

アプリ開発しないからわからないけど、モバイルアプリを開発する上で使うフォントを購入、スクリプト配布までしているサイトらしい！先日はアプリ開発者がいなかったのですが、誰か逆にレビューしてください！

 

さて、いかがでしたでしょうか？

お話する中で思ったのですが、フォントやタイポグラフィに関する知識、感性、活用法など、人によって様々。僕が使ってる物だけを選出してもよかったのですが、それだともったいないことに気付いて迷惑かもしれませんが、全部紹介するに至りました。

あくまでも情報共有というレベルでご紹介させて頂いたお話だったのですが、最近はこういう情報共有から生まれる繋がりで飯食ってる気がするので、今後もこういう何かにフォーカスした情報収集は続けてみようかな。何よりも自分自身、作る側の視点で見た時の発見も多いし、楽しい。

皆さんの中でも、こんなの使ってるよ！というものがあれば是非教えてくださいませ！

特にだれか、日本語フォントについての情報共有をお願いいたします！（切望）

とりあえず、最近はタイポグラフィに集中し過ぎた。もーう一時タイポグラフィネタは書かねぇ（笑）

 

PS: まったく本記事とは関係無いのですが、 アルファブロガーアワード2011 が始まりましたね！なんと今年で最後だとか？。。。寂しいなぁ。もしよければ、このブログも推薦していただければ、嬉しすぎて10kmくらい走ります…まぁ、マラソン好きなので推薦されなくても走るわけですが（笑）よろしくお願いいたします！あと、これ書いたらCall of dutyのBlack Ops（PS3のゲーム）一緒にやると友人と約束してるので、僕はいまから廃人と成ります。みなさんまた会う日まで…