leonsans

Leon Sans is a typeface created entirely in JavaScript code rather than as a traditional font file. The designer, Jongmin Kim, built it in 2019 to celebrate the birth of his son Leon. Because the font is generated from code, it behaves differently from a normal font: you can change the stroke weight at any point in time, animate individual letters drawing themselves onto the screen, apply visual effects like waves or bubbling shapes between characters, or extract the exact coordinate paths of every stroke.

The font is used inside an HTML5 canvas element, which is the part of a web page that lets you draw graphics with code. You include a small JavaScript file, create a LeonSans object with the text you want to display, and draw it each animation frame. From there you can adjust the size, weight, color, letter spacing, line spacing, and text alignment through configuration options.

The animation capabilities are the main reason people use this over a standard web font. You can animate the drawing of each character from start to finish (the stroke appears as if being drawn by a pen), create a wave effect that passes through all the letters, apply multi-color fills per character, or access the raw coordinate data of each glyph to drive entirely custom visual effects in a canvas or WebGL scene. The animated drawing feature requires a separate animation library (GSAP TweenMax) to run.

The README includes working code examples, a full list of configuration options and their default values, and links to live demos on the creator's website where you can see each effect in action. The font covers uppercase and lowercase Latin characters, numbers, and special characters.