Remove Outline / Fix Font Rendering

Fonts will render differently across browsers, and sometimes even when different colours and background are being used. Apply the following to the body (and headings) to force the fonts to render consistently:

body {
        -webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;


font rendering before anti-aliasing applied


font rendering after anti-aliasing applied


Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.