Skip to content

Instantly share code, notes, and snippets.

@hsleonis
Last active January 17, 2024 00:16
Show Gist options
  • Save hsleonis/55712b0eafc9b25f1944 to your computer and use it in GitHub Desktop.
Save hsleonis/55712b0eafc9b25f1944 to your computer and use it in GitHub Desktop.
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
Copy link

JohnMica commented Dec 7, 2017

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

thanks

@maxmilton
Copy link

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
Copy link

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

@dben89x
Copy link

dben89x commented Feb 10, 2018

Nice.

@dinofx
Copy link

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
Copy link

jpcmf commented May 14, 2018

nice, thanks :)

@sreegopi
Copy link

It's looking good. thank you :)

@zinchenko
Copy link

thanks for the text-shadow thing!

@OZZlE
Copy link

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
Copy link

OZZlE commented Aug 21, 2018

also sub pixel is default now in modern browsers

@CorinLUSI
Copy link

would this still be considered the best cross browser font smoothing?

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