Menu
When I've designed my web site in Adobe Flash Pro CS6, the font looks like this:
The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like these, respectively in IE, Firefox, and Chrome.
It appears thinner and pixelated in some areas. I've seen much smoother font rendering on OS X. How can I make the font appear smoother in these browsers? I'm assuming this is a problem with ClearType, which looks hideous with thin fonts like this one.
Here is the code I'm using to test, so answers can be tested before being posted:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
</head>
<body>
<span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
</body>
</html>
822
Should I use font smoothing antialiased? Of course you should, it looks better. Of course, "looks" is subjective and while researching the foundations of this code I've been convinced that it is more of a hack in that it 'fixes' a problem that shouldn't be there.
antialiased - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies etc etc.
This is something you shouldn't really care about. People who use IE are not going to switch to Firefox or Chrome or vice versa. They are used to the way fonts look and are not going to notice.
Browsers inconsistencies is a thing front end developers have to live with (sadly). Its great if they all look the same but that's not going to happen
Things you can try, you will probably need different fixes for different browsers.:
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
Another thing you can try is use system fonts for improved UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Readup - smashingmagazine
Readup - booking.com
Readup - medium
124
I find that in Google Chrome you can add -webkit-text-stoke to improve the appearance of fonts.
for example:
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
7
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
