SuperHi FM

Search:

Catalog Cart About Sign in

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.

Rik Lomas

Taught by

Rik Lomas

Playground Agency

Playground Agency

Lesson 01

Welcome to the course!

Lesson 02

Playground and the SuperHi Editor

Lesson 03

Setting up our HTML

Caroline Wade

Caroline Wade

Lesson 01

Welcome to Caroline Wade

Lesson 02

Creating our page

Lesson 03

Adding in our variable font

01 01

01 01

Lesson 01

Welcome to 01 01

Lesson 02

Setting up our P5.js script

Lesson 03

Drawing text with P5

aaaaaaaaa

aaaaaaaaa

Lesson 01

Welcome to aaaaaaaaa

Lesson 02

Drawing text with P5

Lesson 03

Styling our text

Good Morning

Good Morning

Lesson 01

Good morning to Good Morning

Lesson 02

Setting up our script

Lesson 03

Cut and paste with createGraphics

Out of Office

Out of Office

Lesson 01

Welcome to Out of Office

Lesson 02

Setting up our stamp

Lesson 03

Cloning twelve times

Brutalust

Brutalust

Lesson 01

Welcome to Brutalust

Lesson 02

Setting up our site

Lesson 03

Adding typography to our site

Dani Lewis

Dani Lewis

Lesson 01

Welcome to Dani Lewis

Lesson 02

Setting up our project

Lesson 03

Using P5's textToPoints

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 Lomas

Founder + CEO

With support from...

Jake Brussel Faria

Jake Brussel Faria

Teacher

Course structure

Chapter 01

Playground Agency

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

Chapter 02

Caroline Wade

Lesson 01
Welcome to Caroline Wade
Lesson 02
Creating our page
Lesson 03
Adding in our variable font
Lesson 04
Creating our first Javascript file
Lesson 05
Adding variable type to Javascript

Chapter 03

01 01

Lesson 01
Welcome to 01 01
Lesson 02
Setting up our P5.js script
Lesson 03
Drawing text with P5
Lesson 04
Preloading a font to use
Lesson 05
createGraphics and copy
Lesson 06
Adding a sprinkle of math to our movement

Chapter 04

aaaaaaaaa

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

Chapter 05

Good Morning

Lesson 01
Good morning to Good Morning
Lesson 02
Setting up our script
Lesson 03
Cut and paste with createGraphics
Lesson 04
Gridding up our graphics
Lesson 05
Distortion in two directions
Lesson 06
Adding a wave slider
Lesson 07
Adding text field updates
Lesson 08
Homework
Lesson 09
Homework solution

Chapter 06

Out of Office

Lesson 01
Welcome to Out of Office
Lesson 02
Setting up our stamp
Lesson 03
Cloning twelve times
Lesson 04
Changing our sample position
Lesson 05
Timeline scrubbing with mouse position
Lesson 06
Adding easing to our scrubbing
Lesson 07
Adding in an animated loop

Chapter 07

Brutalust

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

Chapter 08

Dani Lewis

Lesson 01
Welcome to Dani Lewis
Lesson 02
Setting up our project
Lesson 03
Using P5's textToPoints
Lesson 04
Drawing shapes with the points
Lesson 05
Adding p5 vectors
Lesson 06
Adding a distance to distortion
Lesson 07
Adding noise levels
Lesson 08
Thank you for joining our course!

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 work

Feeling 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!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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

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.