Guest Post By: Juul Coolen

The web, and consequently its visual appearance, is dynamic by nature. For one, browsers interpret pages and show them accordingly. In a standards-compliant world every browser would adhere to the standards as set out by the W3C so pages look the same in any browser, but we all know the actual state of affairs. Granted, things have significantly changed over the last couple of years. ‘Bad’ browsers are phasing out (albeit slowly), handing over control to the designers by means of CSS. Which doesn’t mean total control, though. Especially when (enviously) looking at the area of print, there is one facet in particular we would love to be able to borrow: typography in all its glory. Or the way Jeffrey Zeldman puts it:

"The less sophisticated lament on our behalf that we are stuck with ugly fonts."

Image Replacement

Web typography is different from printing typography in that a CSS font rule is merely a request to the browser and therefore open to interpretation. Which poses a problem when the specified font is not available on the client’s computer. In such case the browser software is more or less free to pick a substitute font. Even so, font rendering varies across browsers and platforms, and user-defined style sheets can overrule any font specifications. Web standards have yet to be developed for hyphenation, multi-column text layouts, embedding of custom fonts… and the list goes on. To bridge this gap between print and web, and the time it takes for the W3C and eventually browser vendors to support these standards, people have come up with their own ways of getting in typographic control.

Image replacement is probably the most straightforward way of realising (some of) this control. In a nutshell, image replacement is about using CSS to hide HTML text and displaying an image instead, maintaining SEO. Therefore useful for branding purposes, giving the ability to have for example headers with distinguishing fonts and, possibly, effects. Several image replacement techniques have emerged over the course of the years, each one trying to overcome the downsides of others. However, none of these techniques have proven to be without their own share of flaws.

Fahrner Image Replacement (FIR)

fir

The original image replacement technique by Todd Fahrner. Below the CSS implementation:

h3 { 
  background: url(header-replacement.gif) no-repeat; 
  width: 200px; 
  height: 40px; 
}
  
h3 span { 
  display: none; 
}                    
                    
<h3>
  <span>Replaced header</span>
</h3>

As easy as image replacement gets. The CSS hides the text wrapped inside the span tag and subsequently replaced by the background image of the h3 tag. Problems with this method however are the inaccessibility for screenreaders, the inaccessibility with images turned off (and CSS on), and the loss of typical text behaviour (i.e. selecting/copying/resizing).

The screenreader problem got resolved by Mike Rundle who used a large, negative text-indentation in substitution of hiding the text. Making the text invisible for human readers because of the position outside of the viewport, but visible for any automated source readers. Still, the problem when images were turned off remained. The latter was finally adressed in the so-called Gilder/Levin method, by layering an image on top of the text instead of behind it. That way there is no need for CSS to hide text (getting around the screenreader problem), plus when images are turned off the text underneath it simply becomes visible (remaining accessibility).

h3 { 
  position: relative; 
  width: 200px; 
  height: 40px; 
}
  
h3 span { 
  background: url(header-replacement.gif) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}                    
                    
<h3>
  <span></span>Replaced header
</h3>

gilder levin

Although the Gilder/Levin method works like a charm and hence looks like a viable image replacement option, some other issues remain (besides the non-semantic span tag). The most important ones not being able to select, copy and resize the text and secondly the inability to easily alter the text, which is now enclosed in an image.

(Scalable) Inman Flash Replacement (sIFR)

sifr

While the above methods replace text with images, IFR and its successor sIFR do so by using Flash. IFR is a product of both Shaun Inman and Mike Davidson, the latter continued development (together with Mark Wubben) on sIFR. sIFR is essentially a hybrid image replacement technique since it uses Flash, JavaScript, as well as CSS to perform the replacement. The JavaScript grabs assigned elements in the HTML document and swaps these out with a Flash file, which contains a pre-defined, embedded font. CSS can be used to further style the text.

The power of the technique lies in the ability of Flash to include fonts in its files. The text is also selectable and degrades gracefully when the replacement for whatever reason fails. sIFR is quite easy to implement and I would like to suggest this tutorial at Nettuts for a quick and to-the-point introduction. Downsides of the sIFR technique are increased load times, possible processor strain and its reliance on the Flash Player.

Facelift Image Replacement (FLIR)

flir

Quite similar to sIFR, but with a twist, is the PHP-based FLIR. Image replacement is performed by server-side scripts in conjuction with JavaScript and CSS. The general advantage of FLIR over sIFR is that it is not platform or software (Flash) dependent. From that point of view FLIR offers a different approach by using regular images generated server-side. However, as with simple FIR, the property of text selection is lost.

The Future of Web Fonts: CSS3

We have been using CSS2 for quite some time now, actually it was published by the W3C as early as May 1998. To frustration of most, we are even today experiencing its anomalies in browser implementation. CSS level 3 seems to be around the corner as the W3C is actively working on its roadmap, but full software support will probably take some iterations. That doesn’t mean though we can’t have a look at what lies ahead.

Most noteworthy new feature is what the W3C dubbed the Web Fonts module. And in particular its @font-face rule. This rule lets you specify a custom font like so:

@font-face { font-family: "Rockwell"; src: url(rockwell.otf) format("opentype"); }

h2 { font-family: "Rockwell", serif; }

Two different contentions have arisen though: which font file format to support (TrueType versus OpenType) and a rights management subject. A more elaborate discussion regarding this can be read at Ars Technica. Once again different interests are involved, such as the proprietary formats and implementations of the main browser vendors. Thankfully though, the parties seem to be more and more converging towards standards. Something that is needed to hand over even more control to the designer in the future.

Conclusions & Best Practices

The dynamic nature of the web makes it unpredictable. People use a plethora of operating systems, browsers, screen sizes, etc. This is why it is unlike print, especially with regard to typography, where type setters have a lot more control over appearance.

The above image replacement techniques have emerged because of this seemingly ‘holdup’. While all of these techniques have their own merits, ideally we want the CSS3 implementation. It would free us from using all kinds of hacks, tricks, work-arounds and prevent overall overhead. And we would be in less of a risk of harming accessibility and SEO—assuming there is well implemented CSS3 browser support.

At this time though, sIFR seems to be the most popular and robust alternative. All of the currently available techniques have to fall back on degradation when images, JavaScript or Flash is turned off. So while we designers get some control, hopefully CSS3 will add to it.

A good practice when using image replacement is only applying it to non-body text. Multi-line support (although available with sIFR) is rigid and results in extraneous code and/or load. And inaccessibility becomes a much bigger threat here, since body text generally contains the most important bits of the content. Also, one could wonder if all of it is worth the hassle, considering body text is more about readability, not so much decoration.

Other potential CSS standards such as those for hyphenation and multi-column text layouts will likely one day become part of the specification. However, regarding its use, when you think of multi-column text for example, that’s a typical print phenomenon. A newspaper or magazine is scrolled horizontally, while web pages are vertically scrolled. Reading a tall column of text in a browser would inevitably result in several up- and downward scroll movements. Therefore the question remains to what extent we should want to duplicate print behaviour. The web is different from print for a reason, and that is what makes it such an unique and useful medium.

This article is concluded with some examples of great font use on the web. While many of them have made their appearance in all kinds of showcase galleries for more than one reason, the focus this time is on typography. When you look closely you will spot several of the image replacement techniques discussed.

overview

Best of Typographic Sites

The Big Noob

Big and bold.

big noob

A List Apart

Well executed combination of serif and sans-serif fonts and elegant letter-spacing.

a list apart

Hot Meteor

Great choice of fonts.

hot meteor

Jon Tangerine

Passionate blog about typography, using an experimental logotype.

jon tangerine

Jason Santa Maria

Experimental magazine-style design.

jason santa maria

Monocle

monocle

Gapers Block

Visually interesting newspaper style laid out across a nice grid.

gapers block

Seed Conference

100% Times (New Roman), unfortunately aesthetics take a hit on XP with ClearType off.

seed conference

J.R. Velasco

Bold choices of fonts and positioning, nevertheless an amazing looking compostion.

j.r. velasco

Shaun Inman

One of the guys behind sIFR.

shaun inman

Forty Seven Media

forty seven media

I Love Typography

A leading blog about everything typographic, has a well executed design itself.

i love typography

Are you a Virgin?

are you a virgin

Bearskinrug

Kevin Cornell is not only a great illustrator, but also a talented designer.

bearskinrug

Rob Goodlatte

rob goodlatte

Bart-Jan Verhoef

Grungy design with nice touches of handwritten fonts.

bart jan verhoef

HUGE

HUGE font.

huge

Erratic Wisdom

erratic wisdom

A Working Library

Elegant minimalism.

a working library

The Old State

Amazing classy typography.

the old state

Author’s Bio

Juul Coolen is a young, aspiring web designer slash developer. He is into clean and minimalistic design and thinks usability is important. You can find him as well at Shift (px).

151 Comments

Levi Levita
Dec 15, 2008 at 7:54 pm

Good! =D

Greg
Dec 15, 2008 at 7:57 pm

Really love this post! Keep ’em coming…
– Greg

WP Cult
Dec 15, 2008 at 7:59 pm

I have implemented sFIR on one of my sites, works really nice. I would link to it, but it is still in testing, and should go live in a few weeks. :)

The Frosty
Dec 15, 2008 at 8:00 pm

Cool Cool, Thanks for this one, I was un-aware of other typography tricks besides sFIR.. :D

i.am-ad.am
Dec 15, 2008 at 8:54 pm

Good article! I can’t wait till we can stop using text replacement.

Although I love sIFR, it still has plenty of issues… which I doubt will ever be entirely solved. Just another reason to countdown till css3!

P.S. I’ve been wondering what you’ve been up to lately, WDW

Max
Dec 15, 2008 at 9:41 pm

ive always wanted to implement sFIR on a website

cssProdigy
Dec 15, 2008 at 10:06 pm

Great article, but you forgot about typeface.js. A JavaScript only image replacement technique.
http://typeface.neocracy.org/

couzinhub
Dec 15, 2008 at 10:16 pm

You can also replace an title with an image without any span, by just using text-indent on the text, and by also turning the title into a block.
Optionnaly you can hide the overflow to avoid the weird outline when it’s a link and you click on it


h3 {
display:block;
width: 200px;
height: 40px;
background: url(header-replacement.gif) no-repeat;
text-indent:-3000px;
overflow:hidden;
}

couzinhub
Dec 15, 2008 at 10:19 pm

Oups.. just noticed you actually talked about this one :)

Jonas
Dec 16, 2008 at 1:11 am

great summery of this topic. well done! =:)

Lieven
Dec 16, 2008 at 2:41 am

What is the PHP-thing? (Flir)
Anyone used it?
( I don’t get it by reading the explanation)

Shaka
Dec 16, 2008 at 3:22 am

Really good!

Jarryd
Dec 16, 2008 at 3:33 am

I’ve used all of the above minus the CSS3 option really because most of my clients have never even heard of Firefox or don’t use a Mac (Safari).

sIFR is good for Headers, but I had trouble using it for anything else.

FLIR I use when I need small blockquotes or spans to be different fonts.

Both are good, but sIFR is probably better due to it being selectable. Even though it is software dependant, there are compilers out there that can build the swf for you.

Si
Dec 16, 2008 at 4:19 am

text-indent method is still the best. The flash method is good for dynamic content.
Even with the @font-face method you dont own the rights to place the fonts online : (

Dave
Dec 16, 2008 at 5:22 am

http://openfontlibrary.fontly.org is a beta site for hosting free software fonts for use with @font-face :-)

David Hellmann
Dec 16, 2008 at 5:28 am

nice overview about the image replacement technics!

Juul Coolen
Dec 16, 2008 at 6:36 am

@Lieven:

Maybe I was indeed a bit too quick on that one. Basically what FLIR does is dynamically generating an image server-side using a font that also resides on the server and finally sending the result to the client. So you could say it’s a dynamic FIR.

Hope that helped.

rossella sferlazzo
Dec 16, 2008 at 6:53 am

Interesting!

http://www.sferlazzorossella.wordpress.com

printers brisbane
Dec 16, 2008 at 8:20 am

Great summary of this topic indeed!! thanks muchly!!

Ian Purton
Dec 16, 2008 at 8:44 am

I have a little tool for taking a truetype font and converting it into a Sifr swf file.

Here http://ianpurton.com/sifr

Ben Carlson
Dec 16, 2008 at 9:01 am

@Lieven I believe PHP generates an image with the font you specify and uses image replacement to stick it there. Just automatic image replacement.

Patareco
Dec 16, 2008 at 1:40 pm

Nice text replacement solutions! All clearly presented!

Ahmad Esmaeilzadeh
Dec 16, 2008 at 5:13 pm

Is there any solution for RTL languages like Arabic and Persian ?

ddsign
Dec 16, 2008 at 6:13 pm

It’s nice the new solutions for fonts in CSS3. It’s fabulous that we could use any font. I hope that this was standard soon.

Hayalmeyal
Dec 16, 2008 at 7:57 pm

beautiful text design.

http://www.hayalmeyal.org

ncus
Dec 16, 2008 at 10:34 pm

Great summary in the image replacement method. Currently I am using the #1, this article gives me heads up to use another method.

arshad
Dec 17, 2008 at 12:35 am

that was very cool.thanks

Will doyle
Dec 17, 2008 at 4:16 am

Thanks..

..Quite intresting

; )

http://www.willdoyle.co.uk

Tangletail
Dec 17, 2008 at 7:04 am

hmm not bad
how do you submit a guest post?

Carlos Hermoso
Dec 17, 2008 at 9:17 am

I can’t wait for CSS3. It looks really good

Roxanne
Dec 17, 2008 at 11:36 am

Wonderful post. I very much enjoyed reading it! A lot of insight and help too. =)

joao
Dec 17, 2008 at 3:09 pm

Cool, Thanks for this one.
my blog

korbsan
Dec 17, 2008 at 4:10 pm

great Article! Love the illustration-graphics you put in your posts. Thank you!

cath
Dec 17, 2008 at 7:28 pm

excellent article, very informative and easy to understand for a beginner! thank you

Vuongot
Dec 17, 2008 at 9:10 pm

Thank you for posting this great article, my most favorite style of webdesign is typography, so it’s very helpful.

lolz :)

Patrick
Dec 17, 2008 at 10:13 pm

You are forgetting typeface.js. typeface.js has the advantage of being javascript-only, no flash or images involved.

Chris
Dec 18, 2008 at 2:21 am

The Gilder/Levin is also problematic – if I understand how it works correctly, you can’t use transparent png’s or gif’s on top or else the the text below will be shown.

Is that the case or do I misunderstand how to do it?

Juul Coolen
Dec 18, 2008 at 6:06 am

@Chris

No, you’re correct. Unfortunately you can’t use transparent images with the Gilder/Levin method.

macias
Dec 18, 2008 at 7:50 am

nice article, very useful

Kayla
Dec 18, 2008 at 10:53 am

Very good post…very informative!

CMHB
Dec 19, 2008 at 5:46 am

Great article. I have used sIFR alot in the past, and it works really well. I have not used FLIR as of yet, but I might give it a go. Thanks for the info though. Very useful. Some great example sites too.

Green Sheep Design
Dec 19, 2008 at 5:50 am

Another great article – love this site!

Web design company
Dec 19, 2008 at 10:52 am

When using css especially with images and backgrounds, we also need to account for the vast population that now accesses the internet using mobile devices. Mobile nternet is one of the fastest growing areas and mobile browsers are still far behind standard IE or Firefox. There are a number of limitations especially when it comes to displaying images and CSS. It is important to also consider this in planning the design.

Alexandra Burke Bebo Skin
Dec 19, 2008 at 1:23 pm

thanks for your informative guide once again, look forward to more of your updates

design bonn
Dec 19, 2008 at 3:30 pm

thanks for this excellent article.

David Costales
Dec 19, 2008 at 3:38 pm

Awesome, nice tut.

Will Doyle
Dec 20, 2008 at 5:16 am

Great Post

Thanks

Will

http://www.willdoyle.co.uk

werbeagentur bonn
Dec 20, 2008 at 3:24 pm

thanks for this nice post .. very informative!

Branded07
Dec 20, 2008 at 3:57 pm

In my opinion the best way to add specific bespoke and non web safe fonts to a site without any requirements from the user/browser/flash/or javascript is to use an image within a header tag. Eg.

The alt tag acts as the title when images are switched off and when style is switched off it still bids the site accessible as screen reader friendly. Great post still.

Branded07
Dec 20, 2008 at 4:02 pm

The example below should have displayed as:

h1 – img src=”header-image.gif” alt=”header image” – /h1

Comments wont let me add html!

Juul Coolen
Dec 20, 2008 at 4:27 pm

@Branded07

Thanks for suggesting that solution! I didn’t know that one up until now. It seems to be a valid option, but not a very widely used one I guess.

I’m not sure if the h1 tag is effectively applied to the alternative text of the image though …

Branded07
Dec 21, 2008 at 9:15 am

@Jull Coolen

This technique renders the site Semanticly valid aswell so it still picks up the header tags, it just uses the alt tag as the text rather than the image.

webdesign bonn
Dec 21, 2008 at 2:08 pm

great post. thx

Blue Buffalo
Dec 21, 2008 at 11:04 pm

Awesome article on fonts and the web. Great examples.

Dan
Dec 22, 2008 at 5:26 pm

I really enjoyed the list of sites, great typography.

Juul Coolen
Dec 22, 2008 at 5:38 pm

@all

Thanks for the positive replies! :)

Page Gardens
Dec 22, 2008 at 5:44 pm

Wonderfully useful compilation! I’m currently looking into using sIFR.

Milos
Dec 23, 2008 at 7:25 am

Hi! I have good experiences with this css style for h1, h2 …:
h1 { width: 200px; height: 40px; background: url(‘image’) no-repeat; text-indent:-9000px; }
;-)

Rob
Dec 23, 2008 at 8:16 am

@milos: this is a good method and one I commonly used to use until I realised, a user with images switched off could not see the title at all. It is fine with CSS off but not images. Using a span is a better alternative.

joao
Dec 23, 2008 at 11:27 am

i loved the list of sites, , great typography.
my blog

Fumin
Dec 23, 2008 at 2:23 pm

Just redesigned my blog, looking for suggestions.
Link

Nate
Dec 23, 2008 at 4:21 pm

TYPEFACEJS at – http://typeface.neocracy.org – beats all that you list. But yes, it also has it’s downside, which is finding fonts that can be converted.
Check it out, you won’t be sorry.

Juul Coolen
Dec 23, 2008 at 4:23 pm

@ Fumin

Not bad, perhaps spicing things up with any of the above techniques? ;)

Juul Coolen
Dec 23, 2008 at 4:24 pm

Thanks, Nate. I’ll give it a look.

sadhu
Dec 24, 2008 at 1:35 am

i dun understand this tutorial >”<

João Henrique Ferreira da Mata
Dec 24, 2008 at 6:02 am

Excellent post!
Thanks!

visit my portifolio: http://www.swebstudio.com.br/jh

website design delhi
Dec 25, 2008 at 6:01 am

Hi!….
I was searching on internet and I found your web design blog…..it is really interesting…keep it up….look forward to read more from you

Find-A-Designer.co.uk
Dec 25, 2008 at 12:40 pm

Nice article, as usual!

Find design work at Find-A-Designer!

Gav.

The Frosty
Dec 25, 2008 at 8:50 pm

Nice Nice!

Alvaris Falcon
Dec 26, 2008 at 7:09 am

Again a great and comprehensive article for every designer, thanks!

Will Doyle
Dec 27, 2008 at 8:20 am

Thanks
very usefull

Will

http://www.willdoyle.co.uk

cutt
Dec 27, 2008 at 8:52 am

thanks!!!
Very usefull…

ralph
Dec 28, 2008 at 5:41 pm

Thanks a lot for this great article about fonts on the web, very nice and clear. Thanks for share all this tricks, great help.

regards from
Ralph
http://www.deprowebs.com

Web design
Dec 29, 2008 at 12:59 pm

It would be very useful to be able to maintain special fonts through CSS, but I didn’t heard of such a technique yet.

Carlito
Dec 30, 2008 at 12:40 am

How many different fonts can i use on the same page? Is there any limit at all?

here is used: http://www.exdizajn.com/blog/ is used two, or maybe more different fonts and it look nice

education in India
Dec 30, 2008 at 4:57 am

nice design

aurelio
Dec 30, 2008 at 7:06 pm

kslaòskskalòkwq

Jauhari
Dec 31, 2008 at 2:04 am

Wonderful list ;)

zuhaini
Dec 31, 2008 at 3:15 am

Cool! by the way, can you please make a tutorial on how to do a layout / website design like this one..? thanks!

Di
Dec 31, 2008 at 7:32 pm

This is great! I only wish I had the time to implement it into my site. I will however try to in my new sites.
Thanks for posting this.

promovare site
Jan 1, 2009 at 5:21 am

very interesting and useful article

Great work!
Happy New Year!

TJ @ Smartblogtips
Jan 1, 2009 at 12:49 pm

Very informative article. Will give it a try.


Regards
Thinkjayant

cath
Jan 2, 2009 at 7:46 pm

thanks, really clearly explained, a very helpful article.

Nate
Jan 3, 2009 at 5:53 am

Check out http://typeface.neocracy.org/ for a cool and easy way to put custom fonts on your site.

web 2.0 designer
Jan 6, 2009 at 3:22 am

Good informtaion about CSS3 and font-face rule…Thanks

Skracanie linków
Jan 6, 2009 at 5:40 am

@font-face is awesome tag, hope CSS3 will be more and more popular.

Alice
Jan 6, 2009 at 12:24 pm

I was under the impression that setting content to display: none; means you run the risk of it getting picked up by Google who would think you were trying to “keyword stuff” your site. Which means you might get de-ranked for using black hat techniques. Does anyone have any more info on this?

dselva
Jan 6, 2009 at 3:40 pm

Wonderful Article about CSS font rule!!!

thanks
dselva
http://www.dsignzmedia.com

Gelston
Jan 8, 2009 at 5:47 pm

another great post!

Juanmanuel Lopez
Jan 10, 2009 at 11:32 pm

hi! great info… i like to know how work then the web page dafont.com… thanks!

Graham
Jan 12, 2009 at 7:11 am

Thank you for showing all the various techniques and for explaining everything so well. It sure does help when you have the “know how.”

MJ
Jan 12, 2009 at 10:13 am

Another magic post :)!
You’re one of my fav teachers on the web, very useful and informative blogs

Carlos Hermoso
Jan 14, 2009 at 8:29 am

I just can’t wait to see CSS3 working out. It’s going to be awesome!

Sr. Ternasco
Jan 28, 2009 at 9:53 am

No negative text-indentation in substitution of hiding the text.
Text visible for human readers.
Text visible for any automated source readers.
Accessible

.foo { z-index: 1; position: relative;}
.foo a{ display: block; height: 12px; width: 12px;}
.foo a span{ position: relative; z-index: -1;}

I think this the perfect solution for a CSS/XHMTL technique
:)

MaximaDesign
Feb 2, 2009 at 12:25 pm

I use a construction
<h3><em>my text</em></h3>
or
<h3><b>my text</b></h3>
or
<h3><u>my text</u></h3> …

Jon
Feb 2, 2009 at 3:17 pm

I’m a tutor at a web design course in London (http://www.digitalartscollege.co.uk) and one of the main topics we cover is typography on the web.

Thanks for the great article – I will be asking all of my students to bookmark this post!

Ehab
Feb 3, 2009 at 8:54 am

Hello everybody ! When do you suppose CSS3 will be server to the mass ?

Petra
Feb 7, 2009 at 6:22 pm

Thank you! A very helpful information about fonts and webdesign.

SEO
Feb 8, 2009 at 7:53 am

I love the font design…………great useful information

Jimmy
Feb 9, 2009 at 4:18 am

Hi,
Such a nice information.I learn many from this article.Good looking website
attracts the people.That is because of font.www.cyberdesignz.com is a informative site.

gaijun
Feb 17, 2009 at 12:08 am

Nice list, thanks!

Amrita
Feb 18, 2009 at 4:44 am

Great post. Well-done.

NDT Technology
Feb 20, 2009 at 7:00 am

css design very look feel good and as well as if you want website you cant without using the css

NDT Technical Paper Download
Feb 20, 2009 at 7:03 am

nice post and you are clearly explained the css

thanks

Fantasy Sports Betting
Feb 22, 2009 at 9:17 am

Very creative use of fonts and layout, very impressive!

Magnetic Methods Image Processing
Feb 23, 2009 at 7:34 am

Very creative use of fonts and layout, very impressive. thanks so much

Miss Blossom
Feb 27, 2009 at 4:41 am

I tried this and failed miserably, but I have another site I plan to use it on, wish me luck and I will post it when I have done it.

davetiye
Mar 9, 2009 at 1:05 pm

thankss for the summary

Sofia Norton - SEO Professional
Mar 16, 2009 at 10:13 am

We have been using CSS for quite a while but this is the finest design I have ever come across. Any site is just not done without CSS. I recently launched a new site and used CSS2.0 really looks cool.

merdiven
Apr 29, 2009 at 3:35 pm

thank great article , nice blog, thnx sharing

gaziantep evden eve taşımacılık
May 13, 2009 at 4:24 am

thanks you very good

gaziantep evden eve taşımacılık
May 13, 2009 at 4:24 am

thanks you

Keith D
May 21, 2009 at 1:58 pm

Seems like a lot of hard work just to use real text that the engines can read.
Having to use server side PHP plus javascript… come on, there has to be better ways to make your site look good.

I’ve read so many of these techniques…. and read the drawbacks of each, Not for me.

Thanks for getting me thinking.

Keith D

francisa
May 21, 2009 at 8:23 pm

nice

diyet
Jun 17, 2009 at 1:16 pm

very nice designs

Joe
Jun 18, 2009 at 1:49 pm

I just finished up a design for my site that I think I can live with. Though, I’m still struggling to get my text to look the way I want it. Are there any css examples I could look at or tutorials I could go through. Any feedback would be appreciated.

lisa
Jun 25, 2009 at 6:12 am

thank you so much, it is very useful for me.I am looking for a tutorial about solving the problem of fonts appearance for a long time. It has been solved now.

François Royer Mireault
Jul 10, 2009 at 9:41 am

Thanks a lot again, helpful as usual.

premier cosmetics
Jul 31, 2009 at 10:08 am

Thanks, very interesting information.

cennet
Aug 8, 2009 at 5:39 am

Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

cennetevi
Aug 8, 2009 at 5:42 am

these are awesome!
thanks for putting in the effort to get this list together

cennetevi
Aug 8, 2009 at 6:19 am

Thank =)=)=) you http://www.cennet.gen.tr

jatropha, jatropha seeds
Aug 18, 2009 at 8:45 am

good article thanks for info

jako
Sep 4, 2009 at 7:20 pm

I would freaking love to do that with my picture gallery!
Thanks!

bagsin
Sep 10, 2009 at 8:00 pm

I have seen a site just using compo and fonts

Cyrus
Sep 21, 2009 at 9:24 am

Great , Fonts and the Web
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

dead sea premier
Nov 20, 2009 at 4:03 pm

very interesting article

dead sea premier
Nov 20, 2009 at 4:04 pm

very helpful article

enjektör tabancası
Nov 25, 2009 at 4:41 am

thanks you

vincentdresses
Jan 6, 2010 at 1:40 am

喜欢你们的设计与技术,常来看看

ijjal
Mar 10, 2010 at 11:16 pm

woaahaaa…..cool….

Brazil Business and Investments
Mar 30, 2010 at 4:30 pm

Great post! I think the font made all the difference in a design project!

Web free fonts
Jul 27, 2010 at 6:53 am

Really a Good info.. TFS :)

Jeannie Shoen
Sep 18, 2010 at 1:41 pm

Thank you for the really informative site

Andrew L
Oct 5, 2010 at 4:09 am

Many thanks.. I have been trying to solve some problem relating to layers and this post gave me the answers. Great sharing.. keep it coming! Your other posts is equally useful. I recommend all people to read.

Melvins
Dec 10, 2010 at 12:42 am

Useful tutorial as well. It makes me smile and very useful in future.

Los Angeles Web Design

Henry Peise
Dec 24, 2010 at 3:14 am

As iphone 4 white 3GS has something of non-update to the iPhone range, but there are finally decent alternatives in the smartphone market, with the HTC Desire and Samsung Galaxy S leading the Android fight right to Apple’s door.

Juno Mindoes
Dec 25, 2010 at 2:17 am

At 7 June, 2010, the latest iphone 4 generation was announced. It’s been a high time to get the iphone 4 white, or we may lost the fashion trend. Don’t we?

altın çilek
Feb 2, 2011 at 7:01 am

Great post! I think the font made all the difference in a design project!

Sumeet Jawalkar
May 28, 2011 at 4:13 am

Awesome one !! I Think the font is what makes it different from others. I loved it and will surely help me in future..

complex 41
Aug 4, 2011 at 10:16 am

Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
(55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır.

complex 41
Aug 23, 2011 at 10:12 am

And then he handed you the thirty-five 55

complex41
Aug 23, 2011 at 10:44 am

And then he handed you the thirty-five 45

Gaziantep Evden Eve
Feb 4, 2017 at 10:49 am

I think it is wonderful everything is very nice emegine health

gaziantep evden eve
Feb 8, 2017 at 7:32 am

bendece I love the websites you showed as well. I found this new article that touches on fonts and font face kits as well that could work well with

Jason Curby
Sep 26, 2011 at 10:39 pm

Great read, thanks Juul. I especially like the examples, I’ll be looking over this this afternoon!

j_hatfield
Oct 23, 2011 at 9:46 pm

Great Article, I love the websites you showed as well. I found this new article that touches on fonts and font face kits as well that could work well with yours:

http://www.back40design.com/news/m.blog/22/communicate-your-message-through-typography

Auto Repair News
Feb 8, 2012 at 5:35 am

I do love the manner in which you have presented this particular challenge plus it does indeed present us some fodder for consideration. Nevertheless, because of what I have personally seen, I just simply trust as the comments stack on that people today keep on issue and in no way embark on a soap box associated with some other news of the day. Still, thank you for this outstanding point and although I do not concur with this in totality, I respect the viewpoint.

bitkisel
May 2, 2012 at 1:19 pm

Great Article, I love the websites you showed as well. I found this new article that touches on fonts and font face kits as well that could work well with yours:

bitkisel
May 2, 2012 at 1:20 pm

Great read, thanks Juul. I especially like the examples, I’ll be looking over this this afternoon!

yates en Ibiza
Jul 27, 2012 at 7:32 pm

I love the websites you showed as well. I found this new article that touches on fonts and font face kits as well that could work well with

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.