CSS Typeface

Instructions

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.

Goals

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

• Enter the Void Trailer by Gasper Noe, 2011
• Watch Wyoscan by Dexter Sinister, 2012
• Letter & Spirit by Dexter Sinister, 2012
• Rhythmetic by Norman McLaren and Evelyn Lambart, 1956
• Now by Weiyi Li, 2011
• Now Is More Than Ever by Damon Zucconi
• Unicode by Joerg Piringer, 2012
• Sweethearts by Emmett Williams, 1966, and Mindy Seu, 2014
• Whitney's Responsive W by Experimental Jetset, 2013 — more
• bOOg by Freeware/Delaware, 2012
• Computed Type by Christoph Knoth, 2013 — more
• Instructions for a Typeface by Laurel Schwulst, 2010
• Radim Pesko's typefaces

Schedule

First Sketch — Due Wednesday, October 21
Create three unique directions for your typeface after viewing the demo in class. 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 Wednesday with a PDF.)

Second Sketch — Due Monday, October 26
Based on feedback, design "HODNOP" in three additional directions for P3. If you have a favorite direction, see how far you can push it. Try creating specific words in your typeface that aren't HODNOP. Try seeing what happens when you have a whole sentence. Then show how at least one letter of your typeface exists in code. Continue to think about how your typeface as a whole will behave on the web.

Tips:

• Revisit the examples on this page (above)
• Ask yourself: What makes a typeface specific to the screen or the web?
• Think about your typeface in two states. (How does your typeface "breathe"?)
• Think about what your typeface would do if it were a screen saver.

Website development — Due Monday, November 2
Present two directions your website could take.

Final — Due Monday, November 9
Present a final website containing typeface.

Credit

Thank you to Brian Watterson for letting me adapt this project to this class.