2018/11/10更新

タイポグラフィを活用するための12のツール

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はUX Planetからの翻訳転載です。配信元または著者の許可を得て配信しています。

デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。

Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏）

しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。

以下の項目に分けて、ツールを紹介しています。

フォントを選ぶ
フォントペアリングとスタイリングを選ぶ
フォントに情報の階層を付ける
インスピレーションを得る

フォントを選ぶ

タイポグラフィは、デザインに合わせたフォント選びから始まります。フォント選びはデザインの印象を左右するため、ユーザーとのコミュニケーションにおいて重要な役割を果します。

Google Fonts

無料フォントをお探しですか？　それならGoogle Fontsがおすすめです。850種類以上のフォントが無料で使えます。膨大な種類がありますが、カテゴリーやビジュアルプロパティ（太さなど）別にフォントを検索できます。

Calligraphr

製品に合ったフォントが見つかりませんか？　問題ありません。自分のフォントを作ることができます。Calligraphrなら、手書きの文字をベクターフォントに変換できます。

FontFace Ninja

Webページを見ていて「このフォントの種類は何？」と思うことはありませんか。もちろんブラウザーで開発者ツールを開けば、フォントの種類を調べられます。しかしもっと簡単な方法があります。FontFace Ninjaは無料のGoogle Chrome拡張機能で、Webサイト上のどんな種類のフォントも検索しブックマークすることができます。

Emotype

Emotypeを使えば、Webサイト上で表現したい感情に合ったフォントを探すことができます。フォントは、自信に満ちた、友好的な、独特な、ニュートラルな、の４つの感情に分類されています。

フォントペアリングとスタイリング

プロジェクトに沿った完璧なフォントを選ぶのは大変です。また複数のフォントを選び、組み合わせることもよくあります。フォントはユーザーが気持ちよく読み進められるような組み合わせでなくてはなりません。

Archetypepp

目的に合ったフォントの組み合わせを探すツールをお探しですか？　Archetypeppがおすすめです。Archetypeppを使えばブラウザ上で、違和感のないタイポグラフィのスタイリングとスペーシングを作ることができます。

Font Joy

Font Joyのスローガンは、「フォントペアリングをシンプルにする」です。このツールではフォントペアリングにディープラーニングを応用しています。しかし使うのは難しくありません。フォントを組み合わせるには、「Generate（作る）」でフォントの新しいペアリングを作り、「Lock（ロック）」で保存したいペアリングをロックし、「Edit（編集）」でフォントを選ぶ作業だけです。

フォントサイズで情報のヒエラルキーを付ける

フォントの組み合わせが決まったら、次はヒエラルキーを付ける作業です。見出しと本文とで違ったフォントサイズを採用し、適切なヒエラルキーをつくることで、サイト上の情報がどんな関係を持つかをユーザーにわかりやすく伝えます。

Material Design Type Scaleは、さまざまなスタイルのフォントを含んでおり、製品やその内容に合せたデザインのニーズに応えることができます。このサイトにあるType Scaleは、13個の情報カテゴリーにヒエラルキーを付けるための適切なタイポグラフィ（サイズやレタースペースなど）を組み合わせた表です。使いまわしの効くテキストカテゴリーを含んでいて、情報のヒエラルキーに合せてそれぞれ意図的にフォントが意味付けされています。