Analyzing a well-designed web page usually starts with identifying the typography. You can always determine the fonts used in a web page body copy by looking at the site's CSS via your browser's Developer Tools, or looking at the stylesheet directly. However, this won't help you if the font is rendered as a bitmap in an image; and digging through CSS in other casescan be a little arduous. I would suggest these tools as an alternative:

Identifying Fonts In Bitmaps

To identify typefaces buried in images, I would recommend the excellent WhatFontIs.com. The process is very simple: take a screenshot of the font you wish to identify (only single lines of text are supported at the moment), identify some of the letters used, and let the service do its work in suggesting the exact match or free, closely-matching alternatives.

MyFonts WhatTheFont service works similarly, athough it does not provide quite the same range of suggestions.

Identifont takes a different, catalog-based approach: fonts can be found from induction, after answering a series of questions, by name, by similairity to other typefaces, by designer / publisher / foundry, or (somewhat unusually) by picture: a potentially very useful technique for identifying icon fonts. Recently the service launched Identifont Tools, which allows typeface searches based on broader characteristics such as unusual features, width, height, and optical size.

Identifying Fonts In Body Text

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.

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!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.