Changing the rendering of text on your pages

With many different web browsers available for your site visitors to use to access your site, there will always be subtle differences in the way these different applications render your pages.

There are also some CSS tweaks you can make to adjust the rendering of text on your pages in certain browsers.  If you look at the two screenshots of text from an OptimizePress page below you will see the difference:


Default Rendering (Antialiased Font Smoothing ON)


Antialiased Font Smoothing OFF


You can see the subtle but noticable difference in the boldness of the lettering on the page

To turn off font smoothing on your pages you can use the following code (add this to the Other Scripts > Custom CSS on a LiveEditor page or to affect your whole site you can add it to OptimizePress > Dashboard > Global Settings > Custom CSS (Sitewide):

body{
-webkit-font-smoothing:auto;
}


You can also tweak the rendering of the lettering with this code:

body{
text-rendering: optimizelegibility;
}


To combine both of these you can use:

body{
-webkit-font-smoothing:auto;
text-rendering: optimizelegibility;
}


Please note: Some browsers will render text differently and the changes in styling will be more noticable in some browsers than in others