Nov 14 2010

web fonts

a short history of rendering fonts on the web

In 1995, when I first started website design and in the days before CSS, the options for typeography on the web were pretty limited. The body type was dictated by the default font of the browser, specified by the web viewer. We could design a site with a readable sans-serif typeface only to discover that the viewer’s browser default font was set to 18px serif, which destroyed text flow around images, text set within buttons, the flow of the page and the look of the page. Display faces had to be rendered as .jpg or .gif images.

When CSS became available most of us used it primarily to style text. It was a great leap forward. However, the availability of fonts is determined by those that are present in the viewer’s OS. This remains the method that many people rely on, until @font-face came on the scene, so I’ll go into a little more detail in a later post. Rendering display faces evolved from images to Flash to Javascript.

sIFR (or Scalable Inman Flash Replacement)

sIFR became an alternative to image rendering with the chief advantage being that the font was not required to be present in the viewer’s OS. However, to view properly, the Flash player and Javascript must be enabled, otherwise the text is displayed in whatever is specified in CSS. Additionally, if the page contains several instances of text generated with sIFR, there can be a noticeable delay in the rendering of the text in the specified font. Security issues have caused some people to disable Javascript, but more conerning is the growing number of viewers affected by the Apple/Adobe war which makes Flash unavailable on the iPhone and iPad. In addition, sIFR can be tricky to install and use. Two leaps forward, one back.


Cufon entered to solve part of the problem. The fonts still need not be present on the viewer’s OS, font rendering engine is web-based and relatively easy to use, the text is editable and Flash is not required, however Javascript must be enabled and the browser must support HTML5 (which leaves IE 6, 7 and 8 out). Additionally, some typefaces are not licensed properly so that uploading your typeface for rendering may not (strictly) be legal. However, if Cufon fails, CSS comes to the rescue and assuming you have styled the type class or tag with an acceptable alternative, all is not lost. We’ll call this a step forward, but not a leap.

@font-face generator

At this writing, @font-face, a CSS3 rule, is the next leap forward. To implement, font files must be compressed and served in format that are somewhat browser-specific. It does not rely on Javascript, the text remains editable and it is the most cross-platform compatible solution so far. The @font-face generator produces CSS that points to versions of the font to be served in compressed formats, according to browser type.

You may upload either TTF or OTF fonts that you own (with the proper licensing, of course) to the generator, or there are several sources for (non-free) versions of many common typefaces with pristine licenses, or there is at least one source for (free) typefaces. Warning: the free versions tend to be a little funky–some with haphazard letter spacing (print-quality kerning is not available for the web) or sloppy x-height consistency.

There are several options that help to overcome browser inconsistencies with the @font-face rule. That isn’t to say that there aren’t problems but most have work-arounds or, as ever, there is the CSS-fallback. A detailed description of @font-face, the options and work-arounds can be found on John Dagget’s blog.

There are still other solutions for web font rendering, such as Typekit (not free), but @font-face remains my preference. Whichever engine/method you use to render your fonts on the web, the old standards of good design still apply. No “ransom note” styling or using display typefaces for body text, please.

Oct 29 2010

will ie6 ever die?

I have been keeping track of the visits to my clients’ websites that use Internet Explorer 6 (IE6), with the idea that some day the share of IE6 to total browsers will fall to less than 5%. At that point, I can justify not developing websites that support IE6. It’s frustrating to have to develop two versions of every website (for clients that expect to pay for only one): one for browsers that take advantage of current standards and one specifically for IE6, which is non-standard. Even 2nd generation browsers (Firefox 3, Safari 3) don’t entirely gag on HTML5 and CSS3. IE6, on the other hand, is so far behind in interpretation of W3C standards that it is necessary to develop a mirror site to accommodate the IE6-specific code.

I assumed that IE6 would finally drop out of the mix sometime in 2009 but it is holding pretty steady between 5 and 10% for a couple of years. What gives? Its use is not specific to developing countries. It seems like people would upgrade just to move away from a browser that not only is non-standard but a notorious opening for all sorts of malware.

So why don’t we just develop sites for IE7 and later (not that IE7 is exactly “standard”, either)? It seems that corporate use of IE6 as a platform for browser-specific applications is keeping the overall market share of IE6 at about 16%. This means that corporations and large organizations who have invested heavily in development of IE6-specific applications will be slow to adopt more current browsers, requiring them to rewrite these applications. It seems that IE6 will not go away anytime soon. This is a sobering piece of news.

Apr 10 2010

illustrator techniques: part 1 defining patterns

(This is a repeat of a post that somehow has been deleted! It is a technique that is requested often so it’s worth re-posting.)

This is a rather long post, but I have gotten this question repeatedly so this is an attempt to point my students to one place for the answer. (Who knows? It could also be the germ of a book.) This is also a 2-part tutorial. The second part takes up the question of how to quickly and easily test different colorways for a pattern.

I am always in search of vintage motifs to use in designing repeat patterns, backgrounds, borders, or textures for both print and web projects. Often I can find something in my library of Dover publications that I have been collecting since the 1970s. (Note: Though it is tempting to search for online sources for design, it is necessary to carefully negotiate the copyright minefield, even for “vintage” material. Before you offer something for commercial purposes, be mindful of use rights.)

Since I may want a design to do double-duty as both backgrounds for websites (at 72 ppi) and at larger scale in print (at 300 ppi), I prefer to render patterns in vector format to maintain a clean appearance at any scale. Printing a scanned image from a printed book creates all sorts of moire madness. Whether the source was from a book or from the web, a vector pattern has the following advantages:

  • It is scalable without loss of quality
  • The repeats are seamless (if set up correctly)
  • Colors are clearer and more uniform
  • Colors can easily be edited

For that reason, I have developed some basic skills with vector tools using Illustrator. There are other vector drawing programs (CorelDRAW, Xara Xtreme) but I prefer Illustrator for many reasons, but chiefly because of the robust color management tools. More about that in Part 2.

Manual tracing is a good way to hone Pen tool skills. It also causes you to think about pattern repeats and timesaving ways to manipulate objects (Rotate, Reflect). The more recent versions of Illustrator include some powerful and easy to use drawing tools (Blob Brush and Eraser, to name a couple).

What about Live Trace? Illustrator provides a “Live Trace&rdquot; utility which I almost never use for this purpose. I find it faster and more precise to hand trace simple design motifs using the drawing tools rather than manipulate the Live Trace options to get the best rendering and then adjust the paths to remove wayward anchor points or to smooth curves–too much fussing! Also, very low resolution images are just not suitable for Live Trace.

To prove this point, the source for our example is a Japanese textile pattern from an online (low resolution) source. The image was scanned from an antique book. This seems like a good choice for background texture at very small scale as well as an interesting large scale pattern. You can download the image to follow along with this tutorial.

The steps in this tutorial are followed by an image that illustrates them. This tutorial is aimed toward the beginner, using Illustrator for the first time, however the first steps involve a little Photoshop.

The original is dark and low contrast making accurate tracing a little difficult. It’s worthwhile to take the extra time to correct this.

Open the image in Photoshop and bring up the Levels dialogue box: Image > Adjustments > Levels…

Click on the eyedropper on the right to set the white point. Since there is a portion of the unprinted page showing that should be white, click on this area. If there is no indication of white in your image (page edge or a white portion of the motif) this step can be skipped.

To increase the contrast, move the leftmost triangular slider under the histogram to the right to darken the darkest regions. Then, move the middle slider to the left to lighten the midtones. Adjust these as required until you can clearly see the intricacies if the design.

Save the image.

In Illustrator:

Open a new, blank document (preferably for print, though a web document will do).

Place the image file: File > Place…

Open the Layers panel. The image will be on a layer with the name of Layer 1.

Hint: if a panel noted below is not visible, select it from the Window menu:

Add a new layer (A) which should be above Layer 1 (if not, click on Layer 1 in the Layers panel and drag it beneath Layer 2). Lock Layer 1 by clicking in the square next to the layer name (B).

Still in the Layers panel. click on the image layer (Layer 1) to make it active and then double-click on this layer (to the right of the layer name) to bring up the Layer Options dialogue box.

Check the box to Dim Images to 50% (C).

Select the Eyedropper Tool (A) to sample the colors from your image.

As you click on the image, the sampled color will appear in the Fill/Stroke color boxes (B) and the Color panel (C)

(Hint: double-click the Eyedropper Tool to bring up the Eyedropper Options dialogue box. At the bottom you can change the Raster Sample Size from Point Sample to 3 x 3 Average or 5 x 5 Average. This may result in better color matching.)

For each sample, click the Color panel options (D) to reveal a flyout menu and select Create New Swatch (E) to add this color to the Swatches panel.

After each of the colors have been sampled and added to the Swatches panel (A), click on Layer 1 to make it active.

Next, make sure that the Rulers are visible at the top and left side of the window. If they are not, select View > Show Rulers.

To be able to precisely align the guides for the repeat, zoom in (or magnify) the view (View > Zoom In).

Drag a horizontal Guide line by clicking on the top ruler and dragging down to a point where the pattern repeat will begin (Guide B – C).

Drag a second horizontal Guide to find the next instance of the same position on the motif (Guide D – E).

Drag a vertical Guide from the left ruler to align with the beginning point of the pattern repeat (Guide B – E).

Drag another vertical Guide and find the next instance of the same position on the motif (Guide C – D).

Points A, B, C and D will be in the same position on the motif and will define the extents of the pattern to be repeated.

Drag Guides to the midpoint of the pattern repeat area.

Lock the guides in place (View > Guides > Lock Guides).

Zoom in (View > Zoom In) further to be able to clearly see the design detail.

Select the pen tool and set the Fill color to [None] and the Line color to a visible color such as white. If necessry, change te Stroke Width in the Stroke panel to 0.25 pt or 0.5 pt. Tracing with a very heavy stroke is difficult and will result in a distorted path.

Trace around the flower. In this case, since the flower is symmetrical, it is only necessary to draw one-quarter of the flower. The rest can be generated by copying and reorienting this quarter.

Switch the Line and Fill colors (Shift-X).

Using the Selection Tool, select the object and click once on the Reflect Tool.

Find the center-marker (A) and, as you hold down the Option key, drag the center-marker to the center of the flower motif (B). This will also be the intersection of two guides.

As you release the mouse button the Reflect dialogue box will appear.

Choose the Horizontal Axis and click on the Copy button.

These two quarters can now be joined.

Zoom in (View > Zoom In) further, if needed to see individual anchor points.

Using the Direct Selection Tool, drag across the first two anchor points that are to be joined (A) and choose Object > Path > Average…

Choose Both axes from the Average dialogue box.

Choose Object > Path > Join to connect the two paths.

Repeat for the two opposite anchor points (B).

Change back to the Selection Tool. Select this new object and click once on the Reflect Tool.

Position the center point on the intersection of the two Guides again (Option-drag).

The Reflect dialogue box appears when you release the mouse button. Choose Vertical Axis and click on Copy.

Choose the Ellipse Tool (found by clicking and holding down the Rectangle Tool to reveal a flyout menu.) To complete the flower, draw a circle in the center by holding down the Shift button as you drag.

With the Selection Tool, reposition the circle, if necessary.

Average the anchor points and Join the two halves of the flower, as described above.

Deselect everything (Select > Deselect) and zoom out, if necessary to see more of the design.

Exchange the Fill and Line colors again (Shift-X) and draw a rectangle at the intersection of the lattice with the Rectangle Tool (A). Using the Stroke panel, set the Stroke weight to 2 pt (B) and the style to rounded (C).

Using the Reflect Tool as you did for the flower, copy the rectangle in the Vertical Axis first, by positioning the center maker in the center of the circle in the middle of the flower.

Then, with the Selection Tool, select one of the rectangles and hold down the Option key as you drag a copy into position at the intersection of the two Guides on the left side of the repeat.

Using the Reflect Tool, reposition the center marker and copy the rectangle in the Horizontal Axis.

Using the Line Segment Tool (A), draw a line between the left and top rectangles.

With the line still selected, open the Stroke panel and change the Stroke Weight to 3 pt (B) and the style to Butt Cap/MiterJoint (C).

Using the Reflect Tool, copy the other 3 line segments.

The lattice is bordered by a slightly darker shade. The best way to achieve this effect is to make a double stroke using the Appearance panel (A).

Choose the Selection Tool and select all 4 line segments.

In the Appearance panel, select the Stroke appearance and click on the Duplicate Selected Item icon (B). This will set a new appearance (C) below the original stroke.

With the new Stroke appearance selected, click on the color icon (D) and change the color to black.

The new stroke is the same weight as the original and it is underneath so it will not show until you change the stroke weight (E). Use 5 pt in this example.

Select the 4 rectangles and copy them (Edit > Copy).

Then paste them in back of the originals (Edit > Paste In Back). IMPORTANT: Do not deselect or click away from the copied rectangles. They will not be visible until the color and stroke weightare changed.

Usine the Appearance panel, change the stroke color to black and the stroke weight to 4 pt.

With these 4 black rectangles still selected, send them behind all of the other objects (Object > Arrange > Send To Back).

The flower and 3 sides (+ 2 rectangles) will be copied to the upper right. If the Guides are not visible, make them visible (View > Guides > Show Guides).

Select these elements by shift-clicking on each one or dragging a marquee around them and start dragging them to the new position. As you drag, hold down the Option key to turn the selection into a copy.

Be as precise as you can in placing the objects to achieve a smooth pattern repeat.

Select everything (Select > All) and, while holding down the Shift key, click on the 2 line segments and drag a marquee selection around a portion of each of the 3 rectangle groups. This will deselect these objects.

Option-drag to copy these elements into position to complete the motif.

Shift-click on each of the flower motifs (and their center circles) to select them all.

Change the Fill color of the flowers using the sampled colors in the Swatches panel (A).

Make Layer 1 invisible (B) to more clearly see the changes.

Select the line segments and using the Appearance panel, change the stroke colors.

Select one of the white rectangles and select similar elements using Select > Same > Stroke Color. Change the color.

Selecting the remaining black rectangles is tricky since they are exactly underneath the rectangles that you have just colored. Drag a selection marquee around one of the rectangles. Shift-click to deselect the topmost rectangle (you won’t see anything different, except that the Stroke Color box at the bottom of the Tool Bar should now be black).

When you have successfully selected one of the black rectangles, select all similar elements using Select > Same > Stroke Color. Change the color.

Choose the Rectangle Tool and set the Fill Color to the darkest of the previously selected colors.

Draw a rectangle that covers all of the other elements.

Send this rectangle to the back (Object > Arrange > Send To Back).

Deselect all elements (Select > Deselect).

Set both the Fill Color and Stroke Color to [None].

Choose the Rectangle Tool and draw a blank rectangular box with corners at points B, C, D, and E.

Immediately, while the box is still selected, send it to the back (Object > Arrange > Send To Back).

Select everything (Select > All).

Make a pattern swatch (Edit > Define Pattern).

In the Define Pattern dialogue box give it a name.

It will now appear in the Swatches Panel.

Deselect all elements (Select > Deselect).

Zoom out and move away from the pattern design.

Using the Rectangular Tool, draw a large rectangle and set the Fill Color to your new pattern.

The pattern should fill the entire rectangle, or any object that has the Fill Color set to this pattern.

Save the pattern for future use by selecting Save Swatch Library As AI… from the flyout menu in the Swatches panel (found by clicking in the upper right corner of the panel).

In the next window, navigate to the decorative pattern swatches folder in the Illustrator Application folder (this navigation trail may be slightly different, depending on the version of Illustrator. For CS4:

Applications > Adobe Illustrator CS4 > Presets > en_US > Swatches > Pattern > Decorative

Next tutorial, use Illustrator CS4 Color Editor to simply change the colors of patterns.