Method Arts - A Consortium


CSS and Typography

By Brian Warren // Dec 11, 2006 // Code // 30 Comments // Permalink Brian Warren's Mug Shot

image

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

  • Hey, just wanted to say, this was a kickass presentation.

    Giles Bowkett - made this noise on Dec 27, 2006

  • Thanks Giles! It was good to meet you down there. Your presentation was great though totally over my head. I felt like a total wimp.

    Brian Warren - started this rumor on Jan 1, 2007

  • I believe that Opera has a problem with 5 digit negative text-indent.

    It is better to stick with -9999px.

    Good article by the way and I haven't checked up on sIFR for a while now.

    Steven Hambleton - typed this brilliance on Jan 1, 2007

  • Why not including a span in the h1, and then apply display: none at the span object?

    I always thought the -values is a bit messy.

    smile

    / Martin

    Marteinn - made this noise on Mar 8, 2007

  • Hopefully you guys can teach these guys some tricks:

    http://www.subdreamer.com/plugins/p13_download_manager/images/176.jpg
    http://www.subdreamer.com/forum/showthread.php?t=9381

    Someone recognized your site's awesomeness and is selling it confused

    Johan Wilkes - added to the collective on Mar 17, 2007

  • Martin, i believe the reason to use negative values instead of display:none is because of screen readers. Most screen readers read the css. So if it's display:none then the blind have no access to that tag. With the negative value i believe it can still read it.

    Justin Sepulveda - shared this intimate secret on Apr 16, 2007

  • An alternative method to the CSS Heading you created is to use this markup

    <H1><span></span>Some Text</H1>
    h1 {
    position: relative;
    font-size: 2em;
    height: 88px;
    width: 155px;
    overflow:hidden;
    }
    h1 span {
    background-image: logo.gif;
    height: 88px;
    width: 155px;
    position: absolute;
    left: 0px;
    top: 0px;
    }


    Give the heading a fixed size (ems of course) and then absolutely place the span over it and give the span a background image.

    This way you achieve 3 things:
    1. Screen Readers can Read it
    2. You get your Image logo
    3. People with images disabled can still read your logo.

    - added to the collective on Apr 21, 2007

  • yes very nice tut. but some of those things wont work if you use IE6 in specific cases when you have under float and absolute positions. i hope very soon Microsoft pushes everyone into IE7 cause there everything is fixed

    Victor - used their words like weapons on Jul 1, 2007

  • You should be cautious of hiding text. The Google Webmaster Guidelines [http://www.google.com/support/webmasters/bin/answer.py?answer=66353] specifically state:

    "Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors."

    Joshua McGinnis - had this incredible stroke of brilliance on Feb 22, 2008

  • Great stuff.smile

    Buisness Cards - couldn’t keep them to themselves on on Jul 12, 2008

  • hey man thank you for this great post.smile

    מקרנים להשכררה - started this rumor on Jul 12, 2008

  • Wasnt there a strict guideline against hidden links?.

    Lyrics and Guitar Chords of Besame Mucho - started this rumor on Jul 12, 2008

  • The tip is interesting, thank you, but I also think that displaying different content to search engines and visitors can be risky concerning Google.

    Search Engine Optimization - Web Directory - felt the overwhelming need to share this with everyone on Jul 15, 2008

  • Great post there..I'll be downloading your presentation shortly..!

    Algonquin Real Estate - felt the overwhelming need to share this with everyone on Jul 17, 2008

  • Thanks..I'll have use for this..!

    Start a computer repair buisness - added to the collective on Jul 24, 2008

  • Yes, this is really useful and I use it too.

    Giftoverload.com - shared this intimate secret on Jul 27, 2008

  • To comment #12 (Lyrics and Guitar...):

    What you said is only half true. If you hide a large amount of keywords / links (say 100 keywords or so) in a single page then consider yourself infracted. Google knows about these practices and will ban anyone who do key stuffing.

    However, if you're hiding just a few words (headings, titles, etc) to say, replace them for images, then you should be OK.

    Web Development blog - used their words like weapons on Jul 30, 2008

  • h1 {
    margin:0;
    text-indent:-32697px;
    background: url(graphics/head.jpg) no-repeat 0 0 ;
    width:508px;
    height:173px;
    }
    Thanx! I find this css method.

    Twistys - added to the collective on Aug 2, 2008

  • Thanks for the tip. this will help my on site optimization immensely.!

    Kombi Van Sales - typed this brilliance on Aug 2, 2008

  • Great post! This is really useful and I use it too.

    crystal report - came up with this gem on Aug 4, 2008

  • @Alex Wolfe: I prefer to use alt and or name tag of the image since when image is disabled, the alt tag value will replace the image e.g. :
    <h1>' alt=</a>

    rienarry - added to the collective on Aug 4, 2008

  • Hi.. do you know any way of floating two DIVs in to right and left INSIDE a main big div ?

    <div id="main">
    <!-- this div must be 50% in width and should hang on left -->
    <div id="left">
    <div>

    <!-- this div must be 50% in width and should hang on Right -->
    <div id="right">
    </div>

    </div>



    I have tried this but right div gos down the line where left Div is.

    hope you guys defineatly have aProffesional solutions (without using CLEARFIX or any other stuff)

    Thank you!
    Dilantha.

    - made this noise on Aug 5, 2008

  • CSS is really great. Aside from making your site beautiful, you can save a considerable amount of download time for your pages if you know how to do it well. Thanks for the nice post!

    CSS Tips and Techniques - used their words like weapons on Aug 5, 2008

  • great info

    Movie Trailer | Harry Potter and the Half-Blood Prince

    - felt the overwhelming need to share this with everyone on Aug 5, 2008

  • Rimsky went the dazzlingly buy cytotec dead hand held.

    Pwhndvve - made this noise on Aug 9, 2008

  • Thanks a ton for sharing this. Much appreciated.!

    Video Games Rental - added to the collective on Aug 20, 2008

  • Great stuff.. Much appreciated. Wish you'd come up with stuff like this more often.!

    Modded Autos - came up with this gem on Aug 20, 2008

  • as a word press designer, CSS is just a must, and you have to be very good with CSS coding. Im learning CSS, that will surely going to help me a lot.
    Thank you.

    bollywood - came up with this gem on Aug 20, 2008

  • Great stuff.. As an upcoming Wordpress coder, I found your site highly useful!

    Sylvania HDTV - made this noise on Aug 21, 2008

  • Hello.
    We create impeccable quality replica Rolex Daytona and Submariner and sell them at a price relative to what they cost us to make.
    If you buy one of our imitation Rolex watches you’ll enjoy the quality of an original for just a couple hundred bucks.
    The idea is to go beyond the standard Rolex knockoff and create luxury items at affordable prices.
    http://sites.google.com/site/rolexchoose/
    Thanks.

    Rolexwatch - came up with this gem on Aug 23, 2008

Rules of Engagement

  • 1. Please leave a comment, not a novel.
  • 2. Don't be a jerk.
  • 3. We might disagree with you. That's okay. It happens sometimes. No need to make this comment area your personal battleground for your point of view. We'll do our best to let you have your say, but 50 comments arguing your opinion is a bit much, eh? We would consider it an abuse of Rule Number 2.
  • 4. Be relevant. You can contact us if you want to say something not pertaining to this entry.

Add a Comment

Name
URL
Email
Comment
Remember my personal information
Notify me of follow-up comments?
Site We Like
Design Observer