typography for the web

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

陳 Jon Tan

Dan Mall

Trent Walton

To train your eye and experiment with typesetting ~ work on a new CSS for the famous Seed Conference page.
TASK
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
- write/edit/collect the information you’d like to feature on your profile
- mark up your text in a fitting structure and begin to experiment with typesetting
- focus on clear hierarchy and put relevant emphasis on each content type
- 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.