1. Create a typeface using only HTML and CSS. It should have a complete character set and at minimum 2 visual 'states'.
2. Once you've designed and built your typeface, create a website to display your complete typeface.
*note: you must give your typeface a name
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).
Your typeface should exist in at least two visual 'states'. These states can take advantage of the HTML/CSS hover state, continuously run like a screensaver, or be triggered in other ways as you like (scrolling, resizing your window, a media query, etc.). What does this additional form say about the digital format? Is it a means to be expressive? To hide and reveal new information? Are there multiple layers to your typeface that represent different types of information? Connect these visual forms to the concept of your typeface.
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?
Think critically about your typeface and how it relates to the other work you’ve done this semester, and topics we’ve discussed. Does it relate to your personal online experience? To the rapid cycles of stylistic change in the post-internet age? Our multitudes of digital identities online? Or is it more a graphic exploration that takes advantage of the medium and the dichotomy of digital states?
- 1 page (minimum) online digital type specimen which showcases a selection of characters from your typeface
- Online character set which features your entire alphabet
- 2 visual ‘states’ your typeface exists within
Due Tuesday April 16
Create three unique directions for your typeface, begin by sketching the fundamental letters from the genre of typeface you’re working in (for instance, if one's direction was a grotesque I may draw the "E", "B", and "C"). 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.)
Due Thursday April 18
Based on feedback of your three 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:
either: abcdefghijklmnopqrstuvwxyz or: ABCDEFGHIJKLMNOPQRSTUVWXYZ as well as: 0123456789 (numbers) .?!,”“ (punctuation)
Due Thursday April 25
Please create two unique proposals (using Illustrator, Sketch, Figma, or another sketching tool) 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?
- Revisit the examples on this page (below)
- 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.
Due Thursday Oct 4
Present a final website containing typeface and showcasing its unique character. We will have an in progress check in Tuesday Sept 25 and a final crit on Tuesday Oct 2.
Week 12 TR - Kickoff P2 Week 13 T - step 1 due TR - step 2 due Week 14 T - workday TR - step 3 due Week 15 T - step 4 in progress eval TR - workday Week 16 T - workday TR – project due
- Tauba Auerbach's Type Specimens
- Jurriaan Schrofer
- Rhythmetic by Norman McLaren and Evelyn Lambart, 1956
- Enter the Void Trailer by Gasper Noe, 2011
- Watch Wyoscan by Dexter Sinister, 2012
- Now Is More Than Ever by Damon Zucconi
- Letter & Spirit by Dexter Sinister, 2012
- Computed Type by Christoph Knoth, 2013
- Unicode by Jörg Piringer, 2012
- Whitney's Responsive W by Experimental Jetset, 2013
- bOOg by Freeware/Delaware, 2012
- Typatone by Jono Brandel, 2015
- Radim Pesko's Sol
- Bloomberg Businessweek Design Conference
- Young-Hae Chang Heavy Industries
- Place a Stone by Studio Moniker
- Math Shapes by LettError
- Commercial Type Showcase
- Hansje van Halem
- Alphabet by Yuin Chien
- Numerical by Yuin Chien
- Power Wire by Kermen
- Scanimation by Yvette
- Ghost by Cooper
- Neon by Ivan
- Dark Pixie by Alexis
- Skeuo by Janice
- Super by Ivan
- Junchill by Jono
- mere by Ellie
- Silhouette by Annie
Adapted from a project by Brian Watterson.