About the Site

Interactive Media Web is an undergraduate design elective course at OCAD University in Toronto, Canada. This website is for students who are actively participating in the course but it’s also for anyone that’s curious about the World Wide Web as a creative medium. Take a look around and leave your mark along the way!

About the Instructor

Peter Ha is a co-founder of Equal Parts Studio, a Toronto-based contemporary graphic design practice. Their process is founded on curiosity and finding the joy and playfulness in every project. Since 2021, he has been teaching design process, information design and interactive media at OCAD U.

Credits

Original syllabus by Ali S. Qadeer
Design and Development by Peter Ha
Built using Static Website Template by Vincent Will
Typeset in Inconsolata and Xanh Mono

Expressive Typography

Fonts & Animation

  1. Display three different words that are action verbs. Some example words: bounce, jump, shake, grow, expand, hop.
  2. Typeset with a custom font from Adobe Fonts, Google Fonts and self-hosted.
  3. Add a fallback font stack for each word.
  4. Using CSS, animate the words based on the actions. For example, the word jump, the entire word could jump from one position to another on the screen.
  5. Trigger animation when hovering over the word.

Objective

Be familiar with font services for the web and learn how to implement them. This will help you with your second and final project, Poster and INDEX. In addition, this will show how animation can be used to enhance meaning and demonstrate the first layer of interactivity through CSS.

Resources

Fonts


Tutorials


Inspiration & Examples

← Grid Flexbox →