Method Arts - A Consortium

CSS and Typography

By Brian Warren // Dec 11, 2006 // Code // 159 Comments // Permalink

Barcamp Albuquerque was just a short month ago. I had a great time and enjoyed meeting everyone there. One fascinating thing about Barcamp is that the requirement to present brings out some fun stuff in people. The topics people choose to present come from one of two sources: Either a) It’s what they’re absolutely most passionate about, and thus at least an ad-hoc expert. Or b) It’s whatever issue they recently struggled with, figured out, and need to share with other people to save them the time. I suppose my topic was a bit of both.

I presented on CSS and Typography. My background is in print, and one of my passions as a print designer is typography. I love seeing well-set type printed on a page, I love that at the end of every Harry Potter book they mention it was printed in Garamond. Moving to web was a struggle for me in the type arena. Discovering CSS was wonderful, but immediately the limitations of the web presented themselves and frustrated me.

Once I discovered Flash I was giddy. Just the idea of being able to embed fonts in a site got me rushing off to tell my friends about it. Naturally, as many web designers did, I discovered some of the limitations of publishing websites with flash and I ran back to CSS and tried my best to make websites with the limited web-safe fonts, and felt a little bit of my typographic soul die.

Not all is lost though; in my presentation at Barcamp I talked about two techniques you can use to incorporate some custom typography, at least in headlines, on your website.

Image Replacement

The first is image replacement. I’ve heard a few people refer to this idea as “dead” or at least “a bad idea”. However, I submit that, if used judiciously, image replacement can do feats no other technique can manage.

Let’s start with how how to use it. Here’s a perfectly obvious headline:

<h1>Method Arts Fall Badminton Spectacular</h1>

Instead of using text, we want to use something fabulously designed, so in the CSS, you give the text a negative indent, and then put in a background image behind the h1 element.

h1 {
margin:0;
text-indent:-32697px;
background: url(graphics/head.jpg) no-repeat 0 0 ;
width:508px;
height:173px;
}

Poof! The image is there, but the HTML remains having text in an h1 tag. (Why the odd number for text-indent? That’s Opera’s maximum value that it will understand for text-indent. Thanks to Steven in the comments for alerting me to the problem.)

I’m not dead yet

Why is this better than just using an image tag? I agree it does seem like using image replacement is a lot of work. There are a few reasons that this is worth it.  For one, what Google sees when it comes to the site is some text in an H1 tag, rather than an alt tag. Google may or may not interpret that alt tag to be an important headline. Next, when you print that page, instead of printing a graphic that wastes ink and is blurry anyway because it’s at screen resolution, you print text. This requires a bit of extra work in that you need to use print style sheets, but it’s work you should be doing anyway.

Image replacement isn’t a silver bullet. The main limitation is that it only works for static headlines and areas. To jump that hurdle designers need to employ something more sophisticated.

sIFR

sIFR is a pretty clever little tool that uses flash and javascript to dynamically replace any text in the page with the font of your choice. I know, it sounds too good to be true, but it works. sIFR also accomplishes the daring feat of being both completely valid and accessible. Going through code examples here will be too tricky, so I’m going to link to my code from the presentation. You can also read up on sifr here.

sIFR, too, has its drawbacks. It’s trickier to implement, it’s more work and it uses javascript. Still, the payoff is that you get to use your custom fonts in dynamic headlines. That’s hard to beat.

Soup Up Your Toolbox

All in all these are great tools to have in your toolbox when making websites. We use both of them right here on the Method Arts website. One of the most fun uses of them is on the party invite that we did. Sure, it looks just like a bunch of images, but it’s actually replaced text. It seemed like a silly geeky thing to do, but it actually worked. Google indexed the page, and people were finding the invite based on search terms in the replaced text.

Neither tool is a silver bullet, but these days it doesn’t seem like one exists. Nonetheless these are essential tools to have in your toolbox for getting great typography on the web.

Downloads

Podcast of my presentation (with interview) (thanks to Reid Givens from ALR Marketing for podcasting the entire event).
PDF Presentation
Code Examples

Site We Like

Recommended Reading

Small is the New Big.

By Mark

"Since reading Seth's latest book, I now find myself only capable of thinking in three sentence riffs. You will love this one!"

Buy this Book