Keeping that in mind, how does one decide on a good looking
font-family for their design? First and foremost, if you’re primarily a developer, the type was probably set for you in your mock by the designer. Many times, however, the designer is the developer and vice versa. Sometimes there are details such as type that are neglected of a definition and it’s up to the developer to use his or her best judgment. Regardless — choosing the right type, in my opinion, has to do with putting all of your bias aside and simply choosing what fits the design and what works best. Personal preference is a definite factor as with any design decision, but simply using one
font-family over another just because you haven’t seen or used it in a while is no ground for change. The same goes for a
font-family you did use in the past and it worked very well.
You shouldn’t abuse typography in Web design
It goes without saying that we’re limited in type choice on the Web. It surprises me how many sites depend on exact widths (or height) of specific fonts in their design. What I mean by that is setting an absolute width and/or height for an element, and assuming each visitor sees what you see in that the
font-family and size matches completely. Many times it’s obvious the designer didn’t expect that I’d be seeing a line break where one has appeared for me.
A repeated technique to keep in mind is Bulletproof Web Design. Relying on specific type settings can interfere with your design being Bulletproof. Not everyone will be working in the same environment as you; Extensive testing always helps. Cross browser and cross platform testing is a requirement for me; but I’ll never be able to test every case.
Platform independence is important for type
After migrating to Linux as a primary operating system both at home and at work, it became completely apparent to me how dependent I was on the Windows-based Web safe fonts. It was also very obvious that many other developers/designers worked in the same way.
Sure, you can assume that our short list of “Web safe” fonts will be available on every Windows machine that finds your design, but what about the growing amount of Linux users without mscorefonts (or an other equivalent) installed? Personally, I do assume that just about every reader will have a group of fonts, but at the same time, I keep in mind that I can not depend on it.
Using sIFR to get your custom fonts
Again, Web design is 95% typography, and there are various websites that are absolutely gorgeous mostly due to their choice of type. With the recent release of the sIFR 3 Beta, it’s great to see a standards based, accessible way to achieve custom type inclusion for your design. sIFR is, as quoted:
sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents. sIFR is the result of many hundreds of hours of designing, scripting, testing, and debugging by Mike Davidson and Mark Wubben. Mike, Mark and an invaluable stable of beta testers, supporters, and educators like Stephanie Sullivan and Danilo Celic of Community MX completely rebuilt a DOM replacement method originally conceived by Shaun Inman into a high quality cross-browser, cross-platform typography solution for the masses.
After seeing the latest changes for sIFR 3, I’m quite impressed with the way it works. Some people may feel it’s overkill and that images could be used instead. What’s great about sIFR are the benefits it has over using images to achieve the same effect.
Image replacement, as we know, comes with a lengthy set of issues and hurdles to overcome. Keeping things standard, semantic, accessible, and speedy can be quite a challenge and many people have come up with their favorite techniques. sIFR is a shining example of progressive enhancement, and is a great solution for the right circumstances.
Keep typography in mind
Typography can make or break your design. There are plenty of variables to take into consideration; readability, aesthetics, and design context to name a few. Simply because a font-family is referred to as Web safe doesn’t mean you can depend on it exclusively. As always, test as much as possible, but try to keep your design Bulletproof.