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

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

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

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

Web Typeface Identification Tools

tools / typography

Estimated reading time: 1 minute, 30 seconds

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 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

What Font Is.comTo 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

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.