5 ms·

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

Unfortunate, but not surprising, to see it incorrectly implemented across the entire site: http://cl.ly/image/260h1Z302T24 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.

ambiguator 13y ago
Good eye.
hndl 13y ago
Can you elaborate what you mean by "load and reference each weight in your stylesheet" for us who aren't CSS savvy?
- 8ig8 13y ago
  Chris Coyier explains it here: http://css-tricks.com/watch-your-font-weight/ http://css-tricks.com/watch-your-font-weight/ Edit: Another explanation: http://alistapart.com/article/say-no-to-faux-bold http://alistapart.com/article/say-no-to-faux-bold
- elwell 13y ago
  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.
  - calinet6 13y ago
    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_define_font-weight_and_font-style_to_keep_your_css_simple/ http://www.456bereastreet.com/archive/201012/font-face_tip_d...
    - elwell 13y ago
      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.
- ryanwhitney 13y ago
  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-weights-and-styles-at-font-face-declaration/ http://coding.smashingmagazine.com/2013/02/14/setting-weight...
grinich 13y ago
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.
- celebril 13y ago
  >Chrome developer tools No Firefox love? :( Jonathan Kew (of XeTeX fame) is on the Mozilla Firefox team for goodness' sake.
  - calinet6 13y ago
    Then why for pete's sake do they still add 1 pixel of fuzz around every glyph?
    - gcp 13y ago
      What are you talking about?
      - calinet6 13y ago
        The font rendering at least on Firefox for Mac is atrocious. All icon fonts bleed by about 1 pixel near the font edges.
        weirdcat 13y ago
        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=2423776c8599b57c05dc4e9b5d8b36d4 http://snappy-app.com/s/show.php?pass=2423776c8599b57c05dc4e... Enlarged: http://snappy-app.com/s/show.php?pass=a1808d59f6efff53d1c847d67aaeb39a http://snappy-app.com/s/show.php?pass=a1808d59f6efff53d1c847... Am I missing something? [1] http://getbootstrap.com/components/ http://getbootstrap.com/components/

ambiguator 13y ago

Good eye.

hndl 13y ago

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

8ig8 13y ago
Chris Coyier explains it here: http://css-tricks.com/watch-your-font-weight/ http://css-tricks.com/watch-your-font-weight/ Edit: Another explanation: http://alistapart.com/article/say-no-to-faux-bold http://alistapart.com/article/say-no-to-faux-bold
elwell 13y ago
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.
- calinet6 13y ago
  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_define_font-weight_and_font-style_to_keep_your_css_simple/ http://www.456bereastreet.com/archive/201012/font-face_tip_d...
  - elwell 13y ago
    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.
ryanwhitney 13y ago
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-weights-and-styles-at-font-face-declaration/ http://coding.smashingmagazine.com/2013/02/14/setting-weight...

grinich 13y ago

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.

celebril 13y ago
>Chrome developer tools No Firefox love? :( Jonathan Kew (of XeTeX fame) is on the Mozilla Firefox team for goodness' sake.
- calinet6 13y ago
  Then why for pete's sake do they still add 1 pixel of fuzz around every glyph?
  - gcp 13y ago
    What are you talking about?
    - calinet6 13y ago
      The font rendering at least on Firefox for Mac is atrocious. All icon fonts bleed by about 1 pixel near the font edges.
      - weirdcat 13y ago
        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=2423776c8599b57c05dc4e9b5d8b36d4 http://snappy-app.com/s/show.php?pass=2423776c8599b57c05dc4e... Enlarged: http://snappy-app.com/s/show.php?pass=a1808d59f6efff53d1c847d67aaeb39a http://snappy-app.com/s/show.php?pass=a1808d59f6efff53d1c847... Am I missing something? [1] http://getbootstrap.com/components/ http://getbootstrap.com/components/