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
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.
What you’ll learn
- How to add variable typography to websites and change it
- How to add CSS animations and transitions to web type
- Working with P5.js within an in-browser canvas, even if you've never coded before
- How to think about and create your own kinetic typography animations from scratch
- How to let your users change and interact with your beautiful kinetic type animations
- How to break apart typography into its base components to rework it completely
Requirements
A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s everything!
Target Audience
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
Get access to Experimental Typography For The Web
- Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
- Projects and code that you can alter and include in your own sites and portfolio
- Resources to get you started and going post-course
Your instructor
Rik Lomas
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.
With support from...
Jake Brussel Faria
Course structure
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
SuperHi students work at the best
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 workFeeling stuck?
Don’t worry, we are here to help you with:
- Speedy help from one of our team members
- Detailed, relevant solutions
- Direct access to peer support through Discord!
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!