Overly bold text on a lot of pages

RESOLVED INVALID

Status

()

RESOLVED INVALID
9 years ago
7 months ago

People

(Reporter: u88484, Unassigned)

Tracking

Trunk
All
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

9 years ago
Created attachment 430239 [details]
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
(Reporter)

Comment 1

9 years ago
Created attachment 430244 [details]
Screenshot of bugzilla, slashdot and gmail
Kurt, given that comment 0 explains why this is actually the correct behavior.... what is this bug about?

Comment 3

9 years ago
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.
(Reporter)

Comment 4

9 years ago
(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.
(Reporter)

Comment 5

9 years ago
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.
(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

9 years ago
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.
(Reporter)

Comment 8

9 years ago
Resolving WONTFIX then.  Thanks for the input!
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → WONTFIX
"not a bug" implies invalid.
Resolution: WONTFIX → INVALID
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.
At least worthy of a blog post?
(Reporter)

Comment 12

9 years ago
(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

7 years ago
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

7 years ago
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.
(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

7 years ago
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
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

7 years ago
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

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

Comment 20

7 years ago
Thank you John Daggett.

Comment 21

7 months ago
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.
"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.
You need to log in before you can comment on or make changes to this bug.