Improve Typography with CSS

*, *:before, *:after { text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-feature-settings: "kern"; font-kerning: normal; box-sizing: border-box; } html.touch *,html.touch *:before,html.touch *:after { text-rendering: optimizeSpeed; } html { font-size: 62.5%; /* Makes rem equal to px */ } body { font-size: 16px; /* Fallback for browsers which don't support rem unit http://caniuse.com/#feat=rem */ font-size: 1.6rem; font-family: HelveticaNeue,TeXGyreHeros,FreeSans,"Nimbus Sans L","Liberation Sans",Arimo,Helvetica,Arial,sans-serif; user-select: text; }
Better rendering of fonts, font rendering optimized for performance on mobile devices, font-size set to 1.6rem=16px.

2 Responses

Is !important really necessary?
@Marco De Luca No. I'll remove it.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.