📝 Penn Week 4b – Web Typography Intro

Recently Online

News Room Debrief

What stood out and why?


Typography Basics

“Typography is the visual component of the written word.”

 – Matthew Butterick

  • Typography should always support your concept and reflect its purpose. If the above is a traditional road sign, the first one feels a little more legible to a wider range of people from a distance. The bottom sign might be appropriate in special instances, but probably not Highway 101.

Type Classifications

  • Research the typefaces you’re using and maintain thoughtful decisions as to how they relate to your content.
  • Building out a vocabulary for different type styles can help you see differences in type and find formal and conceptual qualities to connect to your design directions.


Type Families

  • A font family consists of two or more fonts designed to work together as a system of weights and/or styles.
  • Many high quality fonts have large font families to choose from.
  • Pairings within the same family are  commonly used, and often essential parts of interfaces. (For example: Medium and Book)


What is Hierarchy?

Typographic hierarchy is the structure and rhythm to how a text should be experienced. It helps guide a reader on what’s most important and helps structure your page.

In any type of typesetting (books, websites, posters), evaluate what’s most important and think about how your design can reflect that.

There is not one way to do this – you can achieve it through scale, indentation, copy, color and multiple other ways, too.

Hierarchy Examples



  • Good typography reinforces the meaning of the text.
  • There isn’t a “1 solution” for typography. There are infinite ways of establishing hierarchy. Weight, color, font-size, whitespace, and kerning, can all be used to create strong hierarchy.
  • Similarly, just because a type system works for one project, doesn’t mean it will be appropriate in a different instance.