course notes 2016/17

typography for the web

Oct 19th 2016

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 have 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 own Hannah who is just graduating – 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 (you’re 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 #1

The aim of this project is to create a professional profile page for yourself, a single page design. Selecting any information you find suitable, create a design which will present your chosen information in a clear and meaningful manner.

This project will span over 3 weeks, allowing you an extra week after our sessions to complete your profile. Working in black and white only for part #1 and #2, we will look at colour and images next week.

to-do list

  1. write/edit/collect the information you’d like to feature on your profile
  2. mark up your text in a fitting structure and begin to experiment with typesetting
  3. focus on clear hierarchy and put relevant emphasis on each content type
  4. put together a fitting font-stack with a minimum of 5 fonts

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

online profile services:

designers’ profiles

  • Jason Santa Maria: profile
  • Veerle Pieters: profile on personal blog
  • Trent Walton: profile on personal site

Please feel free to comment below if you have any questions :)

Comments are closed.