こういうのを待ってた!日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype
Post on:2018年2月28日
文字の指定をいろいろ調整できる無料ツールは他にもありますが、ようやく日本語フォントに対応したものがリリースされていたので、紹介します。
文字のサイズやline-heightをはじめ、見出しレベルによるサイズの拡大率など、レスポンシブ用の文字の指定が調整でき、CSSとデザイン用ファイルとしてダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022701.png)
Archetype, Digital Typography Design Tool
Archetypeの使い方は、簡単です。
登録などの面倒なことも一切不要ですが、登録(無料)するとデータを保存できます。
まずは、サイトにアクセスします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-01.png)
Archetype, Digital Typography Design Tool
デフォルトでは英語フォントで、英語のダミーテキストになっているので、日本語に変更してみます。「1. Pick Fonts」で日本語フォントに変更します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-02.png)
「1. Pickup Fonts」をクリック
見出し用とパラグラフ用のフォントを変更します。まずは、見出し用を変更するために、「Headings」の欄をクリックします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-03.png)
「Headings」の欄をクリック
見出しに利用できるフォントが一覧表示されました。用意されているのは、Google Fontsのみなので、「Local Fonts」をクリックし、ローカルの日本語フォントを指定します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-04.png)
「Loval Fonts」をクリック
インストールしてあるフォントを指定します。
今回は、TPスカイを指定してみました。
参考: TPスカイ
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-05.png)
フォント名を入力
「Apply Local Font」をクリックすると、見出しにTPスカイが反映されました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-06.png)
見出しのフォントを日本語フォントに変更
同じ手順でパラグラフ用のフォントも日本語フォントに変更します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-07.png)
パラグラフのフォントを日本語フォントに変更
ダミーテキストを日本語に変更して、終了です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-08.png)
日本語フォントの適用
サイドバーのメニューから、フォントのサイズやline-heightの調整を細かくできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-09.png)
フォントのサイズやline-heightの調整
スマホでの表示を確認することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-10.png)
スマホ表示の確認
フォントの調整が完了したら、そのスタイルシートをCSSファイルでダウンロードしたり、デザイン用にSketchにエクスポートすることができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201801/2018022702-11.png)
生成されたフォント用のCSS
sponsors