Project 2 & 3: Typeface as a Medium
“But in any context, large or small, designing the medium is managing the potentials and relationships between objects, the activity or disposition immanent in their organization.” – Keller Eastering
Reading
Project 2
Create a variable font, considering the axes of variation as a medium. With this format, you are not only designing the visual instances of letterforms — you are designing the relationship with the typographer (or anyone who uses the font.) What power and possibilities are you granting with your variable font? If you can choose any kind of axes for variation, what is the significance of that choice?
Project 3
Create a typographic website for your typeface, as a specimen that responds to specific conditions enabled by the web.
Week 1
- define your typographic concept(s)
- determine the scope of your font
- you might work from an existing design — something you’ve designed in the past
- if starting a new design, consider limiting your character set
- articulate the axis for variation as an intentional design space
- develop several sketches or approaches
- begin with the control characters: H, O, D, n, o, p.
- These characters provide the “DNA” of a typeface: its straight shapes, its curved shapes, and the combination of the two.
- When drawing letters, you will be designing both the black and white shapes: the positive space as well as the negative space both within the counters of the letters and the space formed between the letters. Pay careful attention to these inside/outside shapes.
Week 2
- complete basic character set
- begin developing website for font-in-use specimen
- consider the following questions for your typeface:
- how does the font take advantage of its mode of construction?
- how can not only the shapes of the letters, but the actual transformation itself become part of your concept?
- how can your typeface demonstrate a commentary; a point of view?
- consider the following questions for your website:
- how is your axis of variation activated by the web?
- what should it respond to?
- is it user input? a browser width change? external data? time? sound?
- what is the significance of this “response” in combination with the text that we see?
Week 3
- refine and finalize typeface
- are there other variants to consider
- flesh out your website specimen
- what is the journey created through the website?
- how can you showcase different components of your typeface?
- what typeface are you pairing with your typeface? (since most of you are drawing display faces, you may want to consider selecting a text face to match your font)
- design the responsive version
- use
@mediaqueries to make a mobile-friendly version - how does your typography adapt to the smaller screen?
- use
- consider expanding what and how you’re curating your content: use JavaScript, JSON and / or APIs to enhance the experience of your typeface on the web
Week 4
- refine website specimen
- what kind of experience are you taking your visitor through with your website?
- how does each design choice — typesize, color, motion — align with the concept?
- finalize interactivity of the website — what is intuitive vs. what requires instructions?
- finalize typographic details
- finalize responsive behavior
- consider a page or footer that contextualizes the project (“about section”)
Final Crit: March 19- Final Crit: April 2
Glyphs Links
Testing
Implementing Variable Fonts on Websites
- A Variable Fonts Primer
- MDN Variable Fonts Guide
- One File, Many Options: Using Variable Fonts on the Web
- Interactivity and Animation with Variable Fonts
Supporting Tutorials
- Codecademy JavaScript
- Codecademy jQuery (Students can sign up for a PRO account for free!)
- Eloquent Javascript