How do I check how different fonts and styles look without recoding?

Author: Jack Wallen

One of the issues that can plague Web designers (not to be confused with Web developers) is that of font choice. Choosing the proper font and font style for your Web site can make or break a site's overall design. And I am sure you've seen it — a great site with fantastic elements, images, color schemes, style, and content that is rendered either ugly or unreadable simply because of a poor font choice.

The problem for designers, which quickly trickles down to developers, is that font choice can be dictated by browser choice, browser release choice, and CSS usage. These layers add up to create a fairly complex problem that is often solved by making a choice, seeing if it works, and then tweaking the CSS file over and over until the choice is perfect (or as close to perfect as you can get). This tweaking can take some time, unless you employ an amazingly helpful tool like FontFriend.

FontFriend is a Web-browser bookmarklet that will make your design work so much easier that you will wonder what you ever did without it. With this tool you can simply open up your Web site, click on FontFriend, change the font and font styles as FontFriend makes the changes in real time, and then, once you have found the right font and font styles, apply those changes to your CSS files as needed.

Now, before I get into how to use this tool (it's quite simple actually), I will warn you that the larger and more complex the site, the slower FontFriend will be. If the site is too large and too complex FontFriend could take your browser down. Fear not, though, even if FontFriend takes down your browser, it will not make any changes that are permanent or damaging. So, in the event of a crash, you will only need to fire your browser back up.

This blog post is also available in PDF format in a free TechRepublic download.

Installing FontFriend

If you have ever installed a bookmarklet you will not have any problems installing FontFriend. You don't actually "install" FontFriend. What you do is click on the bookmarklet link (from the FontFriend site) and drag it to your Bookmark Toolbar. Now this bookmarklet can be used in Firefox 3/3.5b and Safari 3 and 4. FontFriend does not support Internet Explorer, and, as the site says, "any compatibility with IE is mostly accidental and, frankly, surprising."

NOTE: With this "installation" don't mistake your regular tool bar with the bookmarks tool bar. You cannot install this bookmarklet anywhere but on a bookmark toolbar.

Once you have FrontFriend on your bookmark tool bar it will show up on your tool bar simply as FontFriend. You can change this name if you like by opening up the Organize Bookmarks, clicking on the FontFriend bookmarklet entry (it will be located in the Bookmarks Toolbar folder) and making the changes (Figure A).

Make sure, however, that you do not make any changes to the location. If you edit the location of FontFriend you will most likely break it. The only fields you should concern yourself with are Name, Keyword, and Description.

Figure A

The location is the "code" that actually makes FontFriend work.

Using FontFriend

When you navigate to your site, you need to click on the FontFriend bookmark in your Bookmark tool bar. When you do this FontFriend will open an overlay on your page at the bottom left, as you can see in Figure B.

Figure B

You can minimize this overlay by clicking the "F" in the upper-left corner.

Once this overlay is open, you can click on different font elements and the changes will update on the page in real time. As mentioned earlier, the more complex the page, the longer it will take for the change to take effect.

Let's take a look at a changed page. First I will show you the FontFriend page with the default fonts (Figure C).

Figure C

Here is the default font for the FontFriend page.

Now let's take a look at the same page with a different font and font style. Figure D shows FontFriend laying out the same site with a bad font.

Figure D

This font is Cambria in small caps.

This time around we'll see the same site re-rendered with a font that makes the page much nicer (Figure E).

Figure E

This time the page is rendered with the Tahoma font.

Remember, you can do more than just change the font on the page. You can also set the text to all Small Caps, Initial Caps, Bold, Normal, Upper Case, Lower Case as well you can edit body text, paragraph text, header text and even roll your own. If you decide to roll your own, make sure you take a look at the jQuery JavaScript Library link within the FontFriend overlay so you can see the types of tags you can use.

Resetting to default

Resetting the page back to the default style is simple. At the bottom right of the overlay you will find a very faint "S." If you click that "S," the site will return to its default styles.

Moving the overlay

There are times that you will want to see the text under the overlay. You can do this by moving the overlay around with the four arrows. When you click one of the arrows, the overlay will move that corner of the Web page being viewed. If the overlay is in the bottom right and you click the up arrow, the overlay will move to the upper-right corner. Click the left arrow, and the overlay will move to the upper-left corner, and so on.

Final thoughts

FontFriend is one of those tools that will make a designer's job easier. You will find that FontFriend takes some of the tedium and guesswork out of finalizing your CSS for the sites you are designing/developing.