Hi all,

 

For a website I'm creating I noticed that my text looks better as an Photoshop image rather than standard text added using Dreamweaver.

 

Main text as a Photoshop image

 

Main text added in Dreamweaver

 

In Photoshop I set the anti-aliasing method to Smooth, but apart from that the text is identical.

 

What I thought of doing was keeping the text as part of the background while using CSS to hide the actual text so that it can still be used for SEO. Will this result in penalisation? I read through this page on it but still can't be sure how acceptible my use is.

 

Or is there a way in which I can make the text look as it does in Photoshop?

 

Many thanks,

 

Niall

hidden text can be seen as spam. One thing you have to remember that the web is a text based medium and as such you should be thinking about the text, the usability of this and the accessibility issues as well as what affect it will have on the SEO of you site.

 

 

Hide too much text google and other search engined will see it as you spamming keywords that you don't want to be seen on the site. After all they don't know that the text that you are hiding is really the text you are displaying in the image.

 

Now that the seo problems are out of the way lets look at the more important aspects...

 

Why do you need/want text on your site?

 

I am guessing the answer is because you want people to read it...pointless having it if you don't want people to read it.

 

As you are adding the image through css, how will people with css turned off read the text?

 

So you make it an image instead, how will people with images turned off be able to read your text? yes a small number of people will have images turned off so this renders your site totally useless to them...unless they look in the source code, how may normal people will do that?

 

Ok lets say that you don't really mind too much if these people can't read your text. That is a small number anyway so lets go for a bigger number now...

 

 

What if these people that need to read the text need to make it bigger so that they can read it, how can they do this if it is an image. They can't use the browser to up the text size because images won't let you do this

 

 

 

Will the text need to be updated?

Ok so it is your site not too bad, you will just have to spend some time updating the images that you are using, guess save the file so that you can do this and then just upload the images.

 

What if you are doing a clients site, you hand it over the hire someone else to just simply update a few little bit of text...well they don't have your files they will have to recreate this whole image, so a job that should take a little while has now changed into something that could take hours to do.

 

So really you have done you clients a disservice, not just have you made them a site that is not user-friendly or accessible to the widest amount of people, you have also made it so that to update the site they will have to pay even more money then they should have to because you have made updating a hard thing to do.

 

 

Just please remember that as a web designer one of the challenges is to make the text look good on a site without taking way the users ability to view it how they need to.

 

 

 

Anyway as the reasons why not to use images are above, there are a few ways to do text replacement. However I don't really follow this closely as I like the challenge of making web safe fonts look good in a design, so someone else will have to help you with these

 

 

Also just quickly, personally I think images for heading and logos are fine, as these are small bits of text and alt tags help with the accessibility issues, it is just large quantities of text are of the most important to have as text so that people can read them

Thanks very much for your thorough and helpful replies Dizi, you made a lot of good points so I'm going to try to steer clear of that method. Also, it's a site for a client.

 

If anyone knows of a good way around this (preferably making the standard text look as good as the image) it woul be greatly appreciated if you posted it here!

 

Niall

Niall,

 

I'm confident in reporting that on my win/ff machine the standard windows-rendered text is MUCH more readable than the smoother photoshop text.

 

Of course the anti-aliasing in graphics-orientated programs like photoshop and (to an extent) safari is more pleasing to the eye, but nothing beats good ol' windows for making sure your text is actually readable by people with real eyes.

 

In safari with the mac anti-aliasing turned on you might be pleasantly surprised anyway.

Niall,

 

I'm confident in reporting that on my win/ff machine the standard windows-rendered text is MUCH more readable than the smoother photoshop text.

 

Of course the anti-aliasing in graphics-orientated programs like photoshop and (to an extent) safari is more pleasing to the eye, but nothing beats good ol' windows for making sure your text is actually readable by people with real eyes.

 

In safari with the mac anti-aliasing turned on you might be pleasantly surprised anyway.

 

To me the standard text looks a little too sharp and defined, for the moment I'll use it though (sorry, but it just puts me off, like it doesn't suit the style of the rest of the site). I've used a lighter colour so as to match the image as my client said she liked it that way.

 

Here it is so far

Hmmm, I've just had a look at the site on Firefox, Safari and IE and lo and behold IE isn't showing it properly.

 

In IE the text appears as one line less than I want it to causing the Niall Devlin line to move up. The page with the image is how I want it to look (and how it does look in FF and Safari, minus the smooth text).

 

Incidentally when I view it in Dreamweaver CS4 it looks as it does in IE (though switching to Live View displays it correctly).

 

Here's the CSS

I've checked the site on my Mac notebook at work using FF and Safari and in both it looks incorrect. The Mac uses a lower resolution than my Vista Ultimate laptop at home.

 

It seems to me that the problem is to do with line-spacing in the body class (yet no line-spacing is specified). I also used a lot of different margin settings, could that be the problem?

Each browser has its own default spacings, so margins, padding, line spacing will all look different unless you reset them to 0.

 

Here is an example that shows how a layout can vary in different browsers :

http://snook.ca/testing/applediff.gif

Each browser has its own default spacings, so margins, padding, line spacing will all look different unless you reset them to 0.

 

Here is an example that shows how a layout can vary in different browsers :

http://snook.ca/testing/applediff.gif

 

I changed the paddings and margins in every class to 0 and changed word-spacing, letter-spacing, white-space, font-style, font-varient and line-height in the body class to normal, but it hasn't made any difference.

 

Here's what the page looks like in Dreamweaver:

 

http://www.nialldevlin.com/Katrina%20Tagga.../Untitled-1.jpg

I changed the line-height to 18 and it's now appearing correctly on all three browsers!