Bug 19369 - Text rendering issues on Windows
Text rendering issues on Windows
Status: REOPENED
Product: webplatform.org
Classification: Unclassified
Component: skin
unspecified
PC other
: P2 normal
: ---
Assigned To: Doug Schepers
public-webplatform-bugs list
:
Depends on: 19423
Blocks:
  Show dependency treegraph
 
Reported: 2012-10-08 21:12 UTC by Scott Cranfill
Modified: 2012-12-12 21:23 UTC (History)
3 users (show)

See Also:


Attachments
Combination shot of text rendering issues described in this bug. (11.04 KB, image/png)
2012-10-08 21:12 UTC, Scott Cranfill
Details
Bitter Webfonts (91.84 KB, application/zip)
2012-10-16 05:12 UTC, Sébastien Desbenoit
Details
BitterBold-Webfont.ttf rendering on Windows XP - Chrome (169.10 KB, image/jpeg)
2012-10-31 14:20 UTC, Sébastien Desbenoit
Details
Bitter-Bold.ttf rendering on Windows XP - Chrome (159.47 KB, image/jpeg)
2012-10-31 14:20 UTC, Sébastien Desbenoit
Details
New Bitter-Bold font package (59.17 KB, application/zip)
2012-12-05 09:53 UTC, Sébastien Desbenoit
Details
Gudea font (308.34 KB, application/zip)
2012-12-12 20:37 UTC, Sébastien Desbenoit
Details
Bitter-Regular and Bitter-Italic (203.69 KB, application/zip)
2012-12-12 21:23 UTC, Sébastien Desbenoit
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Scott Cranfill 2012-10-08 21:12:39 UTC
Created attachment 1211 [details]
Combination shot of text rendering issues described in this bug.

There are a myriad of issues with type rendering on the site, both with Gudea (the sans-serif) and Bitter (the serif). I'm observing these in both Chrome 24 and Firefox 15 on Windows 7. (IE has its own major problem: not loading the webfonts at all. That deserves its own bug.)

* Bitter frequently has inconsistent letter heights. For a very obvious example, see "SVG" in the <h2>s on the attached shot. The 'V' is noticeably taller. Also see the word "CHAT" in the main nav bar on any page (also in attachment). Can be remedied in most cases by adjusting the font-size value up or down by one pixel. ('h2' from 20 to 21px and '#sitenav a' from 16 to 17px)

* The bold variant of Gudea at the typical body copy size of 14px looks dreadful. (See attachment.) Most notably, the counters of 'a's and 'e's get filled in. This one is a little trickier to deal with, as increasing or decreasing the size of all body copy has a major impact site-wide, moreso than tweaking display sizes by one pixel. I think the best solution might simply be to pick a new sans-serif webfont that is better hinted for setting at body sizes.
Comment 1 Lea Verou 2012-10-10 21:19:41 UTC
Looks like Bitter and Guidea have bad hinting, which is common in free web fonts. Not sure there’s much we can do here, except completely changing the design :(

Hopefully these issues will be somewhat mitigated if we increase the font size, as suggested by #19423
Comment 2 Scott Cranfill 2012-10-10 21:27:54 UTC
(In reply to comment #1)
> Looks like Bitter and Guidea have bad hinting, which is common in free web
> fonts. Not sure there’s much we can do here, except completely changing the
> design :(
> 
> Hopefully these issues will be somewhat mitigated if we increase the font
> size, as suggested by #19423

With all due respect (sincerely), do you consider changing the font size by 1 pixel (especially in the main nav and headings) to be "completely changing the design"? I gave you very specific suggestions that would completely remedy the issue. I can provide before and after shots with testing done in Firebug, as well, if that would be helpful.

(I now realize that I could have been more clear in my initial bug: I did test these changes with Firebug, and they do indeed correct the issue.)

Yes, increasing the body copy size to 15px would fix the issue. If you go bigger than that, I would simply encourage you to check both the normal and bold variants at whatever size you choose in Windows. it's often the case that 1px up or down will solve the issue.
Comment 3 Lea Verou 2012-10-10 21:31:01 UTC
(In reply to comment #2)
> (In reply to comment #1)
> > Looks like Bitter and Guidea have bad hinting, which is common in free web
> > fonts. Not sure there’s much we can do here, except completely changing the
> > design :(
> > 
> > Hopefully these issues will be somewhat mitigated if we increase the font
> > size, as suggested by #19423
> 
> With all due respect (sincerely), do you consider changing the font size by
> 1 pixel (especially in the main nav and headings) to be "completely changing
> the design"? I gave you very specific suggestions that would completely
> remedy the issue. I can provide before and after shots with testing done in
> Firebug, as well, if that would be helpful.
> 
> (I now realize that I could have been more clear in my initial bug: I did
> test these changes with Firebug, and they do indeed correct the issue.)
> 
> Yes, increasing the body copy size to 15px would fix the issue. If you go
> bigger than that, I would simply encourage you to check both the normal and
> bold variants at whatever size you choose in Windows. it's often the case
> that 1px up or down will solve the issue.

Apologies, I didn’t realize you had actually tested this and that it fixes the issue. Indeed, that doesn't sound like it would be a problem. :)
Comment 4 Scott Cranfill 2012-10-10 21:33:40 UTC
(In reply to comment #3)
> Apologies, I didn’t realize you had actually tested this and that it fixes
> the issue. Indeed, that doesn't sound like it would be a problem. :)

Thanks :) And my apologies; I'm still getting the hang of how to file bugs in a major collaborative project such as this. I would be glad to perform the actual implementation, if you could guide me as to how to go about doing that.
Comment 5 Lea Verou 2012-10-10 21:38:12 UTC
(In reply to comment #4)
> (In reply to comment #3)
> > Apologies, I didn’t realize you had actually tested this and that it fixes
> > the issue. Indeed, that doesn't sound like it would be a problem. :)
> 
> Thanks :) And my apologies; I'm still getting the hang of how to file bugs
> in a major collaborative project such as this. I would be glad to perform
> the actual implementation, if you could guide me as to how to go about doing
> that.

I’m afraid you can’t yet :(
It requires changes in the CSS and WebPlatform is not yet up on a remote repo where it could accept pull requests in.
Comment 6 Scott Cranfill 2012-10-11 12:46:16 UTC
(In reply to comment #5)
> (In reply to comment #4)
> > (In reply to comment #3)
> > > Apologies, I didn’t realize you had actually tested this and that it fixes
> > > the issue. Indeed, that doesn't sound like it would be a problem. :)
> > 
> > Thanks :) And my apologies; I'm still getting the hang of how to file bugs
> > in a major collaborative project such as this. I would be glad to perform
> > the actual implementation, if you could guide me as to how to go about doing
> > that.
> 
> I’m afraid you can’t yet :(
> It requires changes in the CSS and WebPlatform is not yet up on a remote
> repo where it could accept pull requests in.

Understood. I'll keep filing bug reports, then!
Comment 7 Sébastien Desbenoit 2012-10-15 15:57:00 UTC
For Chrome fonts issus, this line in body{} should smoother the render: 
 -webkit-font-smoothing: antialiased;
Comment 8 David Kirstein (Frozenice) 2012-10-15 16:53:27 UTC
I tested "-webkit-font-smoothing: antialiased;" but didn't see any improvements (also tried the other values for that property).

I played around with the CHAT <a> element. Something that seemed to help was removing the font-weight. Normal, italic and even italic bold looked OK in my Chrome and FF on Win7, but just bold has the mentioned problems. Also, as already mentioned, another thing that helped was finding a font-size that looked ok.
Comment 9 Sébastien Desbenoit 2012-10-16 05:10:35 UTC
It looks like it could be a woff issue, perhaps a too compressed file. It's a problem that occurs when we use google webfonts and while I don't know if the website is using this service it's just an hypothesis. 
The best solution is to download the OTF and to generate a new woff file and use the whole font-face propriety without Google Webfonts. I'll enclosed a full package. 

Here's the code 
@font-face {
    font-family: 'bitterbold';
    src: url('bitter-bold-webfont.eot');
    src: url('bitter-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bitter-bold-webfont.woff') format('woff'),
         url('bitter-bold-webfont.ttf') format('truetype'),
         url('bitter-bold-webfont.svg#bitterbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
Comment 10 Sébastien Desbenoit 2012-10-16 05:12:23 UTC
Created attachment 1229 [details]
Bitter Webfonts
Comment 11 Lea Verou 2012-10-16 09:58:28 UTC
(In reply to comment #10)
> Created attachment 1229 [details]
> Bitter Webfonts

Hi Sebastien,

Thank you for this. Have you verified it solves the problems described in this bug report?
Comment 12 Sébastien Desbenoit 2012-10-16 10:00:32 UTC
No, I didn't for the simple raison I can't access to the css to test. The patch is based on an hypothesis. But I can test it if I have a copy of the css :)
Comment 13 Lea Verou 2012-10-16 10:04:41 UTC
(In reply to comment #12)
> No, I didn't for the simple raison I can't access to the css to test. The
> patch is based on an hypothesis. But I can test it if I have a copy of the
> css :)

The main CSS file is: http://docs.webplatform.org/w/skins/webplatform/screen.css
Comment 14 Paul Irish 2012-10-18 10:16:47 UTC
In Chrome and Firefox you can live-edit the css in a free-form text editor (Sources panel and Scratchpad, respectively). I've used those for testing css changes.
Comment 15 Sébastien Desbenoit 2012-10-18 10:18:44 UTC
Thanks Paul, I'll test it as soon as Paris Web is over :) (I never think enough about Firebug).
Comment 16 Sébastien Desbenoit 2012-10-25 08:47:38 UTC
Paul > I can't run the tests with firebug as the css is hidden "Access to restricted URI denied". 

All > I used this a week ago for another website and it fixed the rendering. The solution is to exchange svg and woff links place in font-face. Again, I'm sorry i couldn't test it on webplatform. http://www.vandersterren.com/blog/2012/04/font-embedding-chrome-and-anti-aliasing/
Comment 17 Sébastien Desbenoit 2012-10-31 14:19:06 UTC
The problem come from the native font file as you can see on the attachments they are rendering issues with bitter-bold-webfont.ttf when Bitter-Bold.ttf doesn't show any sign of problems with Windows XP - Chrome. 

IF you want to see it by yourselves:
http://desbenoit.net/123581321/BitterBold-Native.html
http://desbenoit.net/123581321/BitterBold-Webplatform.html
Comment 18 Sébastien Desbenoit 2012-10-31 14:20:04 UTC
Created attachment 1241 [details]
BitterBold-Webfont.ttf rendering on Windows XP - Chrome
Comment 19 Sébastien Desbenoit 2012-10-31 14:20:31 UTC
Created attachment 1242 [details]
Bitter-Bold.ttf rendering on Windows XP - Chrome
Comment 20 Scott Cranfill 2012-10-31 14:31:04 UTC
(In reply to comment #17)
> The problem come from the native font file as you can see on the attachments
> they are rendering issues with bitter-bold-webfont.ttf when Bitter-Bold.ttf
> doesn't show any sign of problems with Windows XP - Chrome. 
> 
> IF you want to see it by yourselves:
> http://desbenoit.net/123581321/BitterBold-Native.html
> http://desbenoit.net/123581321/BitterBold-Webplatform.html

Fascinating... It almost seems like the two versions are triggering entirely different rendering modes. I observe the same effect in Firefox 16, for what it's worth.
Comment 21 Sébastien Desbenoit 2012-12-05 09:53:51 UTC
Created attachment 1256 [details]
New Bitter-Bold font package

Here's a new package of the Bitter Bold font for web. 

Before going live, you can see the changes here: 

Native Bitter Bold: http://desbenoit.net/123581321/BitterBold-Native.html
Webplatform Bitter Bold: http://desbenoit.net/123581321/BitterBold-Webplatform.html
Package ttf Bitter Bold: http://desbenoit.net/123581321/BitterBold-test.html
Package woff Bitter Bold: http://desbenoit.net/123581321/BitterBold-test-woff.html
Comment 22 Sébastien Desbenoit 2012-12-12 09:00:50 UTC
Hi all, 

Could anyone test or upload the new webfont versions on WPD? 

Thanks a lot.
Comment 23 Sébastien Desbenoit 2012-12-12 20:37:54 UTC
Created attachment 1278 [details]
Gudea font

Here's a package for an updated Gudea font. I applied the same treatment as Bitter
Comment 24 Sébastien Desbenoit 2012-12-12 21:23:56 UTC
Created attachment 1281 [details]
Bitter-Regular and Bitter-Italic

Update with italic and regular bitter