Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 1 down vote favorite

Here is an example to explain what I mean:

Text created in Gimp:

enter image description here

Text created in html/CSS code:

enter image description here

font: 60px "anchor-web-1","anchor-web-2", 'Impact', sans-serif;
font-weight: 900;

Why do html/css texts appear so "pixelated" compared to texts from photoshop or gimp?

And is there a way to have better result and still use only html/css/javascript/other code?

share|improve this question
What browser/OS is your second example from? – e100 Jul 31 '12 at 14:26
@e100 Chrome/WindowsXP – tucson Jul 31 '12 at 15:07

2 Answers

up vote 3 down vote

Your first example uses Gimp's anti-aliased font rasterization. In short, the glyphs are given a smoother appearance by using grey pixels where the outline would bisect a pixel.

It also uses hinting to keep the verticals on exact pixel boundaries and therefore crisp.

Text rendered by operating systems and browsers uses anti-aliasing to different degrees; your second example, Chrome on Windows XP isn't using any at all.

If you try a few different browsers yourself you may see different results. What your visitors will see is also dependent on the browsers and OS they are using and not really under your control; they'll see other websites' text rendered similarly.

share|improve this answer
How would you advise to improve the rendering for the most visitors of my website(s)? – tucson Jul 31 '12 at 15:08
1  
You can't improve the rendering. The best you can do is try different fonts until you find one that renders well in the os/browsers most of your visitors are using – Yisela♦ Jul 31 '12 at 20:37
@tucson you can use "safe" type fonts, webdesigndev.com/web-development/… and just get the best of what you can or if you really need it to look great, you will need to create an image. – Matt Jul 31 '12 at 23:14
I think it has more to do with the OS than the browser. Some browsers might try and anti-alias, but you can have windows try and emulate it. I don't like how it does it though, it always looks out of focus. – BillyNair Aug 1 '12 at 20:50
1  
The point is, as yisela says, you have no control over what OS and font-rendering the user is using. Your only option is to pick a font that looks as good as possible on as many different OSes as possible. – thomasrutter Oct 15 '12 at 2:49
up vote 0 down vote

In Windows XP, is the ClearType anti-aliasing (font smoothing) feature off? I hear it's not turned on by default in XP, only in later versions. There is a Microsoft help page on how to activate ClearType: http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.