Looking at the landing page of the Highrise web-app in Firefox I noticed that it has some funky font rendering. The quote from Highrise users—Mari in the picture below—is supposed to be in Baskerville. But the font looks off, it’s too thick and the punctuation isn’t hung.
Click to see a larger version
This is actually an easy enough fix:
Click to see a larger version
All you have to do is add font-weight: normal and text-indent: -0.4em to the css properties of the H1 element that contains the quote.
The reason you need to add font-weight: normal is that many browsers—FF included—automatically add a font-weight: bold to H1 elements. And if one doesn’t address that through a css reset it can often make fonts with only one weight look weird. This is because the browser looks for a bold version of the font. If it doesn’t find one it will automatically draw its own by adding an outline. This usually results in awkward rendering.
I think text-indent: -0.4em is self-explanatory, it hangs the punctuation (ie. the opening quote).
All in all, Highrise is a great product though… which is par for the course from the guys at 37Signals.
This post is the first in a series called “Mitsakes” where I’ll be exploring the various mistakes that I’ve made and how you can avoid them.
Some context
Recently I designed a poster for a client that was used in the subway system here in Toronto. I used Adobe Illustrator for the majority of the job and fired up Photoshop once or twice to edit the background image. The guidelines were pretty strict, but easy enough to follow and I did the usual quality control before sending the poster off:
- Proof-read the copy;
- Embedded the images;
- Outlined the fonts;
- Removed any unnecessary layers/objects; and
- Even outlined the dotted rule lines that were part of the design—just in case.
The final PDF looked good and the client approved it.
Uh oh…
This week I saw the product of my labours while riding the subway downtown. Unfortunately, the printed poster did not look like final PDF that was up on my screen. The mistake was slight, but still noticeable: a lightly tinted box enclosing the title. A box that I knew shouldn’t be there! So what did I miss?
There are a couple of possible answers, but I think the correct one is that I didn’t rasterize the effects that I had on the title. The title had a very slight drop-shadow applied to it, but because I was working in Illustrator this means that it was a raster effect applied to a vector object. Unfortunately, that combination can sometimes lead to unexpected results when printing, even if the final PDF looks fine on screen.
So how can you avoid this?
When working in Illustrator make sure to rasterize any vector objects that have raster effects applied to them. To do this:
- Select the object
- In the menu bar, go to Object > Rasterize…
- A dialog box will appear with various options, select the applicable ones and click “OK”
That’s it. I would recommend doing this for all of your final deliverables.
What do you think? Am I right in the diagnosis of the problem? Could it have been something else? Let me know in the comments below.
