Project 2: CSS Typeface

Building upon the skills ascertained from Project 1, students will design their own typeface.


Learning Outcomes
familiarity with interaction design
familiarity with animated CSS
familiarity with UI elements ( hyperlinking, scrollbars, cursor, button, navigation, ... )

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

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

Schedule
Week 5 — Read and discuss Computed Type Design, Christoph Knoth, Spreadsheet Typeface
Week 6 — In small groups, determine what letters are foundations for the majority of the alphabet (example o creates a b c d...)
Week 6 — Create 3 unique directions for your typeface. Begin by sketching the letters H O D N O P. Conceptually and formally, each direction must be uniquely different from each other. While sketching, consider how your typeface will exist as code and in browser space.
Week 7 — Think about how you want to present your website visually and conceptually. How does your website enhance your typeface and vice versa? Try creating different words or combinations of letters. Try to code one letter and see how far you can push the design and interactivity variations of that one letter.
Week 7 — Pick your 1 direction. Complete character set for typeface. Please include the following:
a b c d e f g h i j k l m n o p q r s t u v w x y z or A B C D E F G H I J K L M N O P Q R S T U V W X Y Z (either lowercase or uppercase) 0 1 2 3 4 5 6 7 8 9 (numbers) “ ” , . ! ( ) (punctuations)
Week 8 — Prepare for final presentation of typeface design and website

Project 2 References:
https://vimeo.com/60651938
Tauba Auerbach
Jurriaan Schrofer
Rythmetic
Enter the Void
Watch Wyoscan, Dexter Sinister
Now is More than Ever, Damon Zucconi
Letter & Spirit, Dexter Sinister
College Chums, Edwin Porter 1907
Now, Wei Yi
Whitney Identity, Experimental Jetset
New York Times 800 Feet Above the City
ProPublica
Place a Stone, Studio Moniker
Bloomberg Businessweek
Men Too, New York Times
Lost World Fair, Moon
Typatone, Jono Brandel
TM1516 Responsive Lettering Experiments
MathShapes
Aerial Bold
A Book from the Sky, Gene Kogan
Enter the Void, Gaspar Noe