Advertisement


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


Question

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?

2012/07/31
1
1
7/31/2012 1:47:00 PM

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.

2012/07/31
3
7/31/2012 3:50:00 PM