Class 7: Learning Typographic Hierarchy

Today were are going to go deeper into typographic hierarchy.

PART 1 What is Typographic Hierarchy

We will look at and discuss my (updated) post on Typographic Hierarchy: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/typographic-hierarchy/

PART 2: Examples and Inspiration

Next we will look at the following for examples and inspiration related to typography and hierarchy:

• Typewolf Site if the day; https://www.typewolf.com/site-of-the-day
  • https://www.typewolf.com/site-of-the-day/american-factory-film
  • https://www.typewolf.com/site-of-the-day/talentful
  • https://www.typewolf.com/site-of-the-day/atolla
  • https://www.typewolf.com/site-of-the-day/aristide-benoist
  • https://www.typewolf.com/site-of-the-day/floris-van-driel
• People who write about type
  • Samantha Warren: http://samanthatoy.com/
  • Jason Santa Maria: http://jasonsantamaria.com/
  • Jason Pamental: https://rwt.io/
• CodePen Examples
  • Inventive use of text-shadow and z positioning https://codepen.io/chriseisenbraun/pen/upmDB
  • Sandbox to play with some of the properties: https://codepen.io/carolynmcneillie/pen/Lewxrm?editors=1100#0
  • line length, type scale, first letter: https://codepen.io/alemieux/pen/wBKLJd
  • large fonts, absolute positioning, complex use of span: https://codepen.io/andyhullinger/pen/ogwBdb?editors=1100
  • big block quote, uses sass and pug: https://codepen.io/matthewbeta/pen/hcBeL

PART 3: Try it out in Groups

For this part of the class we will break up into groups and in your groups you will

1. Go to this CodePen: https://codepen.io/profstein/pen/zYOmvJo
2. Make sure one of you is signed in and Fork it
3. Style the text to give a hierarchy

This is taken from the article we looked at from the Thinking with Type book, http://thinkingwithtype.com/text/#heirarchy. You can use the examples there for inspiration or go your own way.