Skip to content
Get packs

Leon Sans

A geometric sans-serif font built from code, for animating text on HTML5 Canvas.

GitHub Download source
Stars
10.2k
Forks
518
Licence
MIT
Language
JavaScript
Last update
6.1 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Leon Sans is a geometric sans-serif typeface created in code in 2019 by Jongmin Kim. Each letter is stored as coordinate points, so developers can change its weight, animate it, or draw custom effects on an HTML5 Canvas. The README says the designer made it to celebrate his newborn son.

  • Show text with a drawing animation that traces each letter
  • Change font weight dynamically in a web page
  • Create a wave or metaball effect on lettering
  • Draw colorful or patterned text on a Canvas element

Great for

  • Web developers who want animated or interactive headline text on a Canvas
  • Designers exploring code-driven typography
  • Creative coders building visual effects with type
  • Anyone who wants to see the examples and drawing animations

Not ideal for

  • People who need a font file to install on a desktop or use in print tools, since the README only describes using it through JavaScript and Canvas
  • Projects needing a stable, actively maintained library, since the last push was in September 2020 and no release is listed
Step-by-step guide: how to use Leon SansInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    See the README

    You'll need: A web browser with HTML5 Canvas support · Basic knowledge of HTML and JavaScript

    Clone the repository

    git clone https://github.com/cmiscm/leonsans
  2. 2

    Run it

    • Download the minified js file from the dist folder
    • Include it in your HTML with a script tag pointing to js/leon.js
    • Create a canvas element and a LeonSans instance with your text
    • Call draw(ctx) inside an animation loop to render the text
  3. 3

    Get the most out of it

    • Use the weight option (1 to 900) to change thickness dynamically
    • Enable isWave for the wave effect and adjust amplitude and fps
    • Use the drawing values with TweenMax to animate letters in sequence
    • Use the paths and color options to build custom shapes or per-character colors

Downloads

Source code (.zip)master branch · straight from GitHubOfficial website & docsleon-kim.com/

Strengths

  • Letters are defined by coordinate data, which allows custom shapes and animations
  • Weight can be changed dynamically (documented range 1 to 900)
  • Includes live examples and a demo video to see the results before using it

Trade-offs

  • Last push was 2020-09-21 and no release is listed, so long-term support is unclear
  • The drawing animation example depends on an older TweenMax library version loaded from a CDN
  • Documentation is focused on Canvas usage and is partly truncated in this summary

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.