course notes 2015/16

typography for the web

Oct 28th 2015

illustrated word
graphic from original post

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 – here is a simple introduction to some of the basics of typography, for beginners from Creative Bloq.

What is typography? Learn the basic rules and terms of type!

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 #3

Your page should now almost be complete – a few final touches to complete your profile.

to do list

  1. focus on the typography of your profile design and refine your typesetting
  2. put relevant emphasis on each content type
  3. optional: add a link to an HTML version of your CV (separate page)
  4. upload your final profile page
  5. submit your final project folder as ZIP via email to
    prisca [AT]
    subject title: “profile – [your name]

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

Comments are closed.