Interactive

Motorways (CSS Typeface)

My Role

Design

Tools

HTML, CSS, JavaScript

Timeline

Feb 2024

Overview

The goal of this project is to design a full character set using HTML and CSS, then activate it based on user interactions. I was inspired by the design of the highway intersections. My initial sketch considered traffic in both directions. Although the design looks intriguing, I had to simplify it to a modular pattern so that it’s easier to implement with plain HTML and CSS code. When the cursor is hovering on a letter, the individual grid changes color with a staggering effect, resembling the traffic flow.

Click on the image below to try the typeface

Initial Sketch

Last Update: February, 2025

© Leon Zhechen Zhao 2025