Typography and Web Design

[espmartin]

There are standard fonts that are expected to be available on most
PC/Mac/Linux installs. And these are the ones we should be selecting
for use on our context.

However, when we find one we really, really, like - some cool looking
one - you can simply make the text into an image, and use CSS to use
that image as Header text, by using CSS IR (Image Replacement) techniques.

So do you do that w/ CSS?

 

[smeagain]

Nope.
If as as normal otherwise the question would not apply, the area in question needs to be emphasised, then a heading tag is most probably very appropriate and desirable. Using an image as a page banner "Red Widgets in Location" for example instead of Text in a heading tag is missing a search engine bonus point or two.

 

[espmartin]

And that's why I've asked if you do this with CSS IR (Image Replacement) techniques.

XHTML:

<h2 id="uniqueh2">Web Standards in Design</h2>

CSS:

#uniqueh2 {background: transparent url(/images/web-standards-design.gif) no-repeat top left; text-indent: -5000px; height: 57px; width: 300px; overflow: hidden;}

That's what I do. SEO is not a question here, unless you use an
image tag instead of real text.

 

[smeagain]

Google Says:

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. Text (such as excessive keywords) can be hidden in several ways, including:

• Using white text on a white background
• Including text behind an image
• Using CSS to hide text
• Setting the font size to 0

 

[espmartin]

Text (such as excessive keywords)...

That's the key. If you have the term, "web standards" as your text replaced with CSS,
and your H1 image includes the "web standards" text as an image, and your site is about
web standards, and you are not spamming your page with that term (just about 3%
keyword density) - than you have nothing to fear from Google.

So many webmasters are afraid of Google - even when using white hat

 

[smeagain]

Carry on if you are happy with the technique.
I don't use CSS positional displacement to "Hide Text" for any purpose and reccomend that others also do not.

Good intentioned (white hat) design practices should be of no consequence to the SEs.
However, in the world where frequently changing Algos are the frontline weapon against SE Spam, combined with CSS being one of the Spammers main Weapons, I would not put my faith in this technique not being robotically penalised possibly already but if not, very likely in the near future.

You must have noticed the number of panicky posts "My sites dissapeared from Google" after major (or even minor) algo revissions.

Tooooo risky for me with a vulnerability factor outside my control. I would not dare employ this technique on any of my clients sites.

 

[xhan]

I sure do! but I always deisgn with a standard font first then replace it - incqase it doesn't display.

Theres a wordpress plugin that does it for you too! Always useful!

 

[espmartin]

Hey Han Link to that WP plugin please?

 

[xhan]

Hey Han Link to that WP plugin please?

Theres actually two, if one doesn't work the other one usually does!

Image Replacement WordPress Plugin - Development on a Shoestring


WordPress › Image Headlines « WordPress Plugins

 

[espmartin]

I'll check those out Han. Rep added sister!

 

[1christopher]

i sometimes use the SIFR flash tool...