気になるサイトのフォントが1クリックで解る「WhatFontTool」

いろいろなサイトを見て回っていると、お、このフォントって何を使ってるんだろう? と疑問に思うことってありますよね。主にキレイな英文フォントを使っている海外サイトとか。

そんなときに、たった1度クリックするだけでそのフォントが解ってしまうという、なんともデザインをしている人にとって嬉しいブックマークレット、「WhatFontTool」がとても良い感じなのですよ。

WhatFontTool

ブックマークレットを実行することで、カーソルを乗せたテキストのフォントが解るだけでなく、さらにクリックすることで、

  • フォントファミリー
  • フォントのサイズ
  • 行間のサイズ(line-height)
  • フォントのカラー

といったものまで、たちどころにわかってしまうのです。

通常であれば、仮にそのサイトのフォントについて知りたいと思った場合、そのサイトのソースを開いて、CSSファイルにアクセスしてみたり、Chromeならデベロッパーツールを使って・・・みたいなことをしなければならないんですが、このブックマークレットを実行すれば、そんなプロセスを一切省くことが可能になります。

調べ終われば、ブラウザの右上に表示されている「Exit WhatFont」をクリックすることで、ブックマークレットの効果も解除されますよ。

ただし、フォントを知ることができるのは、純粋に書かれているテキストのみ。画像に埋め込まれたテキストのフォントまでは解りません。

この点から言えば、日本語で書かれたサイトよりも海外系のサイトなんかで役に立ちそうですね。日本語環境だったら、だいたいどのサイトも大抵フォント指定は変わらないですから。

しかし、いずれにしても非常に細かいながら、まさしくかゆいところに手が届くツールですよね。

「デザイン」新着記事

Font Awesome 4.5.0がリリース Googleアイコンなど最新のデザインに変更

ホシナ カズキ

アイコンWebフォント「Font Awesome」が66アイコンを追加したバージョン4.4.0を公開

ホシナ カズキ

iPhone 6/iPhone 6 PlusやiOS 8、Apple Watchのモックアップ用PSD素材

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく