Quite often, I will be visiting a website and wonder about a certain font that is used. While years as a typographer and a Web designer have given me a keen eye for type styles, sometimes I need to peek at the CSS. Normally, this would entail launching Firebug and using the inspection tool to highlight my target of curiosity.
I now have employed a better (quicker!) tool: the Font Finder extension. This add-on lets you analyze the full CSS font detail for an element and modify those specifications as non-destructive edits, helping you conceptualize your site with a different font presence.
The New York Times website is a good example of font use. Its variation of fonts and sizes creates visual appeal and helps to differentiate parts of content. This site will serve as my example for demonstrating this extension.
Analyzing Font Detail
To deploy the Font Finder analysis tool, click its icon on the taskbar. When it is activated, the icon’s white background will change to orange to indicate its ready status.
Once the analysis tool is hot, click an element of a page to see the font details, as shown below in the example for the headline.
Adjusting Font Detail
To modify any of the font styles, first right click to open the context menu. Then, from the FontFinder options, select the action that you wish to take.
Experimenting with line-height is one of the better uses of this extension. From the Font Finder context menu, select “Adjust element’s…” | “Line height”, and with the transformed plus-sign cursor, click on an element to target it. After which, a dialog box will appear with the current setting; enter a new value and click the “OK” button. Your modifications will appear immediately, as demonstrated in the screenshot below. Remember, these are non-destructive edits, so refresh the page to clear them.
Another adjustment that you can make is to the element’s font family. Select “Font family” from the context menu, then select the exact element that you wish to change. Or, select “Replace font (entire DOM)” to change all page-wide instances of the font to another of your choice.
After the adjustment:
Disable Font Family
Disabling a page-wide family of fonts is useful for seeing the page as a visitor would if he/she did not have your specified font family installed. Often, new Web designers pick their favorite fonts from their own computer without considering that the font doesn’t exist for all users. You should always use a generic font family, for this reason.
Summary
I like this tool. It saves me a few clicks. I couldn’t make the copy feature work (in FireFox 3.6.16), or couldn’t figure out the mystery of how. (It is supposed to copy the element’s data to clipboard.) Too bad, because I would like the opportunity to paste that data into my stylesheet. Overall, a good effort by developers Ben Dodson, Eric Caron, Jake Smith.
