CODEWITHSUNDEEP
cssfirefoxfonts
okonomichiyaki
okonomichiyaki

Reputation: 8485

large text renders blurry in Firefox but sharp in Chrome

I'm working on a very simple web app and want to display some text in a very large font size. When I open the page in Firefox, the text renders quite blurry or fuzzy at the edges, while in Chrome it is displayed crisp and sharp. The HTML/CSS to reproduce this is very simple, I was originally using a webfont but even switching to simple Arial I see the same: https://jsfiddle.net/2vwjpuc4/

Here's some screenshots:

Screenshot 1 Screenshot 2

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
</head>
<body>
    <div id="results">0.68</div>
</body>
</html>

#results {
    font-size: 800px;
    font-family: 'Arial';
}

I haven't done much front end development, so bear with me. I know there are a lot of similar questions, but I wasn't able to find anything exactly covering this situation for large text on Firefox. Normal sized text in Firefox on this computer looks fine, indistinguishable from Chrome. Btw this is a Windows 10 PC.

Is there a reliable way to render large text like this and have it look decent in Firefox? I'm open to any suggestions, I don't have many constraints on this project.

Thanks for any help or advice.

Upvotes: 1

Views: 1048

Answers (1)

Rene van der Lende
Rene van der Lende

Reputation: 5281

After testing several browsers (Chorm/Edge/Firefox) it seems that this is a Firefox specific problem (quirk? feature?) There is no proper workaround for your specific problem, -webkit-font-smoothing, -moz-osx-font-smoothing, font-smooth have no effect.

When at all possible you could try using SVG text in this case as SVG (probably) uses entirely different graphical routines and you can use the SVG text-rendering attribute to tailor the crispiness (somewhat) to your needs.

Here a snippet with a comparison of plain HTML versus SVG text (need SO full-page view):

html, body, svg {
  height: 100%; font-family: 'Arial';
}

#results {
    font-size: 800px;
    font-family: 'Arial';
}
<div id="results">0.68</div>

<svg viewBox="0 0 140 22" xmlns="http://www.w3.org/2000/svg">
  <text y="12" text-rendering="geometricPrecision">0.68</text>
</svg>

Upvotes: 2

Related Questions