google-chromefontsfont-sizegoogle-font-apicleartype

Why do fonts get pixelated at lower font-sizes?

I'm trying to understand how I can keep my fonts looking as nice as they do at a font-size of 64px when using something such as 36px. I'm currently using Google Fonts' Open Sans. The font looks nice at 64px (or even 49px), but not nice at 36px. Below is the css and screenshots of each.

CSS

    .h1 {
        font-size: 36px;
        line-height: 1.1em;

        font-family: 'Open Sans' !important;
        font-style: normal;
    }

36px

enter image description here

64px

enter image description here

Solution

  • less size means only a couple of pixels are available for font rendering. more the no. of pixels, more the clarity. take the example of an ellipse. the more no. of points u use to draw the ellipse, more accurate the ellipse will be.

    about ur anti-aliasing issue - sorry, there's nothing u can do on chrome/opera on windows. ie antialiases fonts. but not chrome/opera. in mac thought fonts get antialiased even at small sizes.

    update[1]

    try the premium font 'Helvetica Neue'. It looks the same with/without antialiasing.