Leon Sans by Jongmin Kim

Leon Sans by Jongmin Kim

Leon Sans is an amazing font! A geometric sans-serif made entirely in code (javascript) by Jongmin Kim. Each drawing poing has coordinate values which you can modify to create custom shapes, effects or animations.

It allows to manipulate it like a variable font, to change font weight dynamically. But more than that you can create custom animations, effects or shapes in the HTML5 <canvas> element. He designed the font to celebrate his newborn baby Leon.

Examples

Drawing animation
Weight change
Colorful

See more examples on the Leon Sans Github repo or on the website at leon-kim.com/examples/

Check out for example the rain effect.

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.

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

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

requestAnimationFrame(animate);

function animate(t) {
    requestAnimationFrame(animate);
    this.ctx.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
    const x = (document.body.clientWidth - this.leon.rect.w) / 2;
    const y = (document.body.clientHeight - this.leon.rect.h) / 2;
    this.leon.position(x, y);
    this.leon.draw(this.ctx);
}

Option list

NameTypeDescription
textstringThe text that needs to be shown.
sizeintegerThe size of the text.
weightnumberThe weight of the font: 1 - 900. [Default: 1]
colorarrayThe colors of each characters. [Default: ['#000000']]
colorfularrayThe colors for colorful effect. [Default: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']]
trackingintegerThe spacing between the characters of a block of text. [Default: 0]
leadingintegerThe distance between each line of text. [Default: 0]
alignstringHow the text content of the element is horizontally aligned: left, center, right. [Default: left]
pathGapnumberThe gap between each coordinate of the points on a line of each character: 0 - 1. [Default: 0.5]
amplitudenumberThe amplitude of the wave effect: 0 - 1. [Default: 0.5]
maxWidthnumberThe width of the text sentence.
breakWordbooleanWords break when reaching the end of a line. [Default: false]
fpsnumberThe FPS for the wave effect. [Default: 30]
isPathbooleantrue to get the coordinate values of the points on a line of each character. [Default: false]
isWavebooleantrue for the wave effect. [Default: false]

 

Properties

NameTypeDescription
lineWidthnumberThe thickness of lines of the character.
scalenumberThe scale of the character. scale is 1 when the font size is 500.
drawingarrayThe drawing object values for each character. 0 is the beginning of the animation, 1 is the end of the animation state.
dataarrayAn object of the raw data for the text.
pathsarrayThe coordinate values of the points on a line of each character.
drawingPathsarrayThe 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.
wavePathsarrayThe coordinate values of the points on a line for the wave effect.
rectObjectThe size of the text and its position: {x: x position, y: y position, w: width, h: height}.

 

Methods

NameDescription
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.
destroy()Destroy.
20 September 2019 Leon Sans now includes .otf format
Download .oft fonts only
Category
Language support
Latin, partial Latin Extended (some diacritics were added)
Format
JS
License
MIT License    → Licenses explained
Tags
Author

Leon Sans Thin

Font preview image

Leon Sans Light

Font preview image

Leon Sans Regular

Font preview image

Leon Sans Medium

Font preview image

Leon Sans Bold

Font preview image