𝌆

Overview

Through this project, you will experiment formally in HTML and CSS through creation of a typeface. The characters of your typeface will have two visual states that they move between and be documented on a specimen website you will design and build.

How is a typeface online different than one in a book? What are the dynamic properties of the web that printed matter lacks? And vice-versa: what does printed matter has that the web doesn't? Your typeface should work visually as a family and embrace the opportunities afforded by it being created in code.

Your typeface should exist in at least two visual 'states'. These states can take advantage of the HTML/CSS hover state, Javascript, CSS animations, or be triggered in other ways as you like (scrolling, resizing your window, a media query, etc.).

In creating 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? Consider how to use your typeface as an element of the overall design.


Learning Outcomes

  • Practice structuring HTML and CSS for reuse.
  • Strengthen skills using HTML and CSS as a formal medium.

Requirements

  • Create a typeface using only HTML and CSS. It should have a complete character set and at minimum 2 visual 'states'. [A-Z, 0-9, .?!,”“]
  • Once you've designed and built your typeface, create a website to display your complete typeface.
  • You must give your typeface a name

Grading

Your project grade will reflect the quality of the design of your typeface, as well as the execution of your final typeface specimen site.


Calendar

Week 10
TH - assign

Week 11
M  - step 1 due
TH - step 2 due

Week 12
M  - have at least 6 of your letters built
TH - workday

Week 13
M  - step 4 due
TH - workday

Week 14
M  - mid crit, majority of letters built
TH - workday

Week 15
M  - workday
TH - workday

Week 16
M  - final crit

Project

Step 1

Due Monday April 7

Sketch three unique directions for your typeface in a design tool. Conceptually and formally, each direction should be uniquely different from each other. You don't need to draw all the letters, start with the ones that will inform the design of the whole family first (like, how o would inform b,d,p,q) etc. Each sketch should show at least 10 - 12 characters.

While sketching, consider how each typeface might exist as code and in the browser space, think about how you could build up their outlines with HTML and CSS, in addition to what each typeface might be for.

Step 2

Due Thursday April 10

Based on feedback of your three sketches, select one direction for your complete typeface. Finalize your typeface sketch into a final design with a full character set. Pay attention to how the characters work together as a system and think about ways each character might have a second state.

Here are the characters you should design:

either:
abcdefghijklmnopqrstuvwxyz
         - or -
ABCDEFGHIJKLMNOPQRSTUVWXYZ

as well as:
0123456789 (numbers)
.?!,”“ (punctuation)

Step 3

Beginning on April 10 we will begin building our characters in HTML and CSS. Start with the characters that define pieces that you will reuse in multiple letters.

April 14 - Have at least 6 of your letters built.
April 28 - Have the majority of your letters built for mid crit

All your characters are due with the specimen site on May 12.

Step 4

Due April 21

Create two unique proposals 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? As part of this, consider how your typeface will transition between its two states.

Step 5

Due Monday May 12

Present a final website containing typeface and showcasing its unique character. We will have an in progress check in Tuesday April 28 and a final crit on Tuesday May 12.


Readings

Inspiration

Student Examples