INTERMEDIATECOURSE
Experimental Typography For The Web
Make type animations from scratch! Learn how to bend and mould typography for use in your own websites using P5.js.
Taught by
Rik Lomas
Taught by
Rik Lomas
Want to know how to work with variable fonts and how to create kinetic typographic animations for websites? If yes, this creative, go-at-your-own-pace course is for you. We've created a series of projects for this that are all about getting weird with type.
Across 6 hours, you'll learn how to add variable fonts to your websites, plus how to animate and make them interactive. You'll also work with P5.js, a Javascript library for creative coding, to bend and mould typography.
You'll also create your very own kinetic typography animations from scratch, be able to add them to websites and make them user-interactive.
This is a great next step for students who already have some knowledge of HTML and CSS, or have completed our Foundation HTML, CSS + Javascript or Javascript for Designers courses.
A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s everything!
Anyone who wants to learn how to work with variable typography or create their own interactive, kinetic typography from scratch.
This is a beginner course when it comes to page transitions, though we would recommend basic knowledge of HTML, CSS, and a bit of Javascript before starting. If you don’t have this just yet, trying our Learn To Code Now book, or taking either our Foundation HTML, CSS + JS course or our Javascript for Designers course will help you feel as prepared as possible.
Welcome to the course! In the first project we discover how to add web typography to a site and how to play around with variable type using CSS animations
We extend upon variable type with the Bandeins Strange typeface which has two levels of variability. We also add in hover states and a script to change the type on scroll.
For most kinetic type animations, we need to draw in a canvas to be able to manipulate our type. In this project, we copy and paste our text so we can play around with its width
Once we've started to copy and paste our image, we want to be able to play with its distortion within a grid
We take kinetic type to its extremes by making the grid very small and by letting our users change the text and the speed of animation
Sometimes, we want to be able to let our users have control over the animation. We add timeline scrubbing to our project along with an animation loop
In our brutalism fansite, Brutalust, we add in a typer-style effect to our HTML-content using vanilla Javascript's setInterval looping to change and randomize text
In our final project, we take drawing to its extreme by sampling a font and redrawing it with circles and lines, and then using vectors to add distortion based on our mouse position
Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.
Jake Brussel Faria
Lesson 01
Welcome to the course!
Lesson 02
Playground and the SuperHi Editor
Lesson 03
Setting up our HTML
Lesson 04
Styling our page with CSS
Lesson 05
Basic web typographic styling
Lesson 06
Adding a Google Font typeface to our project
Lesson 07
Adding your own self-hosted typeface
Lesson 08
Adding hover states
Lesson 09
Stretching the typeface
Lesson 10
Adding a CSS animation
Lesson 11
Adding variable type to our project
Lesson 01
Welcome to aaaaaaaaa
Lesson 02
Drawing text with P5
Lesson 03
Styling our text
Lesson 04
Adding a for loop
Lesson 05
Adding a y-direction with a double for loop
Lesson 06
Speed improvements with image
Lesson 07
Recreating the original text
Lesson 08
Adding global distortion and movement
Lesson 09
Adding in local distortion
Lesson 10
Homework
Lesson 11
Homework solution
Lesson 01
Welcome to Brutalust
Lesson 02
Setting up our site
Lesson 03
Adding typography to our site
Lesson 04
Adding in our first Javascript content change
Lesson 05
Cleaning up our script with a function
Lesson 06
Substringing our content
Lesson 07
Adding in an interval
Lesson 08
Stopping intervals with clearInterval
Lesson 09
Adding in random dots
Lesson 10
Adding in random characters
Lesson 11
The IntersectionObserver
Lesson 12
Saving the original content with dataset
Lesson 13
Adding in scroll snapping
Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?
View student workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
