Unwanted Bolding Added to Font in Browsers

Unwanted Bolding added to font in browsers

OSX renders subpixel antialiased text a lot heavier than other platforms. This is particularly true of light-colored fonts on a dark background. Since you have white text on a black background, you're pretty much seeing this effect at its most extreme.

Is this a bug? I don't think so, it's just a crappy implementation of subpixel font rendering by Apple. It's just a guess, but I don't think they've ever fully gotten on board with subpixel rendering:

• They never used it on their mobile devices, even on the low-DPI non-retina iPhones/iPods/iPads - that's why you don't see this effect in iOS.

• They also don't (or didn't - haven't checked this with Mountain Lion) enable subpixel antialiasing in OSX on non-Apple external monitors - you have to run a command in the terminal to enable it. Presumably this could be because a very, very small number of LCD monitors don't have the red-green-blue subpixel order, which would mess up subpixel rendering.

• All of apple.com has -webkit-font-smoothing set to antialiased.

Opacity vs. -webkit-font-smoothing: antialiased

The reason that changing the opacity to .9999 (or anything other than 1) makes the fonts thinner is because non-opaque text is generally rendered with simple antialiasing, NOT subpixel antialiasing. You can get the same effect by using -webkit-font-smoothing: antialiased (in the browsers that support it).

Want some proof? Check out this extreme close-up of your original screenshot. Note the lack of colored fringing around the .9999999 text - that's a sign that the text is not using sub pixel antialiasing.

Anyway, I think you should either live with the ultra-heavy text on OSX browsers or use -webkit-font-smoothing: antialiased (and accept that Firefox will not render exactly the same). The opacity thing is a hack and could very well stop working in the future.

Safari font-weight issue , text too bold

For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.

Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.

See also topic about -webkit-font-smoothing property.

Chrome can't estimate bold font-weight

Afta Sans, at least as distributed via Font Squirrel, does not have a bold typeface at all. That’s why there are no specimens of Afta Sans as bold.

If you still request, via HTML or CSS, a bold typeface, most browsers will synthesize bold glyphs from regular typeface glyphs by algorithmically bolding them. This is not a requirement, just what browsers tend to do. The CSS Fonts Module Level 3 CR says, in describing font-weight: “Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Authors can explicitly avoid this behavior by using the ‘font-synthesis’ property.”

If you mean that some browser version on some platform does not do synthetic bolding, then that’s a decision by the browser vendor. In theory you could use the font-synthesis property to explicitly request for synthesis, but in practice it hardly affects anything; the defined initial value of the property means that synthetic bolding is allowed and, besides, most browsers do not support this property at all.

But the current version (33) Chrome on Windows does synthetic bolding.

If you are referring to the quality of synthetic bolding, then that’s inevitably browser-dependent. The page Say No to Faux Bold says: “What your users see can be better or worse depending on their browser and the fonts you start with. Some browsers, like Firefox, smear their bolds more, making a mess of display type. Other browsers, such as Chrome, smear their bolds very little, so that the distinction between bold and normal can be lost. None of these faux faces come close to what you can get from a real font.”

Page renders different font weights in navbar after scrolling

Most likely something is causing the browser to disable subpixel font antialiasing after you scroll the text. This could be any kind of CSS transformation, transparency, etc. On OSX, this will make the text look much less bold (see here for more on this: Unwanted Bolding added to font in browsers)

The solution is to pre-emptively disable subpixel font antialiasing. Apply this to your nav bar's CSS:

#navbar {
  -webkit-font-smoothing: antialiased;
}

Font rendering differently on all OS X browsers

That's not rendered "badly", it uses an overall different font rendering strategy than Windows. OS X tends to preserve the original shape of the character better, while Windows attempts to shove characters into a pixel grid. The results look different, not "worse". And yes, you need to take this into account as part of your design.

For reference, see A Closer Look At Font Rendering, Coding Horror: What's Wrong With Apple's Font Rendering? etc.

Inline elements shifting when made bold on hover

Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Finer Control of Text Accent/Boldness Through CSS

What is happining

The way fonts works now is that a font has various font-weights it can use. To use a font weight they need to be available in your users browser. Browsers usually do not have the fonts installed to support the 9 typical font-weights( 100, 200, 300, 400, 500, 600, 700, 800, 900 ). It will round up or down to the nearest one available.

What you can do about it

You could try to find a font that supports all the font-weights you want and import it. I found some on google fonts: https://fonts.google.com/?stylecount=18.

Modified code

All I changed was importing 'Montserrat' to your code and assigning the Montserrat font to your body.

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
body {  padding: 0;  margin: 0;  font-family: 'Montserrat', sans-serif;  font-weight: normal;  font-size: 15px;  font-style: normal;  font-variant: normal;  text-transform: none;  font-synthesis: none;  color: #383838;  width: 100%;  height: 100%;  -webkit-text-size-adjust: none !important;  -ms-text-size-adjust: none !important;  -moz-text-size-adjust: none !important;  border: none;  text-align: center;  text-rendering: optimizelegibility;  min-width: 300px !important;}
h3,h4,h5,h6 {  display: block;  font-family: inherit;  line-height: 1.1;  color: #000;  opacity: 1.0;  font-weight: normal;  text-align: center;  margin: 10px auto 6px auto;  font-size: 1em;}
h3 {  font-size: 1.05em;}
h4 {  font-size: 1.1em;}
h5 {}
h6 {  margin: .25em auto;}
.center-block {  display: block;  width: auto;  text-align: center;  margin-right: auto;  margin-left: auto;}
.test-boldness {  text-shadow: 1px 0.1px rgba(0, 0, 0, 0.23);}
.bold {  font-weight: 500;  color: #000;}
.bolder {  font-weight: 500;  color: #000;  text-shadow: 1px 0.1px rgba(0, 0, 0, 0.35);}
.boldest {  color: #000;  font-weight: 600;}
.test-boldness {  text-shadow: 1px 0.1px rgba(0, 0, 0, 0.35);}
.test-boldness-1pxsolid {  text-shadow: 1px 1px #999;}
div {  font-family: inherit;  color: #383838;}

<!DOCTYPE html>
<head></head><html>
<body>  <br />  <br />  <div class="center-block"><span class="test-boldness-1pxsolid">How Used: </span>Visible accent. This one has most blurring on all required OS/devices.</div>  <br />  <div>    <span style='font-weight: 300'>300</span>    <span style='font-weight: 400'>400</span>    <span style='font-weight: 500'>500</span>    <span class='test-boldness'>Custom 550</span>    <span style='font-weight: 600'>600</span>    <span style='font-weight: 700'>700</span>    <br />    <br />    <div class="center-block"><span class="test-boldness">How Used: </span>Visible accent. Less blurring/most uniform on required OS/devices. Is there a better way to do this?</div>    <br />    <br />    <div class="center-block"><span class="boldest">How Used: </span>Visible accent. This one is clearest but too bold, especially on some of the required OS/devices.</div>    <br />    <h3>Test Cases</h3>    <br />    <h3 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h3>    <h3 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h3>    <h3>TEST ABCDKTM test abcdktm</h3>    <h4 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h4>    <h4 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h4>    <h4>TEST ABCDKTM test abcdktm</h4>    <h5 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h5>    <h5 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h5>    <h5>TEST ABCDKTM test abcdktm</h5>    <h6 class="test-boldness-1pxsolid">TEST ABCDKTM test abcdktm-1pxsolid</h6>    <h6 class="test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</h6>    <h6>TEST ABCDKTM test abcdktm</h6>    <div class="center-block bold test-boldness">TEST ABCDKTM test abcdktm 0.1px Op LT 1</div>    <div class="center-block bold">TEST ABCDKTM test abcdktm</div>    <div class="center-block bolder test-boldness">TEST ABCDKTM test abcdktm font-weight: 500</div>    <div class="center-block bolder">TEST ABCDKTM test abcdktm font-weight: 500</div>    <div class="center-block boldest">TEST ABCDKTM test abcdktm font-weight: 600</div>    <div class="center-block boldest">TEST ABCDKTM test abcdktm font-weight: 600</div>
</body>
</html>

---

Related Topics