Method Arts - A Consortium


CSS and Typography

By Brian Warren // Dec 11, 2006 // Code // 159 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 - typed this brilliance 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 - used their words like weapons 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 - used their words like weapons 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 - added to the collective 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 - made this noise 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 - started this rumor 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.

    - typed this brilliance 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 - added to the collective 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 - couldn’t keep them to themselves on on Feb 22, 2008

  • Great stuff.smile

    Buisness Cards - typed this brilliance 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 - used their words like weapons 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 - shared this intimate secret on Jul 15, 2008

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

    Algonquin Real Estate - made this noise on Jul 17, 2008

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

    Start a computer repair buisness - came up with this gem on Jul 24, 2008

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

    Giftoverload.com - made this noise 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 - used their words like weapons on Aug 2, 2008

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

    Kombi Van Sales - had this incredible stroke of 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 - couldn’t keep them to themselves on 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.

    - couldn’t keep them to themselves on 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 - added to the collective 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 - added to the collective on Aug 9, 2008

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

    Video Games Rental - felt the overwhelming need to share this with everyone on Aug 20, 2008

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

    Modded Autos - had this incredible stroke of brilliance 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 - used their words like weapons on Aug 20, 2008

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

    Sylvania HDTV - shared this intimate secret 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 - shared this intimate secret on Aug 23, 2008

  • Interesting image replacement code. I can see why this would not be accepted by a lot of people, but does look like it could come in handy.

    Adam
    Compare Prices with Order.com

    Adam - had this incredible stroke of brilliance on Sep 9, 2008

  • thank you.

    rafi

    הסעות - started this rumor on Sep 14, 2008

  • Good stuff.. A top class post from your end.

    Compatible Ink Catridges - couldn’t keep them to themselves on on Sep 16, 2008

  • Thanks for this post, my friend will be so exciting to check this. I really appreciate your work over here smile

    Promotional Products - couldn’t keep them to themselves on on Sep 22, 2008

  • This article is truly a good read for me! Informative and very interesting!

    jobs in accounts - made this noise on Sep 27, 2008

  • Awesome! I have read a lot on this topic, but you definitely give it a good vibe. This is a great post. Will be back to read more! Thanks for sharing!
    Cheers,
    Poison Ivy Treatments

    Poison Ivy Treatment - couldn’t keep them to themselves on on Oct 1, 2008

  • Good stuff.. I'll be looking forward to simillar ones in the times to come.!

    Postage Printing - came up with this gem on Oct 1, 2008

  • 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.

    mini game - started this rumor on Oct 2, 2008

  • thank you man

    השכרת מקרנים - felt the overwhelming need to share this with everyone on Oct 3, 2008

  • thank you agian smile)))

    השכרת מקרן - couldn’t keep them to themselves on on Oct 3, 2008

  • This is one of the best I've recently read, looking forward to see your future posts, cheers. Financial Planning

    Personal Finance - shared this intimate secret on Oct 3, 2008

  • Careful there mate..You are treading on delicate property because Google clearly says that hiding text, links etc is not acceptable. Other than that, I enjoyed reading the article, particularly the bit about embedded fonts and css.

    essay - felt the overwhelming need to share this with everyone on Oct 8, 2008

  • WoW! Am I impressed? I will definitely try to use these tips on my blogs..thanks a ton for sharing this

    HealthSolutions - made this noise on Oct 11, 2008

  • my next project is to develop a Wordpress platfor based theme for my client. although im good with basic HTML designs but this tuts will help me a lot big time.

    Thanks for sharing mate.

    John Craig - added to the collective on Oct 12, 2008

  • Thanks for the fine css examples!

    Freelance Sales - typed this brilliance on Oct 13, 2008

  • Great posting, thank you for this...I will bookmark, pass it around and be sure to check back at some stage..grin

    Promotional Companies - used their words like weapons on Oct 15, 2008

  • Those are some amazing CSS forms. Again, thanks a lot for sharing them.

    Essay - typed this brilliance on Oct 19, 2008

  • Great review!! It's a informative article. Thanks to share with us.

    Top Ten Lists - added to the collective on Oct 19, 2008

  • This is really informative. Those CSS Forms are amazing, they might be handy for my upcoming web design tutorials.

    Matt Jason - typed this brilliance on Oct 27, 2008

  • "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"
    Hehe. Yeah, I remember myself in the situation like that. Good old Flash days...

    danny - typed this brilliance on Oct 30, 2008

  • Its needed a designer who have a creative eye to produce. I want to appreciate you that I find out some information from your post.Specially for the image replacement. Thanks.

    Garage Services Norwich - made this noise on Nov 1, 2008

  • If you are looking to get typography printed from your site they way you want it to look, as opposed to designing in css why not try pdf's you can embed the font and the search engines index them.

    Suzanne - felt the overwhelming need to share this with everyone on Nov 1, 2008

  • Amazing design. I certainly gained an input or two from this.

    Essay - started this rumor on Nov 2, 2008

  • Thanks for sharing. I'll download the presentation shortly if you don't mind smile!

    vilneap - felt the overwhelming need to share this with everyone on Nov 2, 2008

  • Nice that you're willing to share the presentation!

    Swimming - used their words like weapons on Nov 2, 2008

  • Thanks to Alex Wolfe for the alternative.
    Greets Wellnessferien

    Wellnessferien - started this rumor on Nov 4, 2008

  • it is a fine tool. i have used it.and it works fine

    thanks

    Investment dir - had this incredible stroke of brilliance on Nov 5, 2008

  • a fine helpful post.and the tool introduced is fine.

    i have already started to work on that tools.

    thank

    Life insurance cover - used their words like weapons on Nov 8, 2008

  • Thanks for the information you provided. I will share it with other and ask more people to come and view your post here. Good Job.

    Documents Management - added to the collective on Nov 9, 2008

  • Thank you for your CSS examples.

    Dog items - couldn’t keep them to themselves on on Nov 9, 2008

  • Really very informative post.keep it on. Thank to you for such an interesting topics.

    Sign Clemente Homepage - shared this intimate secret on Nov 11, 2008

  • hanks Giles! It was good to meet you down there. Your presentation was great though totally over my head. We hope your team will make a great hit..
    thanks..
    Travel Insurance Canada

    Travel Insurance Canada - shared this intimate secret on Nov 14, 2008

  • Well, this is a very valuable post. Thanks for the information you provided. Thanks for give us CSS tips.

    Documents Management - felt the overwhelming need to share this with everyone on Nov 16, 2008

  • Amazing design. I certainly gained an input or two from this.
    Sim only contracts

    - made this noise on Nov 17, 2008

  • First of i am thankful to your great presentation
    I have included the span and then dislpay. dint notice the chagne

    Mobile Phone blog - came up with this gem on Nov 18, 2008

  • Visitors of our website can get a closer look at more than 8000 fabulous high quality watches, 5000 of which are precious Replica Watches imitating in every minute curve of luxurious and expensive watches by Rolex, Chopard, Cartier, IWC, Bvlgari, etc.
    http://sites.google.com/site/rolexchoose/
    Thanks.

    watchess - started this rumor on Nov 22, 2008

  • Nice of you guys to share this piece of information. Thanks and looking forward to see more!

    Cash Gifting Program - typed this brilliance on Nov 25, 2008

  • This blog is great. Readers can get ideas from your blog. Thanks for sharing it with us!

    Foredragsholdere - couldn’t keep them to themselves on on Nov 25, 2008

  • Great post! I think this post Very informative about CSS & TYPOGRAPHY. Please continue it.

    Get Free Ads on Google - used their words like weapons on Nov 26, 2008

  • Great design sir..can i use this CSS in my PHP website??
    thanks..
    regards,
    kkiln

    web hosting - started this rumor on Nov 27, 2008

  • Great presentation mate.. i have downloaded this design..
    thanks a lot..
    regards,
    Reverse Phone Searches

    Reverse Phone Searches - added to the collective on Dec 1, 2008

  • Am I impressed? I will definitely try to use these tips on my blogs..thanks a ton for sharing this.
    Greets Holz

    Holz Export - felt the overwhelming need to share this with everyone on Dec 1, 2008

  • This is simply GREAT! Your articles are more than awesome... Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informatve article with us. Italian Courses

    Italian Schools - added to the collective on Dec 1, 2008

  • You got a really helpful blog! Thanks for that hint! I really enjoyed the quality information you offer to your visitors... Will be back often to check up on new stuff you post here! elib shopping

    elib - came up with this gem on Dec 1, 2008

  • Although I am no expert in any type of printing, my favorite hobby is printing my pictures and cards at home. Fonts fascinate me and I can never make up my mind. Thanks for giving me an insight me into your fascinating printing world!

    Flood Damage - couldn’t keep them to themselves on on Dec 2, 2008

  • Just want to say thanks.. this great tips about CSS .. It would be great if got more post like this. I appreciate it.

    Chesterfield Sofas - typed this brilliance on Dec 6, 2008

  • There are a lot of tips here, this is a good blog. Thanks for sharing this to us..

    Professional website design - felt the overwhelming need to share this with everyone on Dec 8, 2008

  • One of the most informative post on this subject. Thanks for this.

    Quotes by Bob Marley - used their words like weapons on Dec 10, 2008

  • this is really superb design..thanks a lot for sharing..
    regards,
    microwave cooking

    microwave cooking - started this rumor on Dec 10, 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. But it can be a rewarding !

    Migraine Headaches - couldn’t keep them to themselves on on Dec 11, 2008

  • hanks Giles! It was good to meet you down there. Your presentation was great though totally over my head. We hope your team will make a great hit..
    thanks..
    <a href=" http://www.gotcheapwiifit.com">Wii Fit in Stock</a>

    Wii Fit in Stock - started this rumor on Dec 11, 2008

  • Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of presentation.

    sweet love quotes - felt the overwhelming need to share this with everyone on Dec 14, 2008

  • The SIFR link doesn't work for me. Does anybody have an updated link?
    Thanks,
    Peter

    Bergsøe Møbel snedker - couldn’t keep them to themselves on on Dec 16, 2008

  • You may want to go through and delete all these spam comments on your blog and consider using the rel=nofollow tag on your comments to stop spammers from getting and SEO from your blog comments.

    Jillian - used their words like weapons on Dec 17, 2008

  • Thanks for tip. I will give it a try

    Diamond Blade - started this rumor on Dec 21, 2008

  • I have to agree, image replacement can work wonders.

    naruto logo - had this incredible stroke of brilliance on Dec 24, 2008

  • Wow, amazing tips for CSS newbies, im in my first learning Phase, and im sure it will going to help me a lot, Thanks Friend.

    John Tech - couldn’t keep them to themselves on on Dec 26, 2008

  • A nice alternative, tahnks you for the CSS tips.
    Greets Wellness

    Wellness - couldn’t keep them to themselves on on Dec 29, 2008

  • Thanks for your tips.Definitely i will try them.

    Famous Bob Marley Quotes - typed this brilliance on Dec 30, 2008

  • This CSS tips definitely help us. Hope
    you will post again like this.

    Chesterfield Sofas - couldn’t keep them to themselves on on Jan 3, 2009

  • Thanks for your awesome presentation mate. I have just bookmarked your site. Waiting for your new presentation smile
    regards from
    Vandy

    Online Play Sport Blog - added to the collective on Jan 3, 2009

  • This is really valuable article. thanks for sharing such a great article mate. Really design and presentation are excellent.

    zara clothing - couldn’t keep them to themselves on on Jan 5, 2009

  • Hey, it is interesting, i didn't know that Harry Potter book was printed in Garamond. )

    designer clothing - came up with this gem on Jan 5, 2009

  • First of all, great post. I've been wanting to try SIFr for some time now and you're presentation has just sealed the deal for me. grin

    Free Games - added to the collective on Jan 6, 2009

  • 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.

    Cayenne Pepper Diet

    Lemon Cayenne Pepper Diet - felt the overwhelming need to share this with everyone on Jan 6, 2009

  • 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. Lastminute

    Lastminute - typed this brilliance on Jan 7, 2009

  • 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! Greets Wellness

    Wellness - started this rumor on Jan 7, 2009

  • great review. Fantastic article.

    Funny Sayings Collection - shared this intimate secret on Jan 9, 2009

  • Very intersting magazine mate. Really i dont know that Harry Potter book was printed in Garamond ???
    thanks for great stuff..
    regards,
    Helboy

    Organic Baby - used their words like weapons on Jan 16, 2009

  • Am I impressed? I will definitely try to use these tips on my blogs..thanks a ton for sharing this.
    Greets Holz
    ขายบ้านเชียงใหม่

    ขายบ้านเชียงใหม่ - shared this intimate secret on Jan 17, 2009

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