Oftentimes during the design phase of a project, we’ll get the design concepts looking just right in Photoshop and Illustrator. Then you get to the “production” phase—that is, actually coding HTML and CSS to match the concepts. At this phase, some ask why is it that production HTML cannot look pixel identical to a design comp that we deliver (which is usually exported and presented in JPEG format)? Here’s the explanation.
There are limitations in moving from comping to production:
- The comp is a JPEG rendition of a vector format (Illustrator file). This means two things: a. Vector format illustrations are mathematical calculations and therefore can give very nice smooth curves. b. JPEG renditions use a lossy compression algorithm that produces some fuzziness around the edges. This is in fact due to loss of color information or the averaging algorithm that JPEG uses. You cannot get this actual effect without turning text into graphic art, which is not an option in most cases.
- Browsers use their own version of rendering of text which is different than either PhotoShop or Illustrator. This decision for how to render was probably made for speed reasons. This means that letterforms will not be identical.
- For lettering and lines, browsers make jumps that are a minimum of 1 pixel and they do not do the fancy color averaging of tools like Illustrator. The simplest way to think about it is that it is not possible to make a line that 30% thicker than a 1 pixel line (or, more to the point, to make a letterform where the thickness is 30% thicker) when there is only 1 pixel width to work with. Only step changes are possible: 1 pixel to 2 pixels or 3 pixels wide.
- There are type settings that are user-dependent. IE7, for example, automatically applies a technology called ClearType by default which does some font-smoothing. Firefox does not. However, there is a system desktop setting that applies ClearType (or not) across the system. This is user-controlled.
- Different browsers on different platforms will all display differently.
- And finally, colors vary across monitors because of how they’re calibrated (this one is not specific to the move from comping to production).
In sum, it is not possible to get something to look exactly like a comp, especially with respect to letterforms and very thin lines. We can get a close approximation, but not exact. This is definitely the case where the last 20% could be 80% of the effort, and the last 5% will not be possible.
Tags: design comps, html, production, rendering
