任意のサイトのfont-family、font-sizeをポチッとシミュレーション出来る「Font Fit」|簡単にフォントデザインの変更後を確認しよう

任意のサイトのfont-family、font-sizeをポチッとシミュレーション出来る「Font Fit」|簡単にフォントデザインの変更後を確認しよう

こんにちは!たこぼーです。

メディアのターゲットによって、フォントの種類やサイズの変化は、読了率を上げたり、滞在時間を長くする重要な要素です。ただ、サイズ・種類の組み合わせは複数ある上に、その反映させる箇所も、記事内なのか、タイトルなのかなど、複数パターンが考えられます。

これまででしたら、developerツールなどを使って、変更をしていたと思いますが、本稿で取り上げる「FontFit」なら、読み込んだサイトの中で、クリックして指定し、fontfamily、fontsizeを自在に変更できます。クライアントとの打ち合わせで、その場で変更して共通認識を持つときにも便利ですよ。それでは見ていきましょう。

Font Fit

リンク:「Font Fit」

英語サイトでしたが、非常に使い方も簡単でした。まずはFontFitにアクセスします。トップページの左上に検証してみたいURLをいれます。入力後、openを押します。

 

Font Fit

しばらくすると、対象のサイトがトップページに表示されます。表示されたページの変更/検証したい部分をマウスオンすると青いラインで囲まれるのでそのままクリックします。

 

スクリーンショット 2016-08-12 16.52.35

トップページ上部にあるバーから変更したい項目を選びます。変更できる項目は、フォントの種類、フォントサイズ、カラーなどが選択できます。さきほど、選択した部分と同一要素のフォントがすべて変更されます。

 

Font Fit

リンク:「Font Fit」

検証後は、右上のShare/Exportをクリックするとシュミレーション結果やHTMLやCSSのシェア/エクスポートをすることが出来ます。

非常に使いやすいFontFitですが、日本語フォントは未対応なので、その点が少し残念でしたが、フォントのイメージを共有するのに便利なツールなので、興味のある方はブックマークして利用してみてください。

関連するまとめ

このまとめに関するまとめ

アクセスランキング

最近アクセス数の多い人気のまとめ