Real Effort Toward Good Typography Online

Designers everywhere are starting to rejoice as the online community steadily marches towards an internet where typography can be displayed with the beauty and functionality demonstrated in printed material. Now the real fun begins!

What’s the worst part about design­ing online? The fuzzy res­o­lu­tion? The unpre­dictable browser window size? The insan­ity of mul­ti­ple browsers dis­play­ing lay­outs mul­ti­ple ways? Those are all pretty bad, but the thing that gives me gray hair is the awful way type is ren­dered. There’s no kern­ing, no lig­a­tures, and no real font choices. This prim­i­tive form of text was great for the basic infor­ma­tion orig­i­nal browsers were built for. It is even pass­able for the web as we view it on a casual basis today. But, as the online world grows, web design becomes more and more life­like and little short­com­ings that seemed small when we were just happy to be online, become glar­ing arti­facts sur­rounded by bright color images from high res­o­lu­tion dis­plays. Lucky, there are a lot of smart folks out there work­ing day and night to give us all better type online.

The Horizon

Sooner than you think, web pages will be able to dis­play incred­i­bly smooth fonts that design­ers choose from an enor­mous cat­a­log. When nec­es­sary, the fonts will con­tain lig­a­tures, mul­ti­ple char­ac­ter sets, and beau­ti­ful details you never thought pixels could deliver. With CSS3 down the road break­ing para­graphs into columns, hyphen­at­ing words and doing proper full jus­ti­fi­ca­tion will be as common as it cur­rently is in brochure design. If your not famil­iar with the tech­ni­cal end of type design, I can sum­ma­rize this para­graph by saying, web pages will look so good, you will barely real­ize you are online.

The People Who Make It Happen

There was a time when I believed that most devel­op­ers in the web world were most inter­ested in the linear deliv­ery of infor­ma­tion. I thought they rolled their eyes at flash and fancy designs because they simply didn’t see the rel­e­vance to their single minded cause.

Turns out I was pretty short sighted. I’ve met tons of devel­op­ers in the past few years who truly care about good design and appre­ci­ate how much better it can make their sites. They are work­ing very hard to increase the form and func­tion of the web. They also seem to under­stand that if the web is all about con­tent, then typog­ra­phy that dis­plays the con­tent is at the center of web design. That’s why sev­eral groups are cur­rently devel­op­ing stan­dards and build­ing sup­port to give us the online type we deserve.

Tech­niques for improv­ing the fonts we have to work with on the web have been around for some time. There are always the tech­niques of image replace­ment and sIFR to improve text ren­der­ing on the web but these tech­niques have relied on trick­ery to get the job done and while inno­v­a­tive they are not per­ma­nent solu­tions. One of the com­pa­nies lead­ing the way for better typog­ra­phy on the web is Microsoft. They devel­oped the stan­dard for embed­ding fonts in web­sites some time ago and it unfor­tu­nately hasn’t taken off. Safari has upped the game and added sup­port for embed­ded fonts too, with a slight dif­fer­ence from Microsoft (I’ll talk about that later). Mozilla has been push­ing type for­ward in a dif­fer­ent way with the latest 3.0 ver­sion having sup­port for lig­a­tures and kern­ing in cer­tain types of fonts.

The Hang-ups

As much as the new stuff being devel­oped excites us, the web world has its unique set of prob­lems when it comes to evo­lu­tion. In print work, advances in print­ing presses and layout pro­grams could instantly be seen in work that was dis­trib­uted to the masses. Web design relies on each indi­vid­ual user to have a com­puter, mon­i­tor, browser, and most impor­tantly the fonts that are all suit­able to your work. This means even though new browsers make great things pos­si­ble, it is irre­spon­si­ble to build sites that can’t been seen by some people.

One of the major issues with embed­ding fonts is licens­ing issues. What’s to stop people from includ­ing a font file in the site that just about anyone could down­load and then use? Microsoft with their Embed­ded Open­Type stan­dard has devel­oped a system that incor­po­rates DRM for the embed­ded font. Fonts on your system hold an extra piece of infor­ma­tion in them that tells the com­puter if they can be used in a pro­grams inter­face for text ren­der­ing. Microsoft’s tool reads this bit and makes a new font file out of a True­Type font and includes the license infor­ma­tion for account­abil­ity in the file. Safari’s imple­men­ta­tion is much dif­fer­ent in that it links to any True­Type font you want to embed. While this is great and opens up the amount of fonts avail­able by a wide margin, to avoid licens­ing issues you would have to stick to free and open source font faces.

Another prob­lem with embed­ded fonts is a lack of sup­port in browser imple­men­ta­tion. Safari and Inter­net Explorer are the only two browsers to imple­ment embed­ded type. Fire­fox and Opera are work­ing to imple­ment embed­ded type in the next ver­sion of their browsers. With those browsers at least a year away and browser upgrade cycles being quite slow we prob­a­bly wont see wide­spread use of embed­ded fonts for at least another 3 years.

You can follow the progress and drama behind embed­ded fonts on the web in a couple of places. Fontem​bed​ding.com is a web­site started by Microsoft that is trying to build sup­port for the Embed­d­a­ble Open­Type format. Web​fonts.info is a site that col­lects arti­cles and keeps track of embed­ded font sup­port in all the major browsers. The Open​Type.info blog is a also a great resource for the latest devel­op­ments regard­ing typog­ra­phy in browsers.

The Revolution Is Starting Anyway

Most of the exper­i­ments going on to bring good type online are still a ways off. But good design has never been born out of tech­nol­ogy. Design is always about solv­ing a prob­lem within bound­aries. Lots of folks are off to the races build­ing sites that do a great job of work­ing with the lim­ited tool box we already have in cre­ative ways. Of course, this is a huge inspi­ra­tion to guys like me. So I’d like to point out a few cur­rent heroes:

THE SEED CON­FER­ENCE SITE
The idea that we treat every web site like a brochure, a book, or a sheet of paper is a tough one to get over. The fact is, in spite of all out typo­graphic con­straints, there is great free­dom in design­ing for a canvas that can do lots of things noth­ing else can do. The good people at Coudal and Part­ners prove that with this beau­ti­ful site announc­ing the 2008 Seed Con­fer­ence. Their solu­tion is so obvi­ous it hits you over the head with bril­liance. They simply made a poster with all the con­fer­ence infor­ma­tion. Why have links and unnec­es­sary nav­i­ga­tion if you can get it all in one spot. And why worry about a “design look” when you can simply design the whole page with the infor­ma­tion. This site wins the award for making you forget you are on a web­site. www.​seed​con​fer​ence.com

QUIP­SOL­OGY
Not con­tent to let the web  devel­op­ers have all the fun, the east coast design com­mu­nity is lead­ing the way with inter­ac­tive design that is pur­pose­ful and beau­ti­ful. Under Con­sid­er­a­tion has been out in front with great blogs and a very fresh approach online for years. No where is their fear­less spirit more appar­ent than the inno­v­a­tive Quip­sol­ogy blog. Why write a ton when you know you just want to say “check out this cool thing right here” And that’s all this blog does. a few lines and a link. To match that inno­v­a­tive approach they built a blog like no other. www.​quip​sol​ogy.com

JON TAN­GER­INE
What hap­pens when a web designer with a love for type is giving unlim­ited time and com­plete cre­ative con­trol to work on a site? You get to see the edge of type refine­ment with cur­rent tech­nol­ogy. At first glace, you’ll see that the site is clean and well orga­nized. Look closer and you’ll start notic­ing little details like his logo which is actu­ally made of web text!the site is billed as a work in progress, so keep check­ing back to see what Jon will do next. www.​jon​tan​ger​ine.com

THE SHOW
Alright, here’s one more just for fun. This is actu­ally not a new design at all. I remem­ber seeing this a few years back when I was first get­ting into design­ing online. I was floored by the cre­ativ­ity, sim­plic­ity and audac­ity of this Coudal cre­ation. While most design firms were still trying to figure out what their loader ani­ma­tion should look like, these guys were chang­ing all the rules. If web design were rock and roll, this site would be Smells Like Teen Spirit. Here, Coudal proves big type looks cheesy, really big type looks awe­some. www.​theshowlive.com