“…so the text and colors can be tested against a more realistic representation of their possible use in the actual web site…”

If you’ve ever used a Word Processor, then chances are you have at least once labored with the potentially time-consuming, often tedious indecision which accompanies the selection of the Perfect Font for your text masterpiece in waiting. If you can picture yourself paging through your fonts, highlighting different text areas, resizing the text and testing both italic and bold versions of your fonts, then stick around for the rest of this article because you may find my solution will help you to settle on the right font more quickly, and with greater confidence that you’ve made the right choice.

I’ve developed a technique to help in selecting the Perfect Font for either a Web Site, or a resume, or any situation in which I might flip through my catalog of installed fonts, searching for that one specially styled typeface which will make my resume stand out to a potential employer, or will enhance the aesthetic quality in the typeface motif i’m trying to establish on my web site.

Prerequisite:

• Image Editing Software: (e.g. Photoshop, Fireworks, the G.I.M.P., Paintshop Pro, etc.; XnView or IrfanView) which supports the the following necessary features:
  UPDATE! the author recommends the Scalable Vector Graphics (SVG) drawing tool, Inkscape.
  • Multiple Layers: the software will display one layer, perhaps as a background, and allow other layers to be “stacked” above / below each other, creating a depth to the image (e.g. a figure of a person might appear to be in front of a drawing of a tree).
  • Alpha Layer Support: the software shows as transparent the areas around text glyphs, or within the image itself (a.k.a. negative space) such that when layers are stacked, one layer is visible beneath the other through the negative space of the upper layer.
  • Text Support: the software inserts text, typed by the user, into a new or existing layer of the image. Text support should be unlimited in character allowances and is favorable if multiple paragraphs, and text line height and text indentation may also be adjusted.
• Basic HTML knowledge: the reader should preview the appearance of multiple test images in a web browser for quickly scrolling, or viewing side-by-side, his or her resulting creative text work.

Getting Started:
I created an image project with a canvas of 600 px wide by 200 px in height (about the size of most “masthead” images i’ve made for other web sites). Although the key benefit of this little rule-of-thumb exercise relies upon a black and white background (100px of the 200px height should be white– or off-white, and the other half must be black, or a very dark color), I always begin with a canvas free of color or texture, that is– a transparent background (i.e. transparent canvas).

The Background:
Using the Rectangle tool, i cover half of the height of the canvas (100 pixels) with a black rectangle (i.e. Hex color code: #000000).

(not actual size)

Again using the rectangle tool, I fill the remaining 100 pixels of the document height with a white rectangle. (NOTE: Though I used the Fireworks® Smart Objects® Rectangle tool which melds vector drawing into the bitmap graphics, you do not have to use such a tool. The white and black rectangles can be created by simply using a rectangluar selection over 100% of the canvas in Layer A and filling it with white (Hex color: #FFFFFF) using a paint-bucket fill†, then doing the same in Layer B select exactly 50% of the total height of the canvas (beginning at either the very top or bottom, and stopping mid-way) with a black fill (Hex color: #000000). Using this paint-bucket fill technique as described, you can experiment with overlapping the layers, perhaps adding a drop-shadow effect to the fill in the layer closer to the Front (on the Z axis). The “closer” layer should be the 50% size layer so it will overlap the other– thereby creating the illusion that both fills are exactly the same size. Try it.)

Flipping the Contrast:
Ultimately, whether you are using multiple, movable shapes on a single layer like Macromedia (Adobe) Fireworks® allows, or if you’ve used a paint-bucket fill on two separate layers (one at 50% height, the background layer at 100% height)†, THE POINT HERE is to maintain the ability to swap the black area for the white areas; change the placement of the contrasting colors which now make up the background.

If you plan to apply any digital filtering effects to these background panels while using the layered technique, you will find that a total of four layers will provide a greater flexibility of options for the applied effects. In other words, you’ll need layer set of 100% white grouped with 50% black, and another with 100% black grouped with a 50% white overlap. If it sounds confusing now, just open your graphics editor and try to work out my description using an effect that lightens something dark, and then one which darkens something light (e.g. a drop-shadow for black on white, and some sort of glow for the white-on-black). It will make sense to you once you experiment a bit.

Add Text:
The final step in setting up your new homemade font-finder tool comes in the text layer. Create a layer “in front of” (or “over”) the background layer(s). Insert the text you wish to preview and the duplicated item for Drop shadow, and extrude, and plain or whatever style i wish to try for several different fonts. Save this file as a project file in your editor as this resulting Project File itself is the very KEY to the entire process explained here. Keep that project file in a safe place and reopen it any time you feel stuck in trying to find just the right font for any design project containing styled text.

Summary:
If you’ve followed my tutorial, you should now be able to preview your fonts in virtually any color text, with virtually any effect applied to the font itself– a versatility gained through the extreme contrasting background colors. I hope you find the resulting graphic project to be a useful tool at some point throughout your career as an architect.
one of the key discoveries about this technique was the value in creating the two-tone, black and white background so the text and colors can be tested against a more realistic representation of their possible use in the actual web site.

Why the Prerequisite of general HTML knowledge listed above? If you care to take this project one step further, you may find value in authoring a very simple html page to house your images. What images? The images that you’ll export from your editor project, once you find something you like. This is a technique which gets its value from quantity. Pump out as many different versions of text on black, text on white, etc., a

s you can tolerate– then use them as you see fit in an HTML preview document.
TIP: If you choose to use the HTML preview step, I recommend having a look around the millions of script examples (probably javascript is most easy) for the purpose of finding something to create a slideshow for your html preview page. Why do all of the work in flipping through pages when you can let a simple javascript procedure do it all for you!? 😉

EDIT: i’ve just discovered a really excellent, not to mention FREE image editing software: Paint.NET. Trust me on this one– the software is amazing. It is not a clone of Photoshop®, the interface is quite intuitive– much more than i can say for the rather cumbersome G.I.M.P., unfortunately. I immediately felt at home in Paint.NET, and it loads FAST! I’ve used it for nearly all of my image editing needs since i’ve installed it on my system. Paint.NET is by far the best new, FREE raster graphics^‡ image editor in the rather vast selection of up and comers and no-name gambles I’ve tried over the past several weeks. Please do yourself the favor of giving it a trial run.

^‡Raster graphics are those which you find in the .jpg files you download from your digital camera– sometimes known as pixel graphics or bitmaps. Pixel graphics have a primary difference from images produced by scalable vector drawing software like Inkscape, Xara, or Illustrator in the sense that the quality of the resulting work is directly proportional to the resolution, or ppi of the original document.

¹Considering a relatively similar functionality across the panel– at least in terms of the basic features discussed in this article– my preferred application, Macromedia Fireworks can be substituted with Adobe Photoshop, the GNU Image Manipulation Program (a.k.a. the G.I.M.P.), or any of a vast number of other digital image software apps which support mutiple layers, alpha channel (e.g. transparent areas; negative space), and the insertion of text so that text may be inserted into; written on top of the image