Nov 27 2010

2011 color forecast

This is about 6 months late. Each year in about May or June I start to research color forecasts for the following year. I want to get an idea of the color trends for the year and use this as a springboard for designing for both web and print. For my source, I use projections for home and fashions which usually reference Pantone textile colors. I can’t afford yet another Pantone color fan so I have started to sample colors from the websites of various fashion design houses (Le Cuir, Lenzing, Prada) as well as the combined color forecasts from Pantone. I am not trying to get an exact match, just an RGB approximation.

To find out more than you wanted to know about fashion trends, including color, visit the Fashion Trendsetter website. Links to the various sources for color trends are all under one roof.

From these sources, I construct a simple color table, as shown below, and begin to build a swatch library in Illustrator.

By sampling colors from the website to get the RGB formula and converting to the closest CMYK equivalent yields color specifications that are usually sufficient for my needs. I start with RGB for the widest gamut and convert to the more restrictive CMYK. For a more exact match, these sources often provide the Pantone color code. You could use a conversion algorithm for the RGB and CMYK equivalents, such as Per Bang has provided on his very useful website.

Various color pairings and combinations can also found by exploring the Fashion Trendsetter website. More often however, I look at an expanded palette starting with the compliments of each color. Using the basic color table as a start, I’ll expand it by adding a layer that defines the compliments to visualize some potentially useful color pairings.

And similarly, add another layer for the inverted colors to yield more interesting ideas.

What is the difference between a color compliment and the inverse of the color? Adobe defines the color invert as the opposite value for each component in RGB colors. For instance, where R=100, the inverse would be where R = 155 (or, 255 – 100 = 155) and etc. for the values of G and B.

The compliment changes each component of a color to a new value based on the sum of the highest and lowest RGB values in the selected color, subtracted from the value of each component to create new RGB values. For example, for a color with an RGB value of 102 for red, 153 for green, and 51 for blue, Illustrator adds the high (153) and low (51) values, to end up with a new value (204). Each of the RGB values in the existing color is subtracted from the new value to create new complementary RGB values: 204 – 102 (the current red value) = 102 for the new red value, 204 – 153 (the current green value) = 51 for the new green value, and 204 – 51 (the current blue value) = 153 for the new blue value.

No, I didn’t sit there and do the math for each color. Illustrator does it from the Options menu of the Color panel (click in the upper right corner of the Color panel to open the Color panel Options). You can explore other combinations using a color from your color table as the base color by opening the Color Editor. A previous post is devoted to a basic explanation of how the Color Editor works.

The reward for wading through this post is free download of the 2011 color chart for Illustrator, including the swatch library and complimentary/inverted color layers.

Nov 18 2010

inspired by salvador dali, made possible by photoshop

One of my Photoshop students brought these to my attention. The original inspiration for this series seems to be an installation by Salvador Dali:

Be sure to look closely. (Click on an image for an enlarged view.)

The attribution for these is ambiguous. The watermark is apparently a URL which is the “Iranian Progressive Group” hosted by a server in Seoul, Korea.

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.