昨日の記事の続き。
書体組み合わせの学習ツール
次に紹介するのは、相性のよい書体をおすすめするだけでなく、書体の知識とをすり合わせる方法を教えてくれるツールたちです。
Type Connection
私が好んで使っているツールに、Aura Seltzerが制作したType Connectionがあります。Aura Seltzerはこのツールを、文字のデートゲームと呼んでいます。
ぴったりの書体の組み合わせを見つけられ、文字について学ぶのに良いインタラクティブなツールです。
Type Connectionは、良く知られた書体と適切に合う書体を探すところから始まります。数ある書体の組み合わせから1つを選び、理想的なパートナーを見つけようとする仲人になります。各ステップでタイポグラフィーに関する用語の意味や書体の歴史などについて学びます。ゲームが終了すると、書体の組み合わせの善し悪しと、その理由が分かる仕組みになっています。
このゲームの作成者は、Type Connectionの主要な目標を次のように要約しています。
Type Connectionをプレイすれば、書体との絆が深まります
ゲームだけをしないでください。Type ConnectionのWebサイトは、書体を組み合わせる方法や、タイポグラフィーに関するさまざまな参考資料へのリンクを多く含んだ有益な情報の宝庫なのですから。
Mixing Typefaces (PDF)
Mixing Typefacesは、デザインコミュニティを対象にした歴史ある出版物、U&lc （Upper and lower case）から取得したページをコピーしたPDFです。
本文の左にある縦軸上の書体を選び、横軸上の表示書体と相互参照します。2つの書体が交わるところにあるボックス内の番号（1〜3）は、相性の良さを示します。番号は次ような意味があります。
- 相性のよい組み合わせです
- 相性のよいい組み合わせではありません
- もう一度考えてください
The Art of Mixing Typefaces
The Art of Mixing Typefacesは、FastPrintが制作したGoogle Fontsの組み合わせを図版にまとめた素晴らしいものです。先ほど紹介したU&Ic文書から着想を得たものです。
組み合わせの相性情報は数字ではなく色を使って表示されますが、数字を使う場合と変わらず問題なく情報は伝達されます。
The Art of Combining Fonts
The Art of Combining Fontsは書体の組み合わせについて学習するための素晴らしい図版情報です。読むだけでも楽しいですね。
Mixing and Matching Fonts
Mixing and Matching FontsもFontaholicが作成した、文字に関するミニレッスン付きの、きれいな図版に関するリソースです。
The Ten Commandments of Typography
DesignManticが作成したこの図版には、書体の組み合わせとタイポグラフィーに関する優れたアドバイスがあります。
ブラウザー上でフォントをプレビュー・表示する
フォントを購入し、ダウンロードする前に、フォントがどのようにレンダリングされるかのテストをおすすめします。
以下に紹介するオンラインリソースは、選択したフォントをプレビューできるので役立ちます。また、フォントをプロジェクトで使用するのを助けてくれるものもあります。
Google Fontsプレビューおよびストリーミングサービス
Google Fontsライブラリーでフォントを閲覧していると、選択したものをプレビューするためのさまざまなオプションが表示されます。
- 例文をプレビューします。これはデフォルトの設定です
- 例の単語をプレビューします
- 段落をプレビューします
- ポスターのようにフォントを拡大して、プレビューします
- プレビュー用に異なったテキストを選択する、または独自のテキストを入力できます
- プレビューでフォントサイズを大きく、または小さくできます
もう少し掘り下げれば、Google Fontsが選択したフォントをプレビュー、テストするための追加オプションに気付くでしょう。
「Add to Collection」ボタンをクリックして、フォントをいくつかコレクションに加えます。
試しにDroid SansとDroid Serifをコレクションに加えてみました。最初は、サンセリフやセリフの変化形の書体ファミリーから選択するのがもっとも無難です。
フォントがコレクションに入ったら、以下のことができるようになります。
- 個別のフォントの隣にある×アイコンをクリックすると個別のフォントを削除します
- 「Remove all families from Collection」ボタンをクリックすると選択したすべてのフォントを削除します
- 画面下の「Review」ボタンをクリックしてさまざまなインタラクティブな方法で選択したフォントをテストします
レビュー画面まで来たら、「Test Drive」オプションをクリックして選択したフォントを速やかに反映します。
この画面では、書体を本文、見出し、小見出しで試したり、フォントサイズ、行の高さその他のCSSプロパティを変更したり、表示されているコンテンツを自分が作成したコンテンツと入れ替えたりできます。
それでも満足いかない場合は、一歩踏み込んでGoogle Fontsサイトのレビュー画面の「Try in Typecast」をクリックして、Typecastで選択したフォントをテストできます。このテストで使うTypecastアプリについては次項で紹介します。
選択したフォントに満足したら、Google CDN（コンテンツ配信ネットワーク）を使って簡単にフォントをプロジェクトで使えるようにします。
画面下の「Use」ボタンをクリックして作業を開始します。
ここからフォントスタイルと書式を選ぶと、選択した内容を微調整できます。本当に必要なものだけを使ってください。スタイルや書式を追加すればするほど、ブラウザーがファイルをロードする時間が長くなってしまいます。
単純にGoogle Fontsが提供するコードをコピーし、そのコードをプロジェクトに反映して、サービスを利用してフォントを自分のWebサイトに流し込むのが最善の方法です。
Typecastプロトタイピング機能
Typecastはプロトタイプをデザインするためのインタラクティブなキャンバスを提供します。無料アカウントを作成すれば、すべての必要なHTMLおよびCSSコードを簡単にプロジェクトに反映できます。
Typecastアプリのテキストをクリックすると、以下のようなあらゆることができるようになります。
- 独自のテキストコンテンツの追加
- 書体の変更
- 背景色、色、フォントサイズ、行の高さなどのような多くのCSSの値の調整
- 異なったviewportサイズごとの書体のプレビュー
- テキストのベースライングリッド上での動作の確認
Web Font Blender
Web Font Blenderは、Typecastほど機能が豊富ではありませんが、Google Fontsライブラリーの書体を素早く組み合わせて相性のよい書体を見つけるのに必要な機能をすべて備えています。たとえば、既存のテキストの編集、CSSフォント値の調整、プロジェクトとシームレスに統合するためのコードの理解などです。
Adobe TypekitプレビューとWebフォントストリーミングサービス
Google Fontsと同様に、アドビ システムズのTypekitを使えば、非常に多くのフォントをプレビューし、選択したフォントをWebサイト上に簡単に流し込めます。1つ1つの個別のフォントにライセンスは必要ありません。
Google Fontsとは違って、Typekitは異なった価格帯のプランを提供するサブスクリプション制のサービスです。無料のプランを利用してTypekitを試してみましょう。自分のWebサイト用に940以上のフォントを選択できます。
見出しや段落、言語、書体ファミリーなどをお勧めするオプションを含め、フォントを閲覧するオプションはたくさんあります。
書体をプレビューする用意ができたら、書体をクリックします。新しい画面が現れ、さまざまなウェイトやスタイルを見て書体の元となるフォントファミリーや書体制作会社についてより詳しい情報を得られます。
「Specimens」タブをクリックすると、Open expanded Web Fontへのリンクが表示されます。Open expanded Web Fontは、選択した書体を本文、見出し用のさまざまなサイズでプレビューできる画面を表示します。
「Specimens」タブの隣の「Type Tester」タブをクリックするとさらに詳しい設定ができます。独自のテキストを追加し、利用できるウェイトやスタイルを使って選択した書体を異なったサイズにしてプレビューできます。
Webサイトで選択したフォントを使用する準備ができたら、画面右上の「Use fonts」ボタンをクリックしてから「Web」タブをクリックします。
Typekitは、フォントをWebプロジェクトに反映するために「キット」を利用します。この後、キットの作り方の簡単なチュートリアルを紹介します。もっと詳しい内容を知りたい場合は、Typekitヘルプページを参考にしてください。
キットを作るには、上の画像で表示されている「create a new kit」をクリックするところから始めます。
次に、ポップアップ画面が表示され、キットとWebサイトのドメインの名前の入力を求められます。ためらわずに入力し、「Continue」ボタンをクリックします。
やりましたね、キットの作成完了です！
作成したキットをプロジェクトで使うには、Typekitが提供するコードをHTML文書の<head>セクションにコピー＆ペーストするだけでOKです。そして「Continue」ボタンをクリックし、次の画面にアクセスします。
最後に、フォントの文字セット、ウェイト、スタイルを選択します。ポップアウトウィンドウの下にあるキットサイズ情報に注意します。文字セット、ウェイト、スタイルが多くなるに従って、Webページにより大きな負担がかかることを覚えておいてください。
タイポグラフィー要素をスタイリングするTypekitが欲しいなら、ページ上部のインプットボックスに関連したCSSセレクターを入力し、Enterキーを押します。代わりに単に関連したCSSルールをWebサイトのスタイルシートに追加するだけでもかまいません。
すべての作業が完了したら、「Publish」をクリックします。Webサイトに選択した書体が数分以内に表示されます。
最後に
記事では最適な書体の組み合わせを選び、プレビューし、簡単にプロジェクトに反映するためのオンラインリソースを紹介しました。
紹介したツールは並行して利用できます。たとえば、Google Web Fonts Typography Projectでぴったりの組み合わせを見つけてこれをTypecastで試せるというようなことです。
より良い学習成果を得るためには、書体の組み合わせを紹介した以下の記事をしっかりと読み込んでください。
- On Web Typography by Jason Santa Maria
- Combining Typefaces: Free guide to great typography, by Tim Brown
（原文：20 Inspirational, Free Tools For Better Typeface Pairing）
［翻訳：中村文也］
［編集：Livit］
