47

When I've designed my web site in Adobe Flash Pro CS6, the font looks like this:

Font rendered in Adobe Flash Pro CS6

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.

Font rendered in IE, Firefox, and Chrome browsers

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>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Phoenix Logan
  • 1,238
  • 3
  • 19
  • 31
  • 1
    [ClearType](http://en.wikipedia.org/wiki/ClearType) is only Microsoft's name of the subpixel rendering that makes your font appear "colored" on Firefox and Chrome, unless you fix it via CSS (BTW, I have always hated subpixel rendering, which is one of those ideas that are good only theoretically, not in practice) – Walter Tross Apr 03 '14 at 21:46
  • To my eye the difference between the rendering in CS6 and in the browsers looks like stemming from a different [gamma](http://en.wikipedia.org/wiki/Gamma_correction) (ɣ) or from a transparency applied (in browsers) additionally to the smoothing (i.e., grey pixels are also partly transparent) – Walter Tross Apr 03 '14 at 22:04
  • Last info: Firefox and Chrome on my Ubuntu 12.04 render the font somewhere between your extremes, maybe a bit closer to CS6 (which does a particularly smooth rendering) than to your browsers - and without coloring (but maybe that's because I have disabled it globally somewhere). – Walter Tross Apr 04 '14 at 07:25
  • Have you tried looking at your test page on other machines? I'm not sure, but the rendering of fonts could depend on graphics hardware and firmware, and settings too. – Walter Tross Apr 08 '14 at 19:53
  • I will try that. After all, my laptop doesn't render things correctly in IE unless I disable hardware rendering... I didn't even think of that until now. – Phoenix Logan Apr 08 '14 at 19:59
  • I have to correct a comment above: "grey pixels are also partly transparent" should be "partly transparent pixels are also grey (partly white)". But that is only the visual effect. The reason is most probably in the rendering algorithm, which tries to convey an impression of sharpness at the expense of accuracy. CS6 seems to have a completely different approach: it looks like the sharp vector image is blurred with the correct convolution function (which the theory says is a sinc function), and the sampling is done taking in account the correct gamma. The result is blurred but otherwise perfect – Walter Tross Apr 09 '14 at 21:17

10 Answers10

81

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;

Edit 1: DirectWrite is now on chrome for windows which will improve the rendering.

Edit 2 (2017): System UI fonts

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

Michael0x2a
  • 58,192
  • 30
  • 175
  • 224
Rick Lancee
  • 1,629
  • 1
  • 15
  • 20
  • 9
    People don't notice the details but that doesn't mean they aren't impacted by them in terms of eye-strain or just the vague sense of a page looking less well-crafted or professional without being able to identify how exactly. If there isn't a heavy toll to be paid in performance or maintainability or best practices, investing a bit of time on details that not everybody will notice consciously is still worthwhile IMO. – Erik Reppen Nov 20 '15 at 20:39
  • Yeah, @ErikReppen, I don't really care for the initial tone of this either. Try having a client that notices the difference; it becomes important. Especially since this isn't a simple matter of "it doesn't look the same on both", it's "one font looks like crap." Regarding the solution though, aren't text-rendering and -webkit-font-smoothing NOT available on any version of IE?https://caniuse.com/#search=-webkit-font-smoothing – UnsettlingTrend Jun 21 '17 at 14:34
  • Of the "system fonts" mentioned, only about half are usually-installed system fonts, the rest are web fonts that probably are _not_ installed unless you went out of your way to do so. – scott8035 Apr 29 '19 at 20:41
  • @scott8035 They are actually used. Firefox uses Fira Sans – brandito Jun 12 '19 at 05:41
8

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);

-- Note this answer was from 2014 and is probably not a good solution today.

jono
  • 1,792
  • 17
  • 18
  • I'm sorry. I need a universal answer... for at least IE, Firefox, Chrome, and Safari. – Phoenix Logan Apr 08 '14 at 13:09
  • Basically this is a faux bold effect. – user3108698 Oct 23 '15 at 18:08
  • 1
    For best result in chrome, use solid stroke and use the same color as your font. For example if your text is black use: -webkit-text-stroke: .025em rgba(0,0,0,1); – user3108698 Oct 23 '15 at 21:23
  • This is really the best solution if you are looking for a solution for Chromium. This really improves how fonts look in Atom, `-webkit-text-stroke: 0.025em;` is good. – xdevs23 May 07 '18 at 14:05
6

text-rendering: optimizeLegibility applies kerning to the font, wich can improve readability, but only if the resolution of the display and font-size is high enough. It doesn't make the font any bolder if it was too thin before.

The problem here could be font-families that have one or more faces that are lighter than normal (font-weight:400) – like Googles Lato.

If you load all light to regular faces of Lato like this

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

I made the observation that most Windows browsers and Chrome OSX use font-weight:100 if you specify anything lighter than 400 – (or normal, regular). Changing the font-weight: to 200 or 300 doesn't render any different, although the inspector tools insist the machine is displaying e.g. font-weight:200. Which it isn't.

Removing the lighter weights (100 in my case) solves the problem, and lets me at least use font-weight:200, respectively. Rendering isn't absolutely identical across browsers but similar at least.

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

This of course doesn't solve the actual problem not being able to access light font weights as specified.

Alex Koch
  • 61
  • 1
  • 1
5

There's no single fix for this, as far as I'm aware. It's multiple fixes implemented to suit each browser, except IE. Give these a shot:

For Chrome, and any other browser using webkit:

-webkit-font-smoothing:antialiased !important;

Place that in your html CSS, or for whatever elements you see fit. You can also add this along with the above:

text-shadow:1px 1px 1px rgba(0,0,0,0.005);

Experiment with different alpha values, but you should keep the shadow sizes as they are.

I'm unaware of anything else you can do, but this should address the biggest problem with Chrome at the very least (plus other webkit browsers).

jao
  • 18,273
  • 15
  • 63
  • 96
Hiigaran
  • 829
  • 10
  • 28
  • Neither of these seemed to do anything differently even in Chrome. Even if it did work, my website can't be exclusive to Chrome. – Phoenix Logan Mar 31 '14 at 19:35
  • Understandable. The point was to fix the worst problem, so the overall problem wouldn't be as bad. As for it making no difference, have you made sure to do a ctrl+F5 to clear the cache? That goes for Ryan's answer as well. Sometimes you won't see a change in CSS until you do so. – Hiigaran Mar 31 '14 at 19:39
  • No, it still looks the same as before. – Phoenix Logan Mar 31 '14 at 19:44
  • Hmm. I'm afraid I've got nothing else. Doing a bit of a search around this site confirms there's not much else you could try: http://stackoverflow.com/questions/17864742/how-to-apply-font-anti-alias-effects-in-css – Hiigaran Mar 31 '14 at 20:03
  • Like many font-related settings, it inherits from the body tag. You can just drop it on there if you want all fonts anti-aliased. No idea what the rendering-performance impact of doing that might be in yesterday's mobile web view type situations is but for a node-webkit app intended for a kiosk-type scenario, it works great. – Erik Reppen Nov 20 '15 at 20:24
4

I use this on all sites and it covers most issues with font rendering.

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
mayhemds
  • 434
  • 1
  • 4
  • 13
4

I ran into a similar issue recently, same font family and size looked differently on Chrome, safari and Firefox. The chrome and firefox look especially thicker. This might not be the best way but worked for me

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Also, its worth a while to checkout different rendering engines. CSS What are -moz- and -webkit-?

Isaac Guan
  • 211
  • 3
  • 6
2

I think this is more a Windows problem than a browser problem. The same browsers render the same fonts much more smoothly on other operating systems such as Linux or Mac.

In Chrome, and by extension any webkit browser, you can use the following code to smooth your fonts:

-webkit-font-smoothing: antialiased;

or

-webkit-font-smoothing: antialiased !important;

Typically, I find that this doesn't do a whole lot. I think we'll just have to wait for Microsoft to do something about it.

Cameron Brown
  • 5,482
  • 3
  • 13
  • 13
  • "can use the following code to add anti-aliasing to your fonts" is not correct: `antialiased` only takes away the subpixel part from the default, which is `subpixel-antialiased` when it's not already `antialiased`. The subpixel part is the one responsible for colored edges. – Walter Tross Apr 09 '14 at 21:34
1

You may be able to fix this using the css property text-rendering.

Example:

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

You would probably want to use text-rendering:optimizeLegibilty.

More information here: MDN Text-Rendering

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
Ryan Ausel
  • 55
  • 7
  • 1
    I've tried `text-rendering:optimizeLegibilty`, and it gave me the same result as before in IE, Firefox, and Chrome. – Phoenix Logan Mar 31 '14 at 19:29
  • Unfortunately the browsers seem not to implement this correctly though it would be a _very_ handy property and the documentation on MDN says it would work. – Matteo B. Jul 09 '15 at 09:54
0

Im going to prefix this with its a hack and i dont like it, but it works

transform: rotate(-0.0002deg)

It makes fonts noticeably smooth, albeit slightly thinner

Luke Robertson
  • 1,592
  • 16
  • 21
0

It's late but did you ever try hint the font files? Go transfonter site and upload your font files. Then the options area check the auto hint option.

Abdullah
  • 1
  • 1