CSS Typeface (Parameters)

In the infancy of digital typography—as lead type, set by hand in heavy lead blocks or by machines that generated lines of metal type, was giving way to text set on screens—Crouwel saw an opportunity for an interesting experiment. Early computer screens—cathode ray tube (CRT) monitors—rendered images in fairly large pixels, making traditional curvilinear letterforms difficult to reconstruct, and so Crouwel set out to redesign the alphabet using only horizontal lines...

–Gallery label from Standard Deviations, 2011.

Through this project, you will experiment with parametric design, and the formal potential of HTML and CSS through creation of your very own typeface. That said, your typeface should somehow take advantage of its unique "material" – the screen and code – and embrace those qualities formally and conceptually. How is a typeface online (on a screen) different from one in a book (on a printed page)? What opportunities are created through form that manifests through instruction and can change dynamically? 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 (resizing your window via a media query for instance). 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?

The Sign-Generator is a tool that generates all possible combinations of a number of lines defined on a 9 point grid. The Sign-Generator 1.0 allows you to print these signs and to export them as an eps-file.

NORM: SIGN-GENERATOR 1.0, Ian Claridge

"New Alphabet" by Wim Crouwel, 1967

Due Mar 1 (6 weeks)
Adapted from a project by Brian Watterson
Topics: Parameters, Modularity, Type

Project

Project Kickoff: Mon Jan 25
Parametric design and modular type discussion

Step 1: Due Mon Feb 1
To get started, complete the Collective Alphabet Exercise which will act as inspiration for the project. Based on this exercise create two unique modular directions for each of your "Collective Alphabet" characters in graphics in a new Figma file. This means 4 designs total. Each character can reuse a concept, or have a totally unique design.

Step 2: Due Mon Feb 8
Based on feedback of your two directions, select one for your typeface. Complete your typeface drawing in Figma as much as possible. Here are the characters I would like you to have:

either: abcdefghijklmnopqrstuvwxyz
or: ABCDEFGHIJKLMNOPQRSTUVWXYZ
as well as: 0123456789 (numbers) and .?!,”“ (punctuation)

Step 3: Due Mon Feb 15
Finalize your proposal (using Figma) 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 sketches to your class website. Your website should display at least 3 interactive letters coded in HTML/CSS, and the rest of your alphabet as images.

• 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.

Step 4: Final Crit Mon Mar 1 Mon Mar 8
Present a final website containing your typeface and showcasing its unique character in HTML and CSS.

Throughout this process you will be translating your letterforms into code.

Calendar

Week 1
Project kickoff
Typeface design

Week 2
Typeface refinement
Step 1 Due

Week 3
Specimen Design + Rough HTML/CSS
Step 2 Due

Week 4
Rough HTML/CSS
Step 3 Due

Week 5
Semi-Final HTML/CSS

Week 7
Step 4 Due / Final Crit