Calling Web Designers – use letter-spacing with care when tightening up your visuals!

Over the last few weeks I’ve been working on a number of freelance web development projects for clients in Bath and Bristol and I’ve started to notice a rather strange new trend. Typically I receive the visuals for the web design from my clients as a Photoshop .psd file and it’s my job to as faithfully as possible make that design look identical once it’s converted from PSD to HTML. Which is great, I love working with challenging, unusual or just plain difficult projects. But there are some things you just can’t do in HTML reliably that you can easily do in Photoshop. And sub-pixel letter-spacing (tracking to print people) is one of them.

In the past month I’ve worked on 4 freelance web design projects, and every one of them has featured text in very tight “Call to Action” panels. They had tracking of -25 or -40 on text that is set at around 14pt. So why’s this a problem? Simply put, some web browsers can’t letter-space anything less than 1px. If you set custom letter-spacing to make text fit into very tight spaces, when the developer has to work on your lovely visuals, 1 of 2 things will happen.

1. They’ll have to slice it out as an image and do various tricks to make the text visible to the search engines (although possibily less “visible” for SEO purposes than is optimum).
2. The text may flow onto a new line in some browsers.

So how can you help out your web developer get the job done more quickly, accurately and hence more cost effectively for you? Follow this simple rule. Make sure that if you intend text to be standard HTML and not an image, specify a tracking value that equates to 1px or another whole number.

• How do you calculate what a tracking value equates to? An easy equation.
  (Tracking / 1000) * Font Size = Letter spacing in pixels
• How do you calculate what letter spacing will give 1 pixel tracking at a give font-size?
  (Font-size / 1000) = Tracking

This might seem a little esoteric to many web designers reading this, but if you try to follow this rule it will speed up the time it takes a developer to build web sites for you. That means you’ll get web sites developed more cheaply, or you’ll get more polish for a given budget.

Looking for a web developer? We’re based in Bradford on Avon and work with web designers in and around  Bath, Bristol, Swindon, Cheltenham, Trowbridge, Devizes and Marlborough to create beautiful, search engine friendly web sites, on time and on budget. Please give us a call on 01380 830224 – we’d love to help build your website.