Tag: typography



CSS Font Weights Explained

Those not too hip with typography might at one point wonder, “Why are the font weights on a ranking scale from 100 to 900?” Where are those numbers coming from? It was actually an interesting questions brought up to me recently that I hadn’t thought much of. After all, no one’s breaking the internet over not knowing why font-weight can take a numerical value from 0 to 900 and why anyone would want to use the numerical scale over the (arguably) more intuitive, lighter, normal, bold, bolder scale.

There are a surprising, delightful and numerous amount of things about CSS that harkens back to design theory and borrows from typography principles and font-weight’s number system is a pale echo of a type family’s numbering system. Before I get to explaining the numbers, we have to explore a few terms related to typography first.

A type family (or font-family as far as CSS properties go) is a typeface and all of its total variants. Where you might have Helvetica identified as a type family. Inside that family you’ll have members like Helvetica Roman, Helvetica Italic, Helvetica Bold.

Variants within a type family are different styles of that same typeface. For example, the Italics for a typeface is an example of a variant. Small caps style within a type family is another example of a variant. Within CSS, we declare different variants for our font-families by using font-variant.

Weights within a type family are generally considered how thick or thin a typeface appears. On the lowest end of the scale, you have the thinnest of thin characters. On the other side, you have big, bold and thick characters. As you’ve probably guessed by now, font-weight is what you generally use to affect the weight of your web typefaces. And it is with font-weight that we’re going to dive into the numbering system.

The Typography Numbering System

Most large type families have a numbering system that dates back to some of the earliest examples of variant and weight-rich typefaces such as Univers and Helvetica. These typefaces typically have family members that run the gamut of thick, thin, condensed, wide, and so on. So a type numbering system was devised to easily catalog and describe the various members of–let’s say, Univers. Where you could say, Univers Normal, you could also say Universe 430. Why does 430 mean normal?

  1. The first digit identifies the weight of a typeface.
  2. The second digit identifies its amount of compression (ex. condensed, ultrawide, etc).
  3. The third digit signifies the stance (roman or italic).

Typically in the numbering system, 400 is identified as “normal” weight, 30 signifies normal compression, and 0 would mean that the typeface is roman or upright. So that is what we mean by Univers 430. It is of the type family, Universe. It is normal in weight, normal in compression and upright roman in stance.

Another example might be Times New Roman 631. This would mean a Bold and Italic Times New Roman. 600 typically represents bold, 30 would indicate normal compression and the 1 identifies it as an italic variant.

Last example, Helvetica 620. This is Helvetica bold, upright and condensed. The 600 indicates Bold, the 2 is meant to represent condensed, and the 0 identifies this as an upright variant.

So that’s the typography numbering system in a nutshell. Many designers typically prefer to identify the typefaces by name–because many of us are not creatures particularly fond of nondescript numbering systems. I don’t blame you, I’m not hip on it most of the time either. But even I have to admit to its simplified, condensed elegance. However, it should be more obvious now how and where font-weight gets its numbers and considering how many web fonts have large swaths of weights, why not keep in mind what the numbers mean?

100 – The lightest of the light.
200 – Light.
300 – Book.
400 – Normal.
500 – Semibold.
600 – Bold.
700 – Extra Bold.
800 – Ultra Bold.
900 – Black.

Maybe some day CSS spec will catch up to the type family numbering system and we’ll be declaring our font-families as Proxima Nova 431. For more fabulous insights on typography as well as a quick and useful read about typefaces, check out Erik Spiekermann and E.M. Ginger’s, Stop Stealing Sheep & Find Out How Type Works (2nd Edition).

Resources

Fontfeed, It’s All in the (Type) Family
Great resource that showcases a more visual chart of the original font numbering system with Univers’ two digit example. Also takes a jab at Helvetica and I’m always for a bit of that.



Two Easy Ways to Pair Typefaces

Typography is the love of most graphic and web designers. But for some, it can be an intimidating task. Pairing together the right typefaces to create a cohesive design comes from years of experience studying type and understanding how one typeface interacts with another can depend on a huge amount of factors. Here are some tips for combining and using different typefaces on the web to help get the edge off of typography.

There are many different methods that designers use to determine typeface combinations. I will go over some of them in this post and hopefully give you some ideas on how you can pair off type for your next project.

Method 1: Type Systems and Super Families

Type Super Families are typefaces that have a large variety of variations. Within a super family, one typeface could have different variations for body text, headers, subheaders, italics, there may even be a serif and sans-serif version of the type. One example of a type super family is Lucida:

Lucida Std, Lucida Bright, Lucida Grande.

Lucida Std, Lucida Bright, Lucida Grande.

Super families generally contain typefaces with relatively the same structures and proportions, thus ensuring the types in a super family are harmonious but at the same time have elements that allow them to stand out from one another. Some examples of super families in use:

fago_superfamily

meta_superfamily

Method 2: Compare and Contrast

Contrast in choosing typefaces can mean a number of things. What it achieves is essentially an accentuation of the type that you use. You can mix and match things in different ways to achieve contrast. For instance, you might want to pair a sans-serif typeface with a serif. Or round typeface with an angular one. Maybe you could also mix a fun type with a neutral one.

When relying on contrast for your type choices, try to focus on weight, scale, proportion, and texture. Remember that you are not looking to draw attention to the type by highlighting their differing personalities. Things need to be done in moderation when choosing type too. Try looking for elements that help discern hierarchy while also harmonizing the text.

Some examples, using contrast by paring a sans-serif with a serif:

frutiger_sabon

garamond_futura

And an example of a distinct type paired together with a neutral one:

clarendon_din

With a little bit of time and thought, pairing typefaces together won’t seem as intimidating anymore. If you’re interested in other ways to pair together typefaces, check out these helpful articles:

Best Practices of Combining Typefaces
Four Ways to Mix Fonts