Helpful Tools for Web Developers: WhatFont Chrome Extension

In my opinion, there’s no trickier aspect of web design / development like typography. It’s the one part of the design process I don’t think I’ll ever quite get my head around. Choosing the right font, pairing fonts together, or even figuring out what font is being used on an existing site that you’re attempting to draw inspiration from can prove very difficult. Luckily, there’s an awesome chrome extension that helps with the last one: WhatFont. WhatFont let’s you click on any text on a webpage and see what font is being used to render that text.

whatfont

WhatFont tells you:

  • The name of the font
  • The font family
  • The size of the text (as it is on the page)
  • The style of the text (bold, italic, etc)
  • The color of the text (as it is on the page)
  • The line-height of the text (as it is on the page)
  • How the font is being served (e.g., Google Fonts)

One great thing thing you can do with WhatFont is combine it with a tool like Skitch capture screenshots of the font information and use it to create a reference library of fonts you might like to use in future projects.