Leon Sans

• Uncategorized

3 min. (654 words)

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/

uppercase

lowercase

number

What is special?

The font is made with code, it has coordinate values of the drawing points for each type. 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.

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

this.leon = new LeonSans({
    text: 'The quick brownnfox jumps overnthe 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

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.
destroy() Destroy.

87 comments

  2. I am now not certain where you are getting your information, but good topic.
    I must spend some time studying much more or understanding more.
    Thanks for great information I was searching for this info for my mission.

  8. Appreciating the commitment you put into your website
    and in depth information you provide. It’s awesome to come across a blog every once in a
    while that isn’t the same out of date rehashed information. Excellent read!
    I’ve saved your site and I’m adding your RSS feeds to my
    Google account.

  10. Woah! I’m really enjoying the template/theme of this blog.

    It’s simple, yet effective. A lot of times it’s very hard
    to get that “perfect balance” between usability and visual appeal.
    I must say that you’ve done a amazing job with this.

    Also, the blog loads extremely fast for me on Opera.
    Exceptional Blog!

  12. You actually make it seem really easy with your presentation however
    I in finding this matter to be actually something that I feel I would by no means understand.
    It kind of feels too complex and extremely large for me.
    I am taking a look ahead to your subsequent post, I will try to get the cling of
    it!

  13. I am really enjoying the theme/design of your site.
    Do you ever run into any internet browser compatibility issues?

    A few of my blog readers have complained about my website not operating correctly in Explorer
    but looks great in Opera. Do you have any suggestions
    to help fix this issue?

  15. hi!,I really like your writing very so much!
    share we keep in touch more about your post on AOL?
    I need a specialist on this space to unravel my problem.
    May be that’s you! Having a look forward to peer you.

  21. Its like you learn my mind! You seem to know so much about this, like you wrote the guide in it or something.
    I feel that you simply can do with a few % to pressure the message home a little bit,
    but instead of that, this is great blog. A great read.
    I will definitely be back.

  22. Do you have a spam problem on this website; I also am a blogger, and I was wondering your situation;
    many of us have developed some nice practices and we are looking to trade techniques with other folks,
    please shoot me an e-mail if interested.

  23. Greate article. Keep writing such kind of information on your site.
    Im really impressed by your blog.
    Hi there, You’ve done a great job. I will certainly digg it and
    for my part recommend to my friends. I am sure they will be benefited
    from this site.

  26. I’m not sure exactly why but this site is loading very slow for
    me. Is anyone else having this issue or is it a problem on my end?
    I’ll check back later on and see if the problem still exists.

  27. Whoa! This blog looks exactly like my old one! It’s on a totally different subject but it has pretty much the same page layout and design. Wonderful
    choice of colors!

  29. Hey! I could have sworn I’ve been to this website before
    but after browsing through some of the post I realized it’s new to
    me. Nonetheless, I’m definitely happy I found it and I’ll be bookmarking and checking back frequently!

  31. Hi my friend! I wish to say that this article is awesome, nice written and come with approximately all important
    infos. I would like to peer more posts like this .

  33. Can I simply just say what a comfort to uncover a person that actually understands
    what they are discussing over the internet.

    You definitely realize how to bring a problem
    to light and make it important. More and more people need to read this and understand
    this side of your story. I was surprised that you are not more popular since you
    surely possess the gift.

  34. Hello there! Do you use Twitter? I’d like to follow
    you if that would be okay. I’m definitely enjoying your blog and look forward to new posts.

  35. You ought to take part in a contest for one of the highest quality blogs on the web.
    I most certainly will highly recommend this site!

  36. My spouse and I stumbled over here by a different
    web page and thought I might check things out. I like what I see so now i’m following you.
    Look forward to looking at your web page yet again.

  38. I don’t even know the way I finished up here, however
    I thought this publish used to be good. I do not know who you’re
    however certainly you are going to a famous blogger should you aren’t already.
    Cheers!

  41. Hey just wanted to give you a quick heads up and let you know a few of the images aren’t loading
    correctly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different internet browsers
    and both show the same results.

  43. Great blog here! Also your website loads up fast! What host are
    you using? Can I get your affiliate link
    to your host? I wish my site loaded up as quickly as yours lol

  44. I know this web page provides quality dependent articles or reviews and extra
    stuff, is there any other website which provides such information in quality?

  48. Fantastic goods from you, man. I have understand your stuff previous to and you’re
    just extremely great. I actually like what you have acquired here, really like what you are
    stating and the way in which you say it. You make it enjoyable and you still care for to keep it
    wise. I can’t wait to read far more from you.
    This is really a great website.

  50. You really make it appear really easy together with your presentation but I in finding this
    topic to be really one thing which I believe I might by no means understand.

    It kind of feels too complex and very large
    for me. I am having a look forward on your next submit, I’ll attempt to get the dangle of
    it!

  53. Today, I went to the beachfront with my kids.
    I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She
    put the shell to her ear and screamed. There was a hermit crab inside and
    it pinched her ear. She never wants to go back! LoL I know this is completely off topic but I had to tell someone!

  55. Hi! I realize this is sort of off-topic however I
    needed to ask. Does managing a well-established blog such as yours require a large amount of
    work? I’m completely new to blogging however I do write in my diary everyday.
    I’d like to start a blog so I can share my own experience and thoughts online.

    Please let me know if you have any kind of suggestions or tips for
    brand new aspiring blog owners. Appreciate it!

  56. I am really loving the theme/design of your site.
    Do you ever run into any browser compatibility issues?
    A number of my blog readers have complained about my site not working correctly
    in Explorer but looks great in Firefox. Do you have any ideas
    to help fix this issue?

  57. Excellent blog you have here but I was wanting to know if you knew of any message boards that cover the same topics discussed in this article?
    I’d really love to be a part of online community where I
    can get suggestions from other experienced individuals that share
    the same interest. If you have any suggestions, please let me know.
    Thanks a lot!

  59. I have been surfing on-line greater than 3 hours as of late, but I
    never found any fascinating article like yours.
    It is pretty price enough for me. In my opinion, if all site owners and bloggers made excellent content
    as you probably did, the web will likely be much more helpful than ever before.

  60. Hi there, I believe your web site might be having browser compatibility
    problems. When I look at your site in Safari, it looks fine
    however, when opening in I.E., it has some overlapping issues.

    I just wanted to provide you with a quick heads up!
    Apart from that, wonderful website!

  61. Wonderful beat ! I wish to apprentice while you amend
    your site, how can i subscribe for a blog website? The account aided me a appropriate deal.
    I have been tiny bit acquainted of this your broadcast provided brilliant
    clear idea

  62. I really like your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do it for you?
    Plz answer back as I’m looking to construct my own blog and would like to
    find out where u got this from. kudos

  68. Hello There. I found your blog the usage of msn. That is a really well written article.

    I will be sure to bookmark it and come back to read more of your helpful information. Thank you for
    the post. I will definitely comeback.

  69. After I originally commented I appear to have clicked the -Notify
    me when new comments are added- checkbox and from now on every time a comment is added I receive 4 emails with the same comment.
    Is there a way you can remove me from that service? Thanks!

  70. Amazing blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would
    really make my blog shine. Please let me know
    where you got your design. Thank you

  71. Great goods from you, man. I’ve remember your stuff prior to and you’re simply extremely fantastic.
    I really like what you’ve received right here, really like what you
    are saying and the best way in which you are saying it.

    You are making it entertaining and you still take care of to
    keep it sensible. I can not wait to read much
    more from you. That is really a terrific site.

  72. I blog frequently and I genuinely thank you for your information. Your article has really peaked my interest.
    I’m going to bookmark your blog and keep checking
    for new information about once per week. I subscribed to your Feed too.

  75. Way cool! Some very valid points! I appreciate you writing this post plus the rest of the website is extremely good.

  77. Your mode of describing the whole thing in this article is actually pleasant,
    every one can effortlessly be aware of it, Thanks a lot.

  78. Greate post. Keep writing such kind of information on your blog.
    Im really impressed by your blog.
    Hi there, You’ve done an excellent job. I’ll definitely digg it and in my view suggest to my friends.

    I am confident they will be benefited from this site.

  79. What’s up colleagues, fastidious post and good urging
    commented at this place, I am really enjoying by these.

  80. I just could not go away your website prior to suggesting
    that I extremely enjoyed the usual information an individual
    provide to your visitors? Is going to be again continuously in order to inspect new posts

  81. Terrific post however I was wanting to know if you could write
    a litte more on this subject? I’d be very thankful if you could elaborate a little bit more.
    Cheers!

  83. Its such as you learn my thoughts! You seem to know a lot about this, like you wrote the e-book in it or something.
    I think that you just could do with a few % to drive the message house a
    bit, however other than that, this is wonderful blog.

    An excellent read. I’ll certainly be back.

  84. Terrific work! That is the type of information that are supposed to
    be shared across the net. Disgrace on the seek engines for no longer positioning this publish higher!

    Come on over and consult with my web site . Thank you =)

    My page poker pulsa online

  85. Excellent blog you have got here.. It’s difficult to find good quality writing like yours these days.
    I seriously appreciate individuals like you! Take care!!

  87. Today, I went to the beach front with mmy children. I found a sea
    shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.
    There was a hermit crab inside and itt pinched her ear.

    She never wants to go back! LoL I know this
    is completely off topic but I hadd to tell someone!

    Also visit my page: nude models

Leave a Reply

Your email address will not be published.