Instantly share code, notes, and snippets.

Embed
What would you like to do?
Better font smoothing in cross browser
html {
/* Adjust font size */
font-size: 100%;
-webkit-text-size-adjust: 100%;
/* Font varient */
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
/* Smoothing */
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
@JohnMica

This comment has been minimized.

JohnMica commented Dec 7, 2017

nice one man, the shadow to the text is something new :).

thanks

@MaxMilton

This comment has been minimized.

MaxMilton commented Dec 13, 2017

Why explisitly set font ligatures to none?

What is the font-smoothing property? Did you mean font-smooth (https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)?

@derekbtw

This comment has been minimized.

derekbtw commented Jan 24, 2018

@MaxMilton font-smoothing is supported by webkit and moz.

@dben89x

This comment has been minimized.

dben89x commented Feb 10, 2018

Nice.

@dinofx

This comment has been minimized.

dinofx commented Feb 28, 2018

Or, just go with the platform's sub-pixel anti-aliasing, which is objectively sharper and easier to read.

@jpcmf

This comment has been minimized.

jpcmf commented May 14, 2018

nice, thanks :)

@sreegopi

This comment has been minimized.

sreegopi commented May 25, 2018

It's looking good. thank you :)

@zinchenko

This comment has been minimized.

zinchenko commented Jul 25, 2018

thanks for the text-shadow thing!

@OZZlE

This comment has been minimized.

OZZlE commented Aug 21, 2018

@dinofx if you have a custom font without many variations using regular anti-aliasing instead of sub-pixel makes the font look thinner, it's a trick I use often when the font I'm using doesn't have a thin variation and in the design looks the font looks thinner :)

@OZZlE

This comment has been minimized.

OZZlE commented Aug 21, 2018

also sub pixel is default now in modern browsers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment