550128 - Overly bold text on a lot of pages

Status: RESOLVED INVALID

(Core :: Graphics, defect)

Description

[u88484]

Attachment: Test case with Arial font

Some text on a lot of sites are more bold then what they were before direct2d landed.  For reference, the original bug relating to bugzilla was bug 548975.

The following quote is why this happens.

"This correct rendering, it's caused by the markup which is requesting a font
that's bolder than the bold face of Arial.  The testcase is equivalent to the
markup below:

<div class="style: font-family: Arial; font-weight: bold;">
  <b>This is very bold with Direct2D enabled</b>
</div>

The <b> tag is has 'font-weight: bolder'.  Basic font families in GDI consist
of plain, italic, bold, bold italic font faces.  But DirectWrite allows for a
full set of weights and widths.  In this case, Arial Black is included in the
Arial family so there is a font face that is bolder than the bold face when
DirectWrite is used but not when GDI is used.

The page can be fixed with:

  b { font-weight: bold; }
"

NOTE: This also happens with fonts other than Arial and the issue is sometimes hard to pick out with small sized text...hence the large font size used in the test case.

A list of sites I see this happen on:
http://www.bugzilla.mozilla.org - Using the dusk theme the bug numbers and footer links are more bold
http://mail.google.com - The 'Archive' button's text is more bold
http://www.ebay.com/ - Text within the top right buttons (buy, sell, ...)
http://www.neowin.net/ - Text within the top right buttons (News, Forums, Spy, ...)
http://www.msnbc.msn.com/ - "Top Stories" time and date info at the top left
http://www.google.com/finance - Left column menu links
http://slashdot.org/ - Story titles

Comment 1

[u88484]

Attachment: Screenshot of bugzilla, slashdot and gmail

Comment 2

[Boris Zbarsky [:bzbarsky]]

Kurt, given that comment 0 explains why this is actually the correct behavior.... what is this bug about?

Comment 3

[John Daggett (:jtd)]

So I don't think this is really a bug.  Differences in fonts on different platforms already cause rendering differences, I think this really falls in that category. 

If the thought is that Arial is too commonly used to allow the black face (Arial Black on XP) to be included in the family, then there are a couple solutions:

1. Redefine the default styles for things tags like 'b'
2. Special-case Arial, basically make it behave the same as XP

These may seem appealing but the downside is that in the long-run you'll have a situation where rich platform font families with lots of weights will behave one way and Arial will behave slightly differently.

I think it's better to evangelize the right solution (defining style rules that use 'bold' instead of 'bolder') rather than try to swizzle the rendering engine to deal with the rendering difference.

Comment 4

[u88484]

(In reply to comment #2)
> Kurt, given that comment 0 explains why this is actually the correct
> behavior.... what is this bug about?

I was asked by Reed in bug 548975 comment 20 to file a separate bug and on IRC
discussed to file it for the core issue.  Almost every site that I've been too
lately has this bug just some are not as noticeable.

I'm hoping that something may be done to fix the core issue.  Filing Tech
Evangelism bugs for every site that used this coding style would be ridiculous
and no where near feasible.

Comment 5

[u88484]

John, I'm sure what the most popular fonts that are used on most websites all but another font that displays this is Helvetica and I know Geneva doesn't.  I only know this because bugzilla uses those three and I tested all three while making my test case.

Are there any other browsers that have direct2d/direct write rendering so I can see how they display these?  Do most web designers even know that there is a bolder since the coding style didn't have any effect before and now Firefox might be the only one that displays some fonts way too bold.

What ever you guys come up with is fine by me.  I'm just seeing if there is something relatively simple that can be done here so that a lot of sites don't have to fix code on their sites just because of Firefox.

Comment 6

[Bas Schouten (:bas.schouten)]

(In reply to comment #5)
> John, I'm sure what the most popular fonts that are used on most websites all
> but another font that displays this is Helvetica and I know Geneva doesn't.  I
> only know this because bugzilla uses those three and I tested all three while
> making my test case.
> 
> Are there any other browsers that have direct2d/direct write rendering so I can
> see how they display these?  Do most web designers even know that there is a
> bolder since the coding style didn't have any effect before and now Firefox
> might be the only one that displays some fonts way too bold.
> 
> What ever you guys come up with is fine by me.  I'm just seeing if there is
> something relatively simple that can be done here so that a lot of sites don't
> have to fix code on their sites just because of Firefox.

Helvetica family is substituted to Arial on windows.

I honestly don't think inserting a hack to break firefox is the right thing to do here. Although I must admit I don't have a good answer for the problem.

Comment 7

[Alex]

If a page asks for a font face that's bolder than bold, and the browser can render that weight, then why shouldn't it? Surely it's a fault of the website if they're relying on the browser not using the face they've specified.

Comment 8

[u88484]

Resolving WONTFIX then.  Thanks for the input!

Comment 9

[Dão Gottwald [:dao]]

"not a bug" implies invalid.

Comment 10

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I'm OK with resolving this INVALID for now, but we need to keep track of how much negative reaction there is to this. If there's a lot, we may want to consider a special Arial-only hack.

Comment 11

[Ryan VanderMeulen [:RyanVM]]

At least worthy of a blog post?

Comment 12

[u88484]

(In reply to comment #10)
> I'm OK with resolving this INVALID for now, but we need to keep track of how
> much negative reaction there is to this. If there's a lot, we may want to
> consider a special Arial-only hack.

What kind of keeping track?  I have a few more scenarios I can add to the list I added in comment 0.  Like reply to a wall post on facebook, the comment button is barely readable.

Comment 13

[surrealzx]

Resolved? This is a huge bug. People have to turn HA off to get rid of this bug, making Firefox Slow and ugly.

I guarantee Firefox lost a lot of users to Chrome just because of this immensely needless bug. With new versions, it's supposed to get better not worse.

Comment 14

[Jesse Beach]

This is most certainly a bug. I'm using a bold font face on a site. Chrome (and Safari and IE) correctly displays the font face with 1x bolding. Firefox displays the font face with 2x bolding. I can set font-weight to normal to get Firefox down to 1x bolding, but then every other browser displays the text as unbolded (normal weight). This is the first time I've ever wanted conditional comments for Firefox. Now I'm forced to leave the text double-bolded in Firefox only and it looks terrible.

The same effects are seen with an italic font face. Firefox double italicizes the font face. Now all italicized text on my site is 2x italicized in Firefox only because I can't target this browser specifically to fix the issue.

Comment 15

[Jonathan Kew [:jfkthame]]

(In reply to comment #14)
> This is most certainly a bug. I'm using a bold font face on a site. Chrome
> (and Safari and IE) correctly displays the font face with 1x bolding.
> Firefox displays the font face with 2x bolding.

Your minimal testcase demonstrating the problem, please?

All the examples I've seen so far essentially boil down to using styles that specify a font-weight greater than bold (700), usually as a result of nesting a <strong> or similar tag inside something that's already styled as bold. Browsers that don't support more levels of boldness than the simplistic "regular/bold" dichotomy from the GDI world will not distinguish such "bolder than bold" styling from simple "bold", but under DirectWrite it's possible for a font family to have more than two weights and so Firefox does support this.

This "problem" is not unique to FF on Windows with hw/acc enabled; other environments such as Linux or OS X may have font families with a large number of weights, so similar issues may arise depending on the particular fonts in use. The solution is to tidy up the styles so that when you want "bold", font-weight is resolved to 700 (standard bold value), and not to some higher value.

Comment 16

[Jesse Beach]

I put this page together. It needs to be on the site because we're using custom @font-face fonts associated with the URL.
http://www.drupalgardens.com/documentation/font-weight-minimum-test-case-mozilla-bug-report

I thought I'd got around this issue by setting font-weight to inherit, which eliminates the double bolding in FIrefox. But then it eliminates bolding altogether for the same elements in all other browsers.

How to trigger the double bolding:
https://skitch.com/jesse.beach/fe7c7/disable

Comment 17

[Jonathan Kew [:jfkthame]]

It looks to me like Firefox is behaving correctly as per CSS3 Fonts.

The root of your problem is that the <strong> tag (and others) requests the font-family 'Helvetica Neue W01 75 Bold', which was created using an @font-face rule in the fast.fonts.com stylesheet you've imported, but lacks correct descriptors. That rule basically reads:

  @font-face{
  font-family:"Helvetica Neue W01 75 Bold";
  src:url(<omitted>);
  }

This declares a single face (which happens to be a Bold design) in this font family, but it does not specify a font-weight descriptor, and therefore the face is considered to have the default weight (400). If your CSS uses this font family, and also specifies a font-weight of 700 (bold), then Firefox is correct to take the downloaded font face and apply synthetic bolding to it.

Your "italic" is getting artificially obliqued (so that it leans too much) for the same reason; the "italic" @font-face rule fails to include a font-style:italic descriptor, and therefore is considered to be the Regular face of its (single-member) family.

It would be better coding style for all four of the Helvetica Neue faces used on the page to be set up as a single font-family, with appropriate descriptors to distinguish them. But if they really need to be kept as individual families (perhaps for compatibility with older browsers), they must at least be given proper font-style and font-weight descriptors if you want to avoid problems like this. Declaring the Bold face as font-weight:bold in its @font-face rule will prevent Firefox artificially emboldening it further when the CSS style calls for bold weight.

Comment 18

[Jesse Beach]

Well now you've got me thinking that Chrome is doing it wrong!  Thanks for the details, I really appreciate your time writing that up.  I'll need to go to Monotype and see if they'll let me edit the code they deliver in such a way. Last I remember I can't add font-weight or font-style through their service, but that's a problem I'll need to solve with them.

Comment 19

[John Daggett (:jtd)]

Forwarded to a contact at Monotype to see if we can get them to fix this.

Comment 20

[Jesse Beach]

Thank you John Daggett.

Comment 21

[Brad Kemper]

This is breaking the Web. Other browsers seem to have `strong, b { font-weight: bold; }` (`bold`, not `bolder`). Firefox (Mozilla) seems to be the only one that is making things extra bold when a <b> tag is a dependent of something that is already bold.

Comment 22

[Jonathan Kew [:jfkthame]]

"This is breaking the Web" is a pretty strong claim (and is not obviously borne out by any flood of bug reports that I've noticed, at least).

The recommendation that <b> and <strong> have "font-weight:bolder" (not "bold") has been around a long time, for example https://www.w3.org/TR/CSS2/sample.html. And it's still present in the current WHATWG spec: https://html.spec.whatwg.org/#phrasing-content-3.

So if anything, this looks like an issue best raised with the HTML and/or CSS working groups.

If there are specific examples where Firefox renders incorrectly (given that "bolder" is the correct font-weight for these elements, per the HTML5 spec), then please file specific bugs accordingly. But if there are sites that simply look ugly as a result of (correct) rendering of bolder elements in an already-bold context, that should be reported to those sites as poor design.