Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.

Overview

Leon Sans

Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. It allows to change font weight dynamically and to create custom animations, effects or shapes in the Canvas element of HTML5. He designed the font to celebrate his newborn baby Leon.

There are live examples at https://leon-kim.com/examples/

And website at https://leon-kim.com/

Video Label

uppercase

lowercase

number

latin upper

latin lower

What is special?

The font is made with code, it has coordinate values of the drawing points for each glyph. With the coordinate values, you can create custom shapes, effects or animations.

Drawing animation

Weight change

Wave

Metaball

Plant

Colorful

Color pattern

Usage

Download the minified js file in dist folder and include it in your html.

<script src="js/leon.js"></script>

Generate LeonSans and draw it in the Canvas element of HTML5.

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

For the drawing animation, include TweenMax (JS animation library) in your html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

And update all the drawing values from 0 to 1

let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
    TweenMax.fromTo(leon.drawing[i], 1.6, {
        value: 0
    }, {
        delay: i * 0.05,
        value: 1,
        ease: Power4.easeOut
    });
}

Option list

Name Type Description
text string The text that needs to be shown.
size integer The size of the text.
weight number The weight of the font: 1 - 900. [Default: 1]
color array The colors of each characters. [Default: ['#000000']]
colorful array The colors for colorful effect. [Default: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']]
tracking integer The spacing between the characters of a block of text. [Default: 0]
leading integer The distance between each line of text. [Default: 0]
align string How the text content of the element is horizontally aligned: left, center, right. [Default: left]
pathGap number The gap between each coordinate of the points on a line of each character: 0 - 1. [Default: 0.5]
amplitude number The amplitude of the wave effect: 0 - 1. [Default: 0.5]
maxWidth number The width of the text sentence.
breakWord boolean Words break when reaching the end of a line. [Default: false]
fps number The FPS for the wave effect. [Default: 30]
isPath boolean true to get the coordinate values of the points on a line of each character. [Default: false]
isWave boolean true for the wave effect. [Default: false]

Properties

Name Type Description
lineWidth number The thickness of lines of the character.
scale number The scale of the character. scale is 1 when the font size is 500.
drawing array The drawing object values for each character. 0 is the beginning of the animation, 1 is the end of the animation state.
data array An object of the raw data for the text.
paths array The coordinate values of the points on a line of each character.
drawingPaths array The coordinate values of the points on a line of each character to draw the drawing animation in WebGL. It has 1px distance of each path.
wavePaths array The coordinate values of the points on a line for the wave effect.
rect Object The size of the text and its position: {x: x position, y: y position, w: width, h: height}.

Methods

Name Description
on() Add update event.
off() Remove update event.
position(x, y) Set the position of the text.
updateDrawingPaths() Update paths for drawing in WebGL (PIXI.js). It's very expensive, only call when it needs.
drawPixi(graphics) Draw text in WebGL with PIXI.js.
draw(ctx) Draw text in the Canvas element.
drawColorful(ctx) Draw the colorful effect.
wave(ctx, t) Draw the wave effect.
pattern(ctx, w, h) Draw rectangle shapes at each path point
grid(ctx) Draw grid for each type.
point(ctx) Draw circles at each drawing point and lines for each type.
box(ctx) Draw outline box for the text.
reset() Reset all the values.
dispose() Dispose.
Comments
  • TTF version?

    TTF version?

    I appreciate the whole point of this font is that it's dynamically generated, but we're curious about using it as a font for a brand. In this instance, we'd need to be able to use it in an old fashioned Adobe scenario - is there a way to output a traditional TTF / OTF etc file?

    opened by scottybo 11
  • How to animate text weight

    How to animate text weight

    Amazing work here! Sorry to ask this as it's not an issue with the project but my own question for working with Leon Sans.

    How can I create an animated weight change as shown in the README so that each letter becomes thicker after the previous one?

    I just can't figure it out and I don't know where else to ask. Thanks!

    opened by ChrisBup 7
  • Add diacritics support

    Add diacritics support

    It would be great if you added diacritics to this font. Especially the most common (http://www.ukstudentlife.com/Life/Computer/European.htm) ones would help a lot of users and aren't too complicated to add (like é, ü, ê).

    opened by DennisGaida 5
  • Metaball?

    Metaball?

    I really like the look of metaball, but can't figure out where it gets is unique "burnt-in" look. I tried to figure it out from the code, but all I see are standard weight, leading, tracking, etc, nothing that would account for the unique shape of the characters (ie, larger at the joints). Can you explain this one a little? Thanks.

    PS, reminds me a little of averia.

    opened by rcrath 3
  • npm module?

    npm module?

    Hi, love this font/library. Great work.

    Just wondering if there would be a way to distribute this on npm? This way it can be installed via the command line (npm install) and included as a direct dependency in more complex projects (for example, a game engine could include this as a built-in font).

    Cheers!

    opened by mattdesl 1
  • Fixing require for case-sensitive file systems

    Fixing require for case-sensitive file systems

    MacOS and Windows have, by default, case insensitive file systems, so both require('LeonSans') and require('leonsans') work with the src/leonsans.js, the same isn't true in systems where the filesystem is case sensitive like Linux, this pull request fixes it.

    opened by thomasfortes 1
  • Inclusive design

    Inclusive design

    We’ve been here before with great tools like this but they always tend to miss out ways to give a similar or even back up experience for users that are using assisted technologies. Is there anyway that you can add a layer to the framework that will provide this or will it be up us to provide that in some other way?

    opened by mijlee 1
  • Esperanto

    Esperanto

    Hello, nice project!

    Is there any chance in the future to add support for the Esperanto letters?

    They are only six on top of the common latin alphabet: ĉ ĝ ĥ ĵ ŝ ŭ

    opened by XanderLeaDaren 1
  • Demo not working

    Demo not working

    When I add the simple example under Usage in the README, I see the below image (without animation): Screen Shot 2019-08-31 at 4 29 58 PM

    Any ideas what might be going wrong? I followed the usage steps exactly 😕

    opened by amhunt 1
  • generateCanvas is not defined

    generateCanvas is not defined

    When I open examples directory on my server

    it emits below errors

    GET http://localhost:8888/leonsans/examples/js/util.js 404 (Not Found)
    
    Uncaught ReferenceError: generateCanvas is not defined
        at init (all.html:35)
        at window.onload (all.html:106)
    

    I think it should have js/util.js but the server can't find it

    Is there the other way to assign js/util.js path? or it just missed a thing?

    opened by ruucm 0
  • Change capital M to be above baseline

    Change capital M to be above baseline

    An amazing font is Leon Sans but it lacks some key features of quality minimalistic fonts. The best thing about the font would be the curved capital G but the capital M kind of holds it back a bit. If the M was above the baseline this font would be competing with the top fonts on the internet!

    opened by samuraininja360 0
  • website is still on 1.5

    website is still on 1.5

    Just fyi:

    Your website's examples still use an older version of leonsans and thus doesn't display correctly in latest Safari...

    https://leon-kim.com/examples/#canvas-basic

    opened by tiptronic 3
  • Output to SVG

    Output to SVG

    Is there any option planned to output the drawn characters to SVG? (I don't mean drawing the canvas and then exporting to SVG, but exporting to SVG vector data).

    Any insights?

    opened by tiptronic 0
  • Add some simple Chinese characters...

    Add some simple Chinese characters...

    Awesome project! I love it. Could you add some simple Chinese character like:

    • 一 二 三 四 五 六 七 八 九 十 王 菲 中 下 上 广 小 大 人 子 之 ...

    By the way,could you tell us how to add the characters we want? Thank you!!

    opened by starkZH 0
A web application to 🔍inspect your GitHub Profile Stats📊 in a lucid way. Visualization made easy with Charts💡🚀

know-your-gitstats A web application to ?? inspect your GitHub Profile Stats ?? in a lucid way. Visualization made easy with Charts ?? ?? . ✅ Features

Shubham Jadhav 46 Oct 15, 2022
Processing Foundation 18.4k Nov 24, 2022
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Nov 25, 2022
qr code generator

node-qrcode QR code/2d barcode generator. Highlights Installation Usage Error correction level QR Code capacity Encoding Modes Binary data Multibyte c

Ryan Day 6.2k Nov 19, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Nov 23, 2022
A repostory of samples, which demonstrates, how to use the 'Power Tools' extension for Visual Studio Code.

vscode-powertools-samples A repository of samples, which demonstrates, how to use the Power Tools extension for Visual Studio Code. Apps data-url-conv

e.GO Mobile 7 Feb 3, 2022
The code base that powered India in Pixels' YouTube channel for more than 2 years - now open sourced for you to use on your own projects

India in Pixels Bar Chart Racing For over two years, this nifty code base powered India in Pixels' YouTube channel with videos fetching over millions

India in Pixels 140 Sep 7, 2022
[Book] 2019 edition of our front-end development handbook

Front-End Developer Handbook 2019 Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end enginee

Frontend Masters 4.1k Nov 26, 2022
The fastest JSON schema Validator. Supports JSON Schema draft-04/06/07/2019-09/2020-12 and JSON Type Definition (RFC8927)

Ajv JSON schema validator The fastest JSON validator for Node.js and browser. Supports JSON Schema draft-06/07/2019-09/2020-12 (draft-04 is supported

Ajv JSON schema validator 11.9k Nov 28, 2022
Leon is a simple WhatsApp Bot.

Leon is a simple WhatsApp Bot.

TOXIC DEVIL 25 Nov 20, 2022
A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.

REVENGE.CSS The premise of revenge.css is simple: A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in com

Heydon Pickering 719 Nov 15, 2022
WIP : Un pictionary mais avec 15 trait droits (sans courbes)

TODO Signer l'ID Ban dès le lobby Limiter la taille des pseudos Joueur déconnecté avec une couleur Afficher un message en cas de kick Limiter les devi

Jonathan 11 Apr 25, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 32 Nov 25, 2022
Website to present projects made by me and that are part of my personal portfolio. It was made using React, HTML y Scss (CSS).

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Portfolio Jesús Leal 0 Dec 23, 2021
Simple realtime chat application made by NodeJS, Express, Socket.io and Vanilla Javascript. This project is made to discover socket.io and understand its basic features.

LearnByChat App Simple realtime chat application made with NodeJS, Express, Socket.io and Vanilla Javascript. This project is made to discover socket.

Ayoub Saouidi 1 Dec 19, 2021
Hello! Welcome to Our own Live Code Editor 2!! This is supported tabs and full-screen editing, Console, tabs and more are coming. We uses this one in our all tutorials. Made by @E-Coders & @Genius398

Live Code Editor 2 Hello! this is our live code editor an another second release version of our main Resporibity. This have style as tabs and more fea

Educational Websites 5 Nov 18, 2021
It is a discord bot bot which can play lofi song in different language 24/7. It has premium system and cool embed looks with buttons. It can play youtube songs, playlists. This bot code was made by Supreme#2401. It uses djs V12

Lofi-Radio-Music-Bot It is a discord bot bot which can play lofi song in different language 24/7. It has premium system and cool embed looks with butt

Diwas Atreya 86 Nov 9, 2022
This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundl

Koma Human 26 Oct 28, 2022
This is email scheduler made using MERN. This repo contains server code, client repo is linked in readme.

Email Scheduler Client This is an email scheduler server (client in different repository). It is made using node.js/express.js. Overview User can sign

Sai Charan 2 Apr 14, 2022
Responsive, auto-saving To-Do List made from scratch using JavaScript only, but refactoring the code into ES6 standard

Project Name ES6 AWESOME BOOKS Website Name AWSM BOOKS Project Website (GitHub Pages) https://github.com/Zeraltz/es6-awsm-books Clone the Project git

Andres Mauricio Cantillo 5 Jun 25, 2022