文字好きにはたまらない!Webフォント選びが楽しく捗るツールたち

2016/07/08

Maria Antonietta Perna

1

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

Webフォントのおかげで文字の表現力が格段にアップした今日この頃。選択肢が増えたのはいいけど、選ぶのが大変すぎる…。そこで、フォント選択と導入が捗るツールをまとめました(残念ながら欧文のみ)。

昨日の記事の続き。

書体組み合わせの学習ツール

次に紹介するのは、相性のよい書体をおすすめするだけでなく、書体の知識とをすり合わせる方法を教えてくれるツールたちです。

Type Connection

Type Connection

私が好んで使っているツールに、Aura Seltzerが制作したType Connectionがあります。Aura Seltzerはこのツールを、文字のデートゲームと呼んでいます。

ぴったりの書体の組み合わせを見つけられ、文字について学ぶのに良いインタラクティブなツールです。

Type Connectionは、良く知られた書体と適切に合う書体を探すところから始まります。数ある書体の組み合わせから1つを選び、理想的なパートナーを見つけようとする仲人になります。各ステップでタイポグラフィーに関する用語の意味書体の歴史などについて学びます。ゲームが終了すると、書体の組み合わせの善し悪しと、その理由が分かる仕組みになっています。

このゲームの作成者は、Type Connectionの主要な目標を次のように要約しています。

Type Connectionをプレイすれば、書体との絆が深まります

ゲームだけをしないでください。Type ConnectionのWebサイトは、書体を組み合わせる方法や、タイポグラフィーに関するさまざまな参考資料へのリンクを多く含んだ有益な情報の宝庫なのですから。

Mixing Typefaces (PDF)

U&lc PDF document on combining typefaces.

Mixing Typefacesは、デザインコミュニティを対象にした歴史ある出版物、U&lc (Upper and lower case)から取得したページをコピーしたPDFです。

本文の左にある縦軸上の書体を選び、横軸上の表示書体と相互参照します。2つの書体が交わるところにあるボックス内の番号(1〜3)は、相性の良さを示します。番号は次ような意味があります。

  1. 相性のよい組み合わせです
  2. 相性のよいい組み合わせではありません
  3. もう一度考えてください

The Art of Mixing Typefaces

The Art of Mixing Typefaces infographic by FastPrint.

The Art of Mixing Typefacesは、FastPrintが制作したGoogle Fontsの組み合わせを図版にまとめた素晴らしいものです。先ほど紹介したU&Ic文書から着想を得たものです。

組み合わせの相性情報は数字ではなく色を使って表示されますが、数字を使う場合と変わらず問題なく情報は伝達されます。

The Art of Combining Fonts

The Art of Combining Fonts infographic

The Art of Combining Fontsは書体の組み合わせについて学習するための素晴らしい図版情報です。読むだけでも楽しいですね。

Mixing and Matching Fonts

Infographic on mixing and matching fonts by Fontaholic

Mixing and Matching FontsもFontaholicが作成した、文字に関するミニレッスン付きの、きれいな図版に関するリソースです。

The Ten Commandments of Typography

The Ten Commandments of Typography infographic by DesignMantic

DesignManticが作成したこの図版には、書体の組み合わせとタイポグラフィーに関する優れたアドバイスがあります。

ブラウザー上でフォントをプレビュー・表示する

フォントを購入し、ダウンロードする前に、フォントがどのようにレンダリングされるかのテストをおすすめします。

以下に紹介するオンラインリソースは、選択したフォントをプレビューできるので役立ちます。また、フォントをプロジェクトで使用するのを助けてくれるものもあります。

Google Fontsプレビューおよびストリーミングサービス

Google Fontsライブラリーでフォントを閲覧していると、選択したものをプレビューするためのさまざまなオプションが表示されます。

  • 例文をプレビューします。これはデフォルトの設定です
    Google Fonts main screen
  • 例の単語をプレビューします
    Preview of single word on Google Fonts website.
  • 段落をプレビューします
    Preview of paragraph on Google Fonts website
  • ポスターのようにフォントを拡大して、プレビューします
    Preview of poster on Google Fonts website
  • プレビュー用に異なったテキストを選択する、または独自のテキストを入力できます
    Changing text to display in Google Fonts website
  • プレビューでフォントサイズを大きく、または小さくできます
    Functionality to increase or decrease font size on Google Fonts website

もう少し掘り下げれば、Google Fontsが選択したフォントをプレビュー、テストするための追加オプションに気付くでしょう。

「Add to Collection」ボタンをクリックして、フォントをいくつかコレクションに加えます。

Add to Collection button on Google Fonts website

試しにDroid SansとDroid Serifをコレクションに加えてみました。最初は、サンセリフやセリフの変化形の書体ファミリーから選択するのがもっとも無難です。

フォントがコレクションに入ったら、以下のことができるようになります。

  • 個別のフォントの隣にある×アイコンをクリックすると個別のフォントを削除します
  • 「Remove all families from Collection」ボタンをクリックすると選択したすべてのフォントを削除します
  • 画面下の「Review」ボタンをクリックしてさまざまなインタラクティブな方法で選択したフォントをテストします
    Fonts added to a collection on Google Fonts website

レビュー画面まで来たら、「Test Drive」オプションをクリックして選択したフォントを速やかに反映します。

Test Drive option on Google Fonts website

この画面では、書体を本文、見出し、小見出しで試したり、フォントサイズ、行の高さその他のCSSプロパティを変更したり、表示されているコンテンツを自分が作成したコンテンツと入れ替えたりできます。

それでも満足いかない場合は、一歩踏み込んでGoogle Fontsサイトのレビュー画面の「Try in Typecast」をクリックして、Typecastで選択したフォントをテストできます。このテストで使うTypecastアプリについては次項で紹介します。

Link to Typecast on Google Fonts website.

選択したフォントに満足したら、Google CDN(コンテンツ配信ネットワーク)を使って簡単にフォントをプロジェクトで使えるようにします。

画面下の「Use」ボタンをクリックして作業を開始します。

Use option to add Google Fonts chosen font to a project

ここからフォントスタイルと書式を選ぶと、選択した内容を微調整できます。本当に必要なものだけを使ってください。スタイルや書式を追加すればするほど、ブラウザーがファイルをロードする時間が長くなってしまいます。

単純にGoogle Fontsが提供するコードをコピーし、そのコードをプロジェクトに反映して、サービスを利用してフォントを自分のWebサイトに流し込むのが最善の方法です。

Google Fonts providing relevant code for inclusion of fonts in a website

Typecastプロトタイピング機能

Typecastはプロトタイプをデザインするためのインタラクティブなキャンバスを提供します。無料アカウントを作成すれば、すべての必要なHTMLおよびCSSコードを簡単にプロジェクトに反映できます。

Interactive prototyping tool on Typecast website

Typecastアプリのテキストをクリックすると、以下のようなあらゆることができるようになります。

  • 独自のテキストコンテンツの追加
  • 書体の変更
  • 背景色、色、フォントサイズ、行の高さなどのような多くのCSSの値の調整
  • 異なったviewportサイズごとの書体のプレビュー
  • テキストのベースライングリッド上での動作の確認

Web Font Blender

Web Font Blender website

Web Font Blenderは、Typecastほど機能が豊富ではありませんが、Google Fontsライブラリーの書体を素早く組み合わせて相性のよい書体を見つけるのに必要な機能をすべて備えています。たとえば、既存のテキストの編集、CSSフォント値の調整、プロジェクトとシームレスに統合するためのコードの理解などです。

Adobe TypekitプレビューとWebフォントストリーミングサービス

Adobe Typekit website

Google Fontsと同様に、アドビ システムズのTypekitを使えば、非常に多くのフォントをプレビューし、選択したフォントをWebサイト上に簡単に流し込めます。1つ1つの個別のフォントにライセンスは必要ありません。

Google Fontsとは違って、Typekitは異なった価格帯のプランを提供するサブスクリプション制のサービスです。無料のプランを利用してTypekitを試してみましょう。自分のWebサイト用に940以上のフォントを選択できます。

見出しや段落、言語、書体ファミリーなどをお勧めするオプションを含め、フォントを閲覧するオプションはたくさんあります。

書体をプレビューする用意ができたら、書体をクリックします。新しい画面が現れ、さまざまなウェイトやスタイルを見て書体の元となるフォントファミリーや書体制作会社についてより詳しい情報を得られます。

「Specimens」タブをクリックすると、Open expanded Web Fontへのリンクが表示されます。Open expanded Web Fontは、選択した書体を本文、見出し用のさまざまなサイズでプレビューできる画面を表示します。

Specimens tab on Typekit website

「Specimens」タブの隣の「Type Tester」タブをクリックするとさらに詳しい設定ができます。独自のテキストを追加し、利用できるウェイトやスタイルを使って選択した書体を異なったサイズにしてプレビューできます。

Type Tester tool on the Typekit website

Webサイトで選択したフォントを使用する準備ができたら、画面右上の「Use fonts」ボタンをクリックしてから「Web」タブをクリックします。

Using fonts on Typekit

Typekitは、フォントをWebプロジェクトに反映するために「キット」を利用します。この後、キットの作り方の簡単なチュートリアルを紹介します。もっと詳しい内容を知りたい場合は、Typekitヘルプページを参考にしてください。

キットを作るには、上の画像で表示されている「create a new kit」をクリックするところから始めます。

次に、ポップアップ画面が表示され、キットとWebサイトのドメインの名前の入力を求められます。ためらわずに入力し、「Continue」ボタンをクリックします。

Popup to add a new kit on Webkit

やりましたね、キットの作成完了です!

作成したキットをプロジェクトで使うには、Typekitが提供するコードをHTML文書の<head>セクションにコピー&ペーストするだけでOKです。そして「Continue」ボタンをクリックし、次の画面にアクセスします。

Code to add Typekit fonts to your project

最後に、フォントの文字セット、ウェイト、スタイルを選択します。ポップアウトウィンドウの下にあるキットサイズ情報に注意します。文字セット、ウェイト、スタイルが多くなるに従って、Webページにより大きな負担がかかることを覚えておいてください。

タイポグラフィー要素をスタイリングするTypekitが欲しいなら、ページ上部のインプットボックスに関連したCSSセレクターを入力し、Enterキーを押します。代わりに単に関連したCSSルールをWebサイトのスタイルシートに追加するだけでもかまいません。

Publishing your kit using Typekit

すべての作業が完了したら、「Publish」をクリックします。Webサイトに選択した書体が数分以内に表示されます。

最後に

記事では最適な書体の組み合わせを選び、プレビューし、簡単にプロジェクトに反映するためのオンラインリソースを紹介しました。

紹介したツールは並行して利用できます。たとえば、Google Web Fonts Typography Projectでぴったりの組み合わせを見つけてこれをTypecastで試せるというようなことです。

より良い学習成果を得るためには、書体の組み合わせを紹介した以下の記事をしっかりと読み込んでください。

(原文:20 Inspirational, Free Tools For Better Typeface Pairing

[翻訳:中村文也]
[編集:Livit

Copyright © 2016, Maria Antonietta Perna All Rights Reserved.

Maria Antonietta Perna

Maria Antonietta Perna

BootstrapやjQueryでの作業を楽しむフロントエンド開発者です。HTMLテンプレートやカスタムWordPressテーマの構築に強い興味を持ち、WPThemeMakeover.comで幅広く執筆しています。

Loading...