Responsive Typography In Action

Jon Gold

Lesson 7

Typography has always been at the foundation of design & communication. We're at an interesting point in time where we're being given previously unknown amounts of control over our work, but also new & scary challenges as we try to adapt to an ever-changing sea of devices and contexts.

The work we do today seems far-removed from print design, but there are core principles we should be careful not to forget. This week we'll keep exploring typographic principles, see some of it in action, and try some ourselves.

Responsive Typography: The Basics

This is a fantastic introduction to designing across devices and for different screen sizes.

Think about how the examples Oliver writes about relate to recent projects you‘ve worked on.
Contrast through Scale

In this post, Chris talks about one of the most important typographic principles, contrast, and later goes into actually implementing these ideas in CSS. Make sure to follow the links too — we'll try out some of these concepts in task #5 :)
The Great Discontent

Rather than an article about typography, this blog has some of the best responsive typography on the web. Read a couple of articles, resize your browser—or view on different devices—and make some notes about interesting things they do.
Universal Typography

Web design is constantly changing but we can draw from the past to design better now & in the future. This is a great talk by Tim Brown — why not watch it with a friend?

Try to write down 5 key takeaway points as you watch it.
Typecast

Two weeks ago, Jared got us experimenting with typefaces on Typecast. Let’s try something different this week. Paste in a blog post—try to get a nice range of headings, paragraphs & blockquotes—and make it all one favourite typeface (try FF Tisa if you're stuck). We‘ll be putting into action the principles we‘ve learnt this week!

Make 5 different variations of the page, experimenting with typographic devices such as font size, line height, paragraph spacing & line length. Then get friends to rate them in order of readability.
Bonus: Responsive Typography Experiment

This is a little crazy, but an interesting concept. How could it be improved or made more practical? Bonus points if you can hack a prototype and tweet it to us!