MAD9013

Typography

Fonts, Font-faces, Type-faces, Font-families and Font classes

There is a lot of confusion around these terms and exactly what they mean.

Font - Refers to the computer software file which contains information regarding the display and output of a typeface. You choose a font from the typeface menu. Fonts only exist on a computer. In the world today many use the word "Font" incorrectly -- "oh, I like that font." is wrong. It should be "Oh, I like that typeface." However, "Which font did you pick for that Photoshop design?" would be correct. Whereas, "What font is used in this logo?" is incorrect (should be typeface).

Type Family - The design of all the characters comprised of a family and all its encompassing faces. Helvetica is a type family. Helvetica Condensed is a type family, Myriad Pro is a type family, Helvetica Neue is a type family, etc.

Typeface - the specific weight or instance of a particular family. I.E. Bold, italic, oblique are all typefaces. Typeface is generally referred to by family + face. For example Helvetica Bold Italic would be referred to as the typeface where Helvetica is the Family and Bold Italic is the face.

Font Face - (somewhat interchangeable with typeface) the face of the type family. For example Bold or Italic are a face where as Helvetica would be the family. Referencing "font", font face specifically refers to the software used to render a particular face of a family - You may have Helvetica bold as a font face, but not Helvetica italic.

Font Classifications - These are terms which are used to group Type Families. There are technical classifications: serif, sans-serif, script and monospace, which describe specific properties of a type family. There are also classifications which allow designers to group type families in a way that provides a meaning or feel. They help designers to choose an appropriate font for the subject matter. These are groups like Humanist, Traditional, Geometric, etc. We do not have time to get into these but I encourage you to do so on your own.

@font-face - This is the CSS way of loading a font file. The font file will include the type family and allow you to specify which font-face you want from the font file with the type family.

font-family - The CSS property for choosing the type family.

font-weight - Used in combination with the CSS font-family property to create the font face used for an element.

Further reading about type classification

For the web, in general, we will stick to using sans-serif font-families for body text and serif font-families for headings. When in doubt, this is a reliable combination.

Typographic Hierarchy

  • When a person first glances at a page, they need to intuitively and immediately grasp where they should look first, second, third, and so on.
  • Images will always be observed first.
  • With the text we need to create obvious levels of importance.
  • Font-size, font-weight, line-height (for negative space), Capitalization, italics, and colour are all ways to create levels of importance.
  • Think about your whole page all at once. Don't create 27 different levels if you want the user to feel comfortable.
  • Combine multiple ways to enhance the levels and create the hierarchy. If you change the font-weight or colour to create a level in the hierarchy, then change both and/or the font-size with it.
  • 5 to 7 levels is more than enough.

Vertical Rhythm

body.lines {
  background: linear-gradient(to bottom, white, white 95%, #aaa 100%, #aaa);
  background-size: 100% 1.5rem;
}

Type Scaling

When trying to decide on which font-sizes to use, there is a great simple tool that you can use to set the 5 sizes that you use on the page.

Type-Scale

Choose one of the scales, like Major Third, or Augmented Fourth, from the menu on the left. You can set the starting default px size and it will generate all the values that you use with the rem values. Use rem, not em in your CSS.

References and Additional Information

  • There is A LOT to learn when it comes to typography. The knowledge can span many courses.
  • However, that doesn't mean that you can't learn some solid basic rules quickly.
Last Updated: : 8/27/2019, 4:02:33 PM