Admiration for Typography on the Web

It’s been said that Web design is 95% typography, and I can definitely agree with that. Many times a site design could be improved extensively with a quick change of a font-family.

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.

There are certain environments where sIFR will be your best choice for custom type implementation, and there are others where it just makes more sense to use an image. An educated decision should be made that takes into consideration the pros and cons of each. It’s not often that I personally resort to sIFR simply because of load times and other circumstances to take into consideration (such as JavaScript and Flash dependency), but it’s a nice tool to have on hand.

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.