demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

“What Font Is That?” – Browser Font Identifiers

tools / typography

Estimated reading time: 48 seconds

Analyzing a well-designed page usually starts with typography. You can always determine the fonts used on a web page by looking at the site's CSS, either directly, or through Chrome Developer Tools, Firebug or similar. If you only want to know the font (or simply develop your recognition of typefaces), digging through CSS can be a little arduous. As an alternative, I would suggest three tools:

WhatFont Tool The WhatFont tool is a Chrome extension that can bring up the font used on a web page with a mouse hover. It includes information on stack selection, style, weight and line-height, and includes support for TypeKit and Google Web Fonts.Fount

Font Finder is a similar plugin for Firefox, while Fount is a bookmarklet that does much of the same thing in any browsers.

If you have more suggestions, please add them in the comments!

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.