CSS Typeface


  1. Create a typeface using only HTML and CSS. It should have a complete character set.

  2. Once you've designed and built your typeface, create a website to display your complete typeface. On this website, your typeface itself should be used as the primary form of communication.


Through this project, you will experiment formally in HTML and CSS through creation of your very own typeface. That said, your typeface should somehow take advantage of its unique material. How is a typeface online (on a screen) different than one in a book (on a printed page)? How do the media differ? What are the dynamic properties of the web that printed matter lacks? And vice-versa: is there anything that printed matter has that the web doesn't? The concept for your typeface should come across formally and also allude to the way it was created (programming HTML and CSS).

When it is time to create the website to display your typeface, consider its subject. How can your website's focus not only reinforce but push forward the concept of your typeface? How will your typeface be used? What material can you present in your typeface to take it to a new level? Can the website surprise viewers in some way to further explore the concept even more?

Examples of innovative typography specific for screen


First SketchDue Tuesday, February 16
Create three unique directions for your typeface. Begin by sketching the letters H O D N O P. Conceptually and formally, each direction should be uniquely different from each other. While sketching, consider how each typeface would exist as code and in the browser space. (Do this in InDesign or Illustrator, and come to class on Tuesday with a PDF.)

Second SketchDue Thursday, February 18
Based on feedback of your three "HODNOP" sketches, select one direction for your complete typeface. Complete your typeface drawing (in Illustrator, etc.) as much as possible. Here are the characters I would like you to have:

(choose either lower or upper case)

0123456789 (numbers)
.?!,”“ (punctuation)

Website developmentDue Tuesday, February 23
Please create two unique proposals (using InDesign) for the website your typeface will live on. How can your website's focus not only reinforce but push forward the concept of your typeface? Remember to upload the PDF to your class website.


FinalDue Thursday, March 17
Present a final website containing typeface.


Adapted from Brian Watterson's project.

Updated on May 10, 2016