course notes 2017/18

typography for the web

Oct 18th 2017

illustrated word

Oliver Reichenstein famously wrote:

Web Design is 95% Typography.  (read original article)

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 – you now have a brilliant new site to help you get to grips with all the basics and more. Made by our very own Hannah (who graduated last year) – thanks, Hannah :)

exemplars of beautiful web type

Simon Collison

Jason Santa Maria
Jason Santa Maria

陳 Jon Tan
Jon Tan

Dan Mall
Daniel Mall

Trent Walton
trent walton

To train your eye and experiment with typesetting ~ work on a new CSS for the famous Seed Conference page.

new typesetting for Seed Conference
Using the HTML only (feel free to edit markup for better code if you wish) – write a new CSS to present and style the text. As the original, you are restricted to one typeface alone.
Happy coding ;)
↓ download source files

profile page design

mini project – 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.

to-do list

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

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.