Leon Sans

A geometric sans-serif typeface made with code

TypographyCanvas
cmiscm/leonsansleon-kim.com/

README

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
- Drawing animation

Weight change
- Weight change

Wave
- Wave

Metaball
- Metaball

Plant
- Plant

Colorful
- Colorful

Color pattern
- Color pattern

Usage

Download the minified js file in dist folder and include it in your html.
  1. ``` html
  2. <script src="js/leon.js"></script>
  3. ```

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

  3. let leon, canvas, ctx;

  5. const sw = 800;
  6. const sh = 600;
  7. const pixelRatio = 2;

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

  14.     canvas.width = sw * pixelRatio;
  15.     canvas.height = sh * pixelRatio;
  16.     canvas.style.width = sw + 'px';
  17.     canvas.style.height = sh + 'px';
  18.     ctx.scale(pixelRatio, pixelRatio);

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

  27.     requestAnimationFrame(animate);
  28. }

  30. function animate(t) {
  31.     requestAnimationFrame(animate);

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

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

  39.     leon.draw(ctx);
  40. }

  42. window.onload = () => {
  43.     init();
  44. };
  45. ```

For the drawing animation, include TweenMax (JS animation library) in your html.
  1. ``` html
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  3. ```

And update all the drawing values from 0 to 1
  1. ``` js
  2. let i, total = leon.drawing.length;
  3. for (i = 0; i < total; i++) {
  4.     TweenMax.fromTo(leon.drawing[i], 1.6, {
  5.         value: 0
  6.     }, {
  7.         delay: i * 0.05,
  8.         value: 1,
  9.         ease: Power4.easeOut
  10.     });
  11. }
  12. ```

Option list


NameTypeDescription
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
`text`stringThe
`size`integerThe
`weight`numberThe
`color`arrayThe
`colorful`arrayThe
`tracking`integerThe
`leading`integerThe
`align`stringHow
`pathGap`numberThe
`amplitude`numberThe
`maxWidth`numberThe
`breakWord`booleanWords
`fps`numberThe
`isPath`boolean`true`
`isWave`boolean`true`

Properties


NameTypeDescription
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
`lineWidth`numberThe
`scale`numberThe
`drawing`arrayThe
`data`arrayAn
`paths`arrayThe
`drawingPaths`arrayThe
`wavePaths`arrayThe
`rect`ObjectThe

Methods


NameDescription
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
`on()`Add
`off()`Remove
`position(x,Set
`updateDrawingPaths()`Update
`drawPixi(graphics)`Draw
`draw(ctx)`Draw
`drawColorful(ctx)`Draw
`wave(ctx,Draw
`pattern(ctx,Draw
`grid(ctx)`Draw
`point(ctx)`Draw
`box(ctx)`Draw
`reset()`Reset
`dispose()`Dispose.