idan/gist:3890040

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    For reasons passing understanding, fonts.com has the most brain-dead approach to serving up webfonts, making each weight in a family its own family. On the face of things, that doesn't seem so bad, right?
Wrong.
Imagine that you're using two actually distinct families, say, Helvetica Neue and its lovely condensed cousin. For each family, you use two weights, plus maybe an italic cut. Now we have:

Helvetica Neue Light
Helvetica Neue Light Italic
Helvetica Neue Medium
Helvetica Neue Medium Italic
Helvetica Neue Condensed
Helvetica Neue Condensed Bold

Hunky dory, so far, right?
Now imagine that I'm building a website, and I like to keep my CSS very generic so I don't need to manually style the same thing in a ton of different places (read: Bad Idea.) For example, I like having code like:
body {
    font-family: "Helvetica Neue", sahs-serif;
    font-weight: 300;
}

strong {
   font-weight: 500;
}

em {
   font-variant: italic;
}

Sounds great, right? I can now use <strong>s and <em>s all over my markup and the browser will Do The Right Thing. Sadly this markup isn't possible with fonts.com.
No control over weights or italics

Each family I import is basically mistagged as having a weight of normal, or 400. That means that if I want to make something lighter or bolder, I have to remember to set a different @font-family instead of the appropriately semantic font-weight. Worse, if I'm using a normalize stylesheet, default user-agent styles will ask for heavier weights on some elements (h1) and italics on others (em). You know what happens when you ask a browser for bold or italics that it doesn't know it has? It renders them in faux-bold and italic.
That's right. Your browser basically feeds your type a lot of cookies until it gets morbidly obese, or it forcibly shears the text into an oblique slant, which looks about as good as it sounds.
The net effect is that you can't simply use an <em> or a <strong> anywhere you like. You have to know which actual font family you're using. Because each of the six font families above aren't actually related in CSS, it doesn't know that when I ask to bold some type that is set in Helvetica Condensed, it already has a bold weight, and it should use that one. If I tell it to use Helvetica's heavier weight for <strong>s, I have to remember to override that in every place that I use Helvetica Condensed. What a fucking pain.
Typekit gets this right

You ask for a family, you get the whole family under one font-family roof. Different weights are as CSS intended them: weights of the same family. Italic styles are font-variants of the same family. The browser can use this information to choose a decent font before butchering the one it has.