Hiding Text with CSS - Is it Risky?

Good Design, or Dangerous?

[rogerd]

I suppose the CSS forum might be a risky place to bring this up ;), but here goes... While hard-core CSS types love fluid layouts, flexible fonts, etc., there are still a few archaic graphic designers that would prefer to show a headline, company name, etc. EXACTLY as they design it. Same font, same size, same kerning, same everything. Not only will using an image avoid weird font transformations if the user lacks the desired font, but would also allow incorporation of non-type graphic elements like fancy shadows or other effects. And face it, a Verdana, Arial, or Times New Roman H1 tends to look a lot like every other site.

Indeed, I see a lot of sites in which the "headings" are images. Of course, this is not good from an SEO standpoint. ALT Text might allow handicapped or limited-display mobile users to read the headings, but is unlikely to help much with search indexing.

CSS provides a way of satisfying multiple types of users. A conventional heading can be put in the HTML, and an imported or linked style sheet can set the text display to "none" and add the appropriate image as a background image. Users who can use style sheets get the fancy version, those who can't get text.

Clearly, you wouldn't want to do this for every heading on a large site. However, if you used some headings repetitively, you could avoid having tons of special classes. The only thing that is scary is the hidden text aspect. If the HTML and graphic text are an exact match, the technique is perfectly innocent and would certainly survive human scrutiny; however, if hidden text filters find a "display:none" modifying an "H1" tag it might trigger an automated penalty, or at least ignoring of the very text you want indexed.

So, which is it? Clever use of CSS to enhance the site, or an unnecessary risk?

[edited by: agerhart at 4:33 pm (utc) on June 12, 2003]
[edit reason] No URLs please, Per TOS [/edit]

[Nick_W]

It's not risky now, (not very) if it's in an internal sheet but it could be in the future.

It shouldn't be, but it could be. I'd not do it myself Roger...

Nick

[rogerd]

That's kind of my take right now, Nick. My concern is that because some people abuse CSS to hide text, sooner or later the SEs are going to have to analyze the CSS files. There are certainly some technical challenges to do so, but "display:none" looks like the kind of thing that would flag a simplistic algo.

I'd just as soon avoid doing something that might be safe now but be risky later. We work on sites that we may never touch again, and I wouldn't want to be responsible for someone's later penalty. ("What idiot put these display:nones in your CSS? Didn't he know Google 3.0 automatically cuts your PR in half for that?" :))

At the same time, it's certainly an elegant and innocent solution to a recurring design problem.

[waldemar]

I agree; eventually the spiders will find the display:none; and ignore it. It don't believe it would result in a penalty though, since it's a regular css feature.

In any way using images as headers is against the idea of html (+ css).

[rogerd]

It don't believe it would result in a penalty though, since it's a regular css feature

Black text is a regular HTML feature, but if you put it on a black background, you may well get penalized. Actually, I wouldn't have worried about this too much had it not been for Google's recent hidden text campaign.