Typography, Branding and SIFR

September 28. 2004 05:16 3 comments Category:

I get this question a lot: Can you use ______ (a nonstandard font) for my website headers? The question is usually no, because unless a font is installed on everyone's machine, then that font won't be displayed, and a backup default font will be used (usually Arial/Verdana/Times).

Some people don't have a problem with using a standard font, until they see how ugly and jagged it can look at a large size without font-smoothing. Here's an example...

CSS code:

h1 {
        
 font-family:Georgia,Serif;
        
 font-size: 24px;
        
 font-weight: normal;
        
}

Screenshot of font in browser

Notice the difference between the two headers? I would guess that 80% of end users see the first font with jagged edges, because a default Windows setup doesn't have font-smoothing turned on. The average user doesn't know where to turn it on, or even what it does? It's hidden away, under Display Properties, Apperance, Effects. Good luck finding it! I'll give you a hint at what the dialogue box looks like...

So why do some websites have nice looking headers? They insert images into their site instead of headers. There are a number of reasons this is bad (Google is blind, remember?), but from my side that means I've got to create a lot of images. It gets repetitive, but is necessary to retain a site's brand and look. Not anymore...

Why SIFR matters

Jeff Croft says it best:

Put very simply, the technique uses DOM scripting to dynamicly replace standard (x)html text with small Flash movies embedded with your favorite font. The result is your text, beautifully rendered in your typeface of choice via the ubiqutious Flash format. The real brilliance, though, is that the source code of the page remains as plain and true as the light of day â€” meaning that your fancy header is actually just a plain olâ€™ h1 tag. This, of course, means itâ€™s full accessible to screen readers, users who donâ€™t have Flash installed (do they still exist?), and of course, Google.
Instead of creating three hundred small images, I could have created one Flash file. Simple. Brilliant. Easy. Accessible. Fast. What more could we ask for?

That about sums it up! I'll be applying this technique to my sites as I go along, but from my sites that use them (UrbanDude.com and LittleFluffyCloud.com, I haven't heard any complaints, only compliments.

Post RSS Tags:

10/6/2007 7:18:47 AM

I've noticed the flicker (in IE), which is because IE waits until a page is fully downloaded and then renders it.  That's when the the script goes through and does its magic.  Same thing with Dean Edwards' IE7.  There's a flicker at the end when IE applies the update to the page.

I don't know how well it interacts with other DOM scripting going on.  It seems to coexist with the Flickr script, but I'm no Javascript expert.

On thing I did have a problem with was padding/margin of the content DIV surrounding my headers.  When the script replaced the content with the Flash, it borked my float layout somehow (again, only in IE).   I think it had to do with IE's faulty rendering of the box model.  So i did the ghetto-fabulous-box-model.  Set the width/float in a DIV, and set another DIV inside it with padding applied to it.  That always works (although it's just useless non-semantic markup).

Bryan Peters

thanks for clarifying that bryan. i've been wondering how to do that.
now excuse me while i go ping the server.

;)

Chevy

i tried using that flash sIRF method on AF(), but went back to the 'old' way if just having a H1 tag styled with some css font information because of this odd resizing flicker i was getting in IE.... be curious to see what ya think and do with the flash headers, esp for something like blog Titles...

/foO

Anonymous

UrbanDude