Type Specimen
“Objects with FUNCTION indicate a possibility of something to happen. FUNCTION leads to a potential story, thus FUNCTION is indeed a narrative” – Weiyi Li
With our functioning variable fonts, we’ll now create a specialized web page that highlights the features of the typeface. This website may not necessarily be about the typeface, but featuring content that is best expressed with your font and its axis of variation.
Typefaces are dormant — simply taking KB of harddrive space, in the form of code — unless they are used in language. Once they are activated (whether on the page or in the browser), they become an object with narrative possibility. Consider how the website provides this environment for your typeface to tell its own story.
Project Details
Create a “type specimen” that creates a world for your typeface to live in.
Technical Learnings
- How do you use variable fonts on the web?
- How might you use CSS and JavaScript to activate them?
- How might we use animation capacities?
Design Questions
- How can we design around axes of variation?
- What concept might this transformation embrace?
- For display faces, how might it pair with another typeface for captions and small text, establishing hierarchy?
Project Schedule
Week 1: Prototype your type specimen
- What is the journey created through the website?
- How can you showcase different components of your typeface?
- How does the interactive experience align with the concept of the site?
- Begin experimenting with JavaScript — how might you programmatically adjust the
font-variation-setttings?
Week 2: Refine
- Make your specimen responsive: how does your typography adapt to the smaller screen?
- How does each design choice — typesize, color, motion — align with the concept?
- Consider the interactivity of the website — what is intuitive vs. what requires instructions?
- Refine typographic details
- If you don’t have one yet, consider a page, secction, or footer that contextualizes the project “about section”)