こういうのを待ってた！日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype

文字の指定をいろいろ調整できる無料ツールは他にもありますが、ようやく日本語フォントに対応したものがリリースされていたので、紹介します。

文字のサイズやline-heightをはじめ、見出しレベルによるサイズの拡大率など、レスポンシブ用の文字の指定が調整でき、CSSとデザイン用ファイルとしてダウンロードできます。

Archetype, Digital Typography Design Tool

Archetypeの使い方は、簡単です。
登録などの面倒なことも一切不要ですが、登録（無料）するとデータを保存できます。

まずは、サイトにアクセスします。

Archetype, Digital Typography Design Tool

デフォルトでは英語フォントで、英語のダミーテキストになっているので、日本語に変更してみます。「1. Pick Fonts」で日本語フォントに変更します。

「1. Pickup Fonts」をクリック

見出し用とパラグラフ用のフォントを変更します。まずは、見出し用を変更するために、「Headings」の欄をクリックします。

「Headings」の欄をクリック

見出しに利用できるフォントが一覧表示されました。用意されているのは、Google Fontsのみなので、「Local Fonts」をクリックし、ローカルの日本語フォントを指定します。

「Loval Fonts」をクリック

インストールしてあるフォントを指定します。
今回は、TPスカイを指定してみました。
参考: TPスカイ

フォント名を入力

「Apply Local Font」をクリックすると、見出しにTPスカイが反映されました。

見出しのフォントを日本語フォントに変更

同じ手順でパラグラフ用のフォントも日本語フォントに変更します。

パラグラフのフォントを日本語フォントに変更

ダミーテキストを日本語に変更して、終了です。

日本語フォントの適用

サイドバーのメニューから、フォントのサイズやline-heightの調整を細かくできます。

フォントのサイズやline-heightの調整

スマホでの表示を確認することもできます。

スマホ表示の確認

フォントの調整が完了したら、そのスタイルシートをCSSファイルでダウンロードしたり、デザイン用にSketchにエクスポートすることができます。

生成されたフォント用のCSS