course notes 2019/20

type with terms

Typography for the Web

Oct 16th 2019

Oliver Reichenstein famously wrote:

Web Design is 95% Typography.

Though this is a bold statement which you might, or might not, agree with – there is no doubt that carefully crafted typography will not only ensure good legibility of text and therefore accessibility but also greatly enhance the design and impact of any given website.

To get you started with some basics and give you plenty of material to study – let’s go through some of the content of this post:
typography for the web ↗


If you are very new to typography – I am proud to present to you this brilliant site to help you get to grips with all the basics and more: — made by our very own Hannah (who graduated 2016) – thanks, Hannah :)

exemplars of beautiful web type

Simon Collison


Jason Santa Maria

Jason Santa Maria

陳 Jon Tan (currently offline)

Jon Tan

Dan Mall

Daniel Mall

experiments with type

type in circle

Using Mike Monteiro’s A Designer’s Code of Ethics as source, select a section you particularly like or agree with (or not) — and use layout and typesetting to express its message and to emphasize the most effective phrase within the given text. Happy coding ;)

Introduce yourself

tiny task – part #2

With your content in hand, and some ideas for layout and design – time to get your text nicely set. Work on the following points and bring in your work-in-progress page next week. We’ll all have a look and exchange feedback.


  1. mark up your text in a fitting structure and begin to experiment with typesetting
  2. focus on clear hierarchy and put relevant emphasis on each content type
  3. put together a fitting font-stack with a minimum of 5 fonts

NOTE: You will find all briefs on the ‘projects’ page.

As always, please feel free to comment below, or post to our #design channel in Slack, if you have any questions or want more feedback :)

Comments are closed.