Hacker News Reader

Comment by ryanwhitney | Hacker News Reader

Unfortunate, but not surprising, to see it incorrectly implemented across the entire site: http://cl.ly/image/260h1Z302T24

If you want to use multiple font weights, you have to load and reference each weight in your stylesheet. Otherwise, you end up with a browser-added faux-bolding instead of the actual bold font.

View on HN

Someone should make a Chrome developer tools extension to catch stuff like this. It's incredible how many people mess it up and don't realize it, simply because developers still aren't accustomed to good typography on web pages.

>Chrome developer tools

No Firefox love? :(

Jonathan Kew (of XeTeX fame) is on the Mozilla Firefox team for goodness' sake.

Then why for pete's sake do they still add 1 pixel of fuzz around every glyph?

What are you talking about?

The font rendering at least on Firefox for Mac is atrocious. All icon fonts bleed by about 1 pixel near the font edges.

I haven't noticed it, so I took some screenshots. Here's how Glyphicons [1] render for me (FF 27.0.1, Mac):

http://snappy-app.com/s/show.php?pass=2423776c8599b57c05dc4e...

Enlarged:

http://snappy-app.com/s/show.php?pass=a1808d59f6efff53d1c847...

Am I missing something?

[1] http://getbootstrap.com/components/

Can you elaborate what you mean by "load and reference each weight in your stylesheet" for us who aren't CSS savvy?

Chris Coyier explains it here:

http://css-tricks.com/watch-your-font-weight/

Edit: Another explanation:

http://alistapart.com/article/say-no-to-faux-bold

the way most people do it is to use

  font-family: blah;

on every class that needs it. this is because @font-face isn't supported completely when using simply

  font-weight: blah;

to differentiate between different @font-face family groups.

If you define your weights correctly when loading your @font-faces, then weight works as expected: http://www.456bereastreet.com/archive/201012/font-face_tip_d...

That technique is actually what I'm referring to. I've seen that not work before; sorry don't have details. I just don't mess with that anymore and instead use every font-family explicitly when needed.

A separate font file is required for every style and weight of a typeface that you want to use. For example, to use four unique styles of a typeface on a site (say Regular, Italic, Bold, and Bold Italic), you would need to import four font files (ClearSans-Regular, ClearSans-Italic, ClearSans-Bold, ClearSans-BoldItalic).

If you give a chunk of type a style or weight that you haven't loaded the appropriate font file for, browsers will add weight to or slant the text themselves. ("faux-bold", "faux-italic"). This gives you ugly, rough, less readable text that counteracts the primary reasons to use a web font in the first place. Default CSS styles (H1 automatically adding font-weight: bold;) can also cause this in some cases. [See link]

There's two main (maybe three) approaches to implementing them correctly, Laura Franz does a good job of describing them here: http://coding.smashingmagazine.com/2013/02/14/setting-weight...

Good eye.

Reply on news.ycombinator.com