Web typography - how far do you go to get the fonts right?
Posted by Dan Eastwell
Looking at Matthias Willerich's article on the web developer toolbar, reminded me of my use for CTRL-SHIFT-F in Chris Pederick's firefox extension.
I tend to do a quick CTRL-SHIFT-F in order to check the font size of a particular piece of text, to check it's right. I realize that firefox isn't the be all and end all, but it's a good touchpoint if you've got to work out inherited relative font sizes, before doing a more thorough check.
This got me thinking, though. How far do you go to get fonts right? I'm often given a Fireworks or Photoshop file by a designer and used to just read off the settings for each piece of text (e.g. 10px arial 130% line-height), and type them straight up into the CSS
This, obviously, leads to problems immediately, due to the inheritence issues, especially deep down in code, especially if you're inheriting from someone else's code. (This article by Richard Rutter explains how to scale fonts using ems) . Further issues abound when you're well aware that the vast majority of your audience aren't going to have the target font (e.g. when the type is set in helvetica).
My question is: do you go for pragmatism and set to what looks best, or do you go with the style guide/design to the letter, no matter how crap it looks?
In my opinion, you should aim to get the fonts looking the best in the most browsers, as close to the original design as is possible, given how much designs rely on typography.
I tend to take screen prints of my code running in a browser and then overlay the original design in photoshop, to see if the leading, tracking and font size match, and adjust the line-height, letter-spacing and font-size accordingly.
'Controversially', I'd even sanction the use of browser filters to get the fonts correct: if the design is set in helvetica, then get the arial tweaked to look as close as is possible, then apply a safari hack to serve 'mac users' helvetica (given that safari users are exclusively mac, even if mac users aren't exclusively safari users).
I imagine there are other, and probably better, methods: what have been your experiences?
