7 ms·

Leon Sans, a geometric typeface made with code

687 points by BafS 7y ago

kccqzy 7y ago
It should be noted that Metafont is also a popular system for creating fonts with code. It is even more meta than this because it's a language for creating fonts with code. When looking at exactly how glyphs are defined (see https://github.com/cmiscm/leonsans/blob/master/src/font/lower.js https://github.com/cmiscm/leonsans/blob/master/src/font/lowe...) it struck me as quite similar to reading raw SVG paths with plenty of magic numbers. It doesn't strike me as particularly "code"-like per se (more like an extremely limited DSL to describe data).
- userbinator 7y ago
  The main page of the project says "The font is made with code, it has coordinate values of the drawing points for each type." Indeed, a list of point coordinates and types (on/off curve) is at the core of how every vector graphics format, including font files (which are not much more than collections --- glyphs --- of such graphics) is defined, so that's not saying much. The main difference with other font formats seems to be that this font is stroked and not filled, which enables a lot of the effects shown; but the "wave" effect is not hard to produce from any other font --- calculate intermediate points if desired, and then repeatedly rasterise using a time-varying random perturbation of each point.
  - buckminster 7y ago
    Stroked fonts aren't new of course. See Hershey fonts and plotter fonts in general for examples.
    - xorcist 7y ago
      Or indeed Metafont.
- foobar_ 7y ago
  Can't you do the same with svg though ?
  - shawnz 7y ago
    Or TTF? Aren't all font formats programmable?
    - necovek 7y ago
      Truetype fonts "on their own" aren't, but they do contain a hinting table which allows one to define "hints" which will reposition curve points based on pixel grid they are being rendered in (a bit simplified). But no, you can't have multiple weights defined in the truetype format, though certain source font formats surely have them and can generate multiple TTFs. METAFONT is the ultimate fonts-with-code type system, but I am not sure if non-bitmap font generation tooling has moved away from METAPOST (haven't looked at it in years). FontForge is scriptable as well, but does not have some of the niceties of MF (like equations which get resolved if possible).
      - csande17 7y ago
        OpenType has an extension that allows you to define multiple weights. It doesn't seem nearly as powerful as METAFONT, though; you can just specify a set of offsets to apply to each point in each letter shape: https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview#variation-space-default-instances-and-adjustment-deltas https://docs.microsoft.com/en-us/typography/opentype/spec/ot...
- svat 7y ago
  I upvoted this comment, but sadly I wouldn't call METAFONT a “popular” system. The number of people who have successfully created “true” meta-fonts as Knuth intended is tiny. Nevertheless, when used with skill it can be very satisfying, as in Knuth's paper that I can only describe as a performance (The Concept of a Meta-Font, https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/... ) See also A Punk Meta-Font (https://www.tug.org/TUGboat/tb09-2/tb21knut.pdf https://www.tug.org/TUGboat/tb09-2/tb21knut.pdf) where he describes waking up one morning with an idea to create a certain kind of font, going to the computer at 1pm, and basically being done by 4pm. It is interesting to see the ideas from METAFONT basically ignored and misinterpreted by most of the mainstream of type designers (despite people like Zapf, Bigelow, Holmes, Carter and Southall being involved with the Stanford typography project and helping Knuth refine Computer Modern), only to be slowly reintroduced decades later in new forms (variable fonts etc).
  - svat 7y ago
    Forgot to mention: this site https://www.metaflop.com/modulator https://www.metaflop.com/modulator ought to be better known, and I ought to remember to mention it every time I mention METAFONT. One great drawback of METAFONT, which held back (still does, but used to too) its adoption in the decades when we could have wonderful things built on it, is the lack of quick visual feedback. (The bigger one of course, is that most font designers don't want to describe their shapes with equations: they think in curves, not about curves.) As I understand it, the site is developed by a couple of enthusiasts and goes a long way to address that problem. At https://www.metaflop.com/modulator https://www.metaflop.com/modulator just adjust sliders to create a unique font (or get something random by clicking "flop it!", and then tweak it). You can even download the resulting font if you like it.
  - fho 7y ago
    > a performance Yes it was ... bravo! (No really that was a fantastic read)
hawski 7y ago
It looks terrific and really remarkable. There must be something like it for an animation software. Could somebody point me to the right direction, outside of web? However please refrain from usage on the web. Artistic and presentation use is ok, but CRUD, most blogs and other utilities is not ok.
snazz 7y ago
This would make a really cool combo with something like reveal.js, for the world’s coolest presentation transitions.
fangpenlin 7y ago
This looks so awesome! Unlimited use-cases. Just however I can hear my Macbook Pro taking off (air fan spinning like crazy) when browsing the demo page lol
hatmatrix 7y ago
Coolness of the idea aside, I'm sitting here trying to decide if it looks better than Roboto, my current go-to font.
- jstummbillig 7y ago
  different use cases. Roboto is the the more neutral font, excelling in interface and copy type. This strikes me as a display font. Use it for headlines and expressive use as seen in the demos.
  - jhanschoo 7y ago
    I would like to add on that Roboto is a bit special in that moreso than most other typefaces used for body text, it is excellent when used for for text at very small sizes.
layoutIfNeeded 7y ago
So, a stroke-based font like anything made with METAFONT?
- ThomasBHickey 7y ago
  Metafont supports both stroke-based and outlined fonts.
josephg 7y ago
Oh this is cool! I do plotter art sometimes and I’ve been looking for a good font to use for awhile. Most modern fonts don’t work well when drawn with a plotter because they depend heavily on fills rather than pure strokes. Thanks for this - I’ll give this a try!
- joshu 7y ago
  do you know about hershey fonts?
  - josephg 7y ago
    I do; but I don’t think they look as good as this!
kossTKR 7y ago
This looks absolutely stellar. Also the animations strike a perfect balance between style and gimmick. Awesome work!
intricatedetail 7y ago
This is smashing! Something for a cool cat like myself.
hirundo 7y ago
Combine this with eye tracking for a page of text that grows just the words or figures you're looking at. You could display a larger page on a smaller one. E.g. show a multi page newspaper section on a single page, illegibly small until you focus on a particular headline. As you focus on that its teaser becomes visible, then the leading paragraph, etc. You could display a link that when you look at it, it grows and resolves into its own content, recursively. Surf links by zooming in. The back button zooms out. It could be a natural way to navigate a graph of text.
- Nydhal 7y ago
  Very interesting! wouldn't just scrolling (in 2D) suffice instead of costly eye-tracking? also localized zooming is can be approximated by displaying but on a curved surface.
- sansnomme 7y ago
  Something similar to this was done for early iPhone keyboards; not all touchscreen buttons were the same size.
- clhodapp 7y ago
  Couldn't you achieve this with any font by rendering in higher resolution, downscaling to the size of the screen, and then having a "magnification" box follow your eyes around?
  - rahimnathwani 7y ago
    This would be a great feature for GoodReader or another iPad PDF reader. You wouldn't even need eye tracking: just magnify two inches above and to the left of my finger.
- knolax 7y ago
  Sounds disorienting.
- Iv 7y ago
  If you ever do that, word from someone who worked on AR: have a very fast system to do the eye tracking (and the subsequent compositing), use cameras that are faster than 60 fps because no one will want a system that takes 16 ms to react to eye movements.
cat199 7y ago
a) awesome font b) great, now my browser can also be dynamically generating typefaces in order to programmatically render the html
roger104 7y ago
Very cool - now if only I could get the "colorful" version of that font for Vim...
205guy 7y ago
I'm going to join the chorus saying that it's cool what you can do with an algorithmic and programmable font. However, my next thought is that will create noisy and busy displays or web pages and so it is of limited practical/every-day use. I showed it to an Aspie friend who recoiled at all the moving letters. Just because you can, doesn't mean you should.
- ficklepickle 7y ago
  I'm an aspie and I enjoyed it. My first thought was lack of accessibility. But it could be neat for logos or artsy stuff. The spamming of the browser history, however, did annoy me. I am on mobile and had to just close the tab.
guerrilla 7y ago
Is there a non-dynamic version of this font or is it specific to this project? I see other geometrics in Wikipedia but not this one.
hanniabu 7y ago
Pretty cool, but the WebGL examples on your page brought my computer to a crawl.
- jen729w 7y ago
  Humming along on my iPad. It looks amazing!
mlyle 7y ago
It's cool- I like the dynamic weighting and the minimal control points. As other people point out, there's very little "code." It would be cool if features would slowly nudge as you increase weight to ensure that they are preserved and balance is maintained as the weight increases.
spectramax 7y ago
From what I know, fonts are created by optical judgment, fiddling with kerning until it looks right and a tremendous amount of trial and error - this is because our vision system's complexity is compounded by "short-cuts" (optical illusions) that brain takes when processing dorsal and ventral pathways of the brain. In my view, this font is jarring to the eyes and ugly - I am not sure if this has to do with the programmatic nature (variable fonts are sort of programmatic, but with aforementioned manual adjustments) or if the font design itself. If you're a typographer, please share your thoughts and critique. A font such as this can be categorized under "Display font" but it would not pass the mustard for any serious candidate for text.
- jhanschoo 7y ago
  Not a typographer, but this is by no means an inferior typeface. You are correct that it is not suited for large bodies text, but this is shared by almost all geometric typefaces. Geometric typefaces are typically used to communicate minimalism and modernism. > it would not pass the mustard for any serious candidate for text. Many typefaces aren't designed for text but for identity. This one is very suitable for, say, asides and highlights in magazines, branding, poster copy, etc.. That it's amenable to modification because of the way it's coded points to its utility for these purposes. A google search gives me these: https://creativemarket.com/blog/geometric-sans-serif-fonts https://creativemarket.com/blog/geometric-sans-serif-fonts
  - userbinator 7y ago
    It's very similar to Futura, another geometric typeface that was in fact used for a lot of body text.
    - spectramax 7y ago
      That's what it reminded me of too. Futura is also used for serious display text such as cockpit controls by Airbus (?) if I am not mistaken.
      - 7y ago
LilBytes 7y ago
This is absolutely beautiful. Wow! Thank you for the post.
Yuval_Halevi 7y ago
I must say that it's one of the coolest sites I've seen lately Beautiful fonts and I love how they show it in many different variations using creative animations
vkaku 7y ago
That's impressive AF. The website demo is cool, although it ran a bit slow on my PC/GPU. I love the fact that most stuff (including paintings) are better created as a command stream vs when rasterized. Minimum( number(Commands), number(RasterizedOutput) ) is always a deciding factor, but this is indeed well done.
ofrzeta 7y ago
It's nice but it's no longer HTML text. So you can't use it as a web font or for any HTML text elements. Also no cut and paste, no accessibility etc.
- dmix 7y ago
  Is there really no way to turn this into a WOFF? It's beautiful!
  - chx 7y ago
    Can't see a problem. https://graphicdesign.stackexchange.com/a/119350/69210 https://graphicdesign.stackexchange.com/a/119350/69210
    - ofrzeta 7y ago
      Well, I can. Not sure how your pasting a StackOverflow URL is an easy solution to that problem. I see no mention of SVG on the Leon site. To use the proposed solution you would first need to generate SVG from the Leon Javascript Canvas code. That's probably not impossible but certainly not "easy".
      - chx 7y ago
        Oh! https://github.com/gliffy/canvas2svg https://github.com/gliffy/canvas2svg
        ofrzeta 7y ago
        Just to make a point I cloned that repo and ran "npm test" that failed with "/tmp/canvas2svg/node_modules/socket.io/lib/store.js:35 Store.prototype.__proto__ = EventEmitter.prototype; TypeError: Cannot read property 'prototype' of undefined ..." But otherwise I am sure it will work out of the box. Just keep on Googling!
- cpach 7y ago
pacaro 7y ago
Albrecht Durer gave detailed instructions on how to construct the upper case letters (or at least those needed to write Latin) using compass and ruler. A while back I made a coffeescript version of that http://pollrobots.github.io/BlogCode/durer.html http://pollrobots.github.io/BlogCode/durer.html
- tgv 7y ago
  Very pretty.
- tomcam 7y ago
  Beautifully done. Thank you. Also, Durer was a genius.
- tincholio 7y ago
  That is indeed beautiful!
huhtenberg 7y ago
The OpenType spec includes support for variable weights, added in 2016. This is yet another feature it borrowed from TrueType GX, which in turn was a part of Mac's QuickDraw GX dating back to mid 90s. [1] https://en.wikipedia.org/wiki/Variable_fonts https://en.wikipedia.org/wiki/Variable_fonts [2] https://en.wikipedia.org/wiki/QuickDraw_GX#TrueType_GX https://en.wikipedia.org/wiki/QuickDraw_GX#TrueType_GX [3] https://webkit.org/blog/7051/variable-fonts-on-the-web/ https://webkit.org/blog/7051/variable-fonts-on-the-web/
- rememberlenny 7y ago
  Variable fonts are amazing. The font distributor Im working with is making a huge push to provide a large library of variable web fonts by the end of this year.
emmanueloga_ 7y ago
Super cool work! Congrats for the birth of baby Leon :-) -- I got interested in typographic animation a while back, there are two related Wikipedia pages: "Motion Graphics" [1] and "Kinetic Typography" [2]. There is not a lot of info describing algorithms to perform Kinetic Typography that I could find. There are a few tools for doing Kinetic Typography for After Effects [3] and a couple other random software products of varying quality. Btw, After Effects seems to be the closed-source reference implementation for all sorts of complex and cool looking effects. If for some reason all releases and source code of After Effects where to disappear from existence, it would set back the whole field of Motion Graphics by 25 years... 1: https://en.wikipedia.org/wiki/Motion_graphics https://en.wikipedia.org/wiki/Motion_graphics 2: https://en.wikipedia.org/wiki/Kinetic_typography https://en.wikipedia.org/wiki/Kinetic_typography 3: https://en.wikipedia.org/wiki/Adobe_After_Effects https://en.wikipedia.org/wiki/Adobe_After_Effects
SCdF 7y ago
Fonts are like art: I don't know exactly why I like something, but I know when I do. This font is gorgeous.
ru999gol 7y ago
that would be interesting if "made with code" was true. In reality this is not anywhere near close to what I would dare to describe as "made with code": https://github.com/cmiscm/leonsans/blob/master/src/font/upper.js https://github.com/cmiscm/leonsans/blob/master/src/font/uppe...
pvinis 7y ago
Iosevka[0] is another great font that is code-generated. 0: https://github.com/be5invis/Iosevka https://github.com/be5invis/Iosevka
- eddyg 7y ago
  Such a fantastic font for coding, with a variant for any stylistic alternatives you prefer/desire!
koliber 7y ago
Is this <blink 2.0>?
alanbernstein 7y ago
This is fascinating, there is quite a bit of overlap with a font that I started designing recently: http://alanbernstein.net/images/line-font-lowercase http://alanbernstein.net/images/line-font-lowercase I do small projects on CNC machines, and I got annoyed at having to trace both sides of a character, when using the outline of a standard font. In response, I created the single-stroke characters shown above, but only enough of them to draw basic labels. Part of my original inspiration was this blog post: https://mzucker.github.io/2016/08/03/miniray.html https://mzucker.github.io/2016/08/03/miniray.html It would be interesting to do a closer comparison of these two fonts, it looks like some of our letters are identical. I definitely prefer some of Leon's characters, especially the 's'. It should be easy enough for me to implement mine in javascript, because I focused on simplicity of the glyph definitions. For example, lowercase 'e' is defined like this: 'e': [Line([-0.5, 0.5], [0.5, 0.5]), Arc([0, 0.5], 0.5, 0, 7/4)], I hope I can find the time to experiment with this.
leegr 7y ago
What a perfectly normal way to celebrate the birth of a baby

687 points by BafS 7y ago

It should be noted that Metafont is also a popular system for creating fonts with code. It is even more meta than this because it's a language for creating fonts with code. When looking at exactly how glyphs are defined (see https://github.com/cmiscm/leonsans/blob/master/src/font/lower.js https://github.com/cmiscm/leonsans/blob/master/src/font/lowe...) it struck me as quite similar to reading raw SVG paths with plenty of magic numbers. It doesn't strike me as particularly "code"-like per se (more like an extremely limited DSL to describe data).

userbinator 7y ago
The main page of the project says "The font is made with code, it has coordinate values of the drawing points for each type." Indeed, a list of point coordinates and types (on/off curve) is at the core of how every vector graphics format, including font files (which are not much more than collections --- glyphs --- of such graphics) is defined, so that's not saying much. The main difference with other font formats seems to be that this font is stroked and not filled, which enables a lot of the effects shown; but the "wave" effect is not hard to produce from any other font --- calculate intermediate points if desired, and then repeatedly rasterise using a time-varying random perturbation of each point.
- buckminster 7y ago
  Stroked fonts aren't new of course. See Hershey fonts and plotter fonts in general for examples.
  - xorcist 7y ago
    Or indeed Metafont.
foobar_ 7y ago
Can't you do the same with svg though ?
- shawnz 7y ago
  Or TTF? Aren't all font formats programmable?
  - necovek 7y ago
    Truetype fonts "on their own" aren't, but they do contain a hinting table which allows one to define "hints" which will reposition curve points based on pixel grid they are being rendered in (a bit simplified). But no, you can't have multiple weights defined in the truetype format, though certain source font formats surely have them and can generate multiple TTFs. METAFONT is the ultimate fonts-with-code type system, but I am not sure if non-bitmap font generation tooling has moved away from METAPOST (haven't looked at it in years). FontForge is scriptable as well, but does not have some of the niceties of MF (like equations which get resolved if possible).
    - csande17 7y ago
      OpenType has an extension that allows you to define multiple weights. It doesn't seem nearly as powerful as METAFONT, though; you can just specify a set of offsets to apply to each point in each letter shape: https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview#variation-space-default-instances-and-adjustment-deltas https://docs.microsoft.com/en-us/typography/opentype/spec/ot...
svat 7y ago
I upvoted this comment, but sadly I wouldn't call METAFONT a “popular” system. The number of people who have successfully created “true” meta-fonts as Knuth intended is tiny. Nevertheless, when used with skill it can be very satisfying, as in Knuth's paper that I can only describe as a performance (The Concept of a Meta-Font, https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/... ) See also A Punk Meta-Font (https://www.tug.org/TUGboat/tb09-2/tb21knut.pdf https://www.tug.org/TUGboat/tb09-2/tb21knut.pdf) where he describes waking up one morning with an idea to create a certain kind of font, going to the computer at 1pm, and basically being done by 4pm. It is interesting to see the ideas from METAFONT basically ignored and misinterpreted by most of the mainstream of type designers (despite people like Zapf, Bigelow, Holmes, Carter and Southall being involved with the Stanford typography project and helping Knuth refine Computer Modern), only to be slowly reintroduced decades later in new forms (variable fonts etc).
- svat 7y ago
  Forgot to mention: this site https://www.metaflop.com/modulator https://www.metaflop.com/modulator ought to be better known, and I ought to remember to mention it every time I mention METAFONT. One great drawback of METAFONT, which held back (still does, but used to too) its adoption in the decades when we could have wonderful things built on it, is the lack of quick visual feedback. (The bigger one of course, is that most font designers don't want to describe their shapes with equations: they think in curves, not about curves.) As I understand it, the site is developed by a couple of enthusiasts and goes a long way to address that problem. At https://www.metaflop.com/modulator https://www.metaflop.com/modulator just adjust sliders to create a unique font (or get something random by clicking "flop it!", and then tweak it). You can even download the resulting font if you like it.
- fho 7y ago
  > a performance Yes it was ... bravo! (No really that was a fantastic read)

hawski 7y ago

It looks terrific and really remarkable. There must be something like it for an animation software. Could somebody point me to the right direction, outside of web? However please refrain from usage on the web. Artistic and presentation use is ok, but CRUD, most blogs and other utilities is not ok.

snazz 7y ago

This would make a really cool combo with something like reveal.js, for the world’s coolest presentation transitions.

fangpenlin 7y ago

This looks so awesome! Unlimited use-cases. Just however I can hear my Macbook Pro taking off (air fan spinning like crazy) when browsing the demo page lol

hatmatrix 7y ago

Coolness of the idea aside, I'm sitting here trying to decide if it looks better than Roboto, my current go-to font.

jstummbillig 7y ago
different use cases. Roboto is the the more neutral font, excelling in interface and copy type. This strikes me as a display font. Use it for headlines and expressive use as seen in the demos.
- jhanschoo 7y ago
  I would like to add on that Roboto is a bit special in that moreso than most other typefaces used for body text, it is excellent when used for for text at very small sizes.

layoutIfNeeded 7y ago

So, a stroke-based font like anything made with METAFONT?

ThomasBHickey 7y ago
Metafont supports both stroke-based and outlined fonts.

josephg 7y ago

Oh this is cool! I do plotter art sometimes and I’ve been looking for a good font to use for awhile. Most modern fonts don’t work well when drawn with a plotter because they depend heavily on fills rather than pure strokes. Thanks for this - I’ll give this a try!

joshu 7y ago
do you know about hershey fonts?
- josephg 7y ago
  I do; but I don’t think they look as good as this!

kossTKR 7y ago

This looks absolutely stellar. Also the animations strike a perfect balance between style and gimmick. Awesome work!

intricatedetail 7y ago

This is smashing! Something for a cool cat like myself.

hirundo 7y ago

Combine this with eye tracking for a page of text that grows just the words or figures you're looking at. You could display a larger page on a smaller one. E.g. show a multi page newspaper section on a single page, illegibly small until you focus on a particular headline. As you focus on that its teaser becomes visible, then the leading paragraph, etc. You could display a link that when you look at it, it grows and resolves into its own content, recursively. Surf links by zooming in. The back button zooms out. It could be a natural way to navigate a graph of text.

Nydhal 7y ago
Very interesting! wouldn't just scrolling (in 2D) suffice instead of costly eye-tracking? also localized zooming is can be approximated by displaying but on a curved surface.
sansnomme 7y ago
Something similar to this was done for early iPhone keyboards; not all touchscreen buttons were the same size.
clhodapp 7y ago
Couldn't you achieve this with any font by rendering in higher resolution, downscaling to the size of the screen, and then having a "magnification" box follow your eyes around?
- rahimnathwani 7y ago
  This would be a great feature for GoodReader or another iPad PDF reader. You wouldn't even need eye tracking: just magnify two inches above and to the left of my finger.
knolax 7y ago
Sounds disorienting.
Iv 7y ago
If you ever do that, word from someone who worked on AR: have a very fast system to do the eye tracking (and the subsequent compositing), use cameras that are faster than 60 fps because no one will want a system that takes 16 ms to react to eye movements.

cat199 7y ago

a) awesome font b) great, now my browser can also be dynamically generating typefaces in order to programmatically render the html

roger104 7y ago

Very cool - now if only I could get the "colorful" version of that font for Vim...

205guy 7y ago

I'm going to join the chorus saying that it's cool what you can do with an algorithmic and programmable font. However, my next thought is that will create noisy and busy displays or web pages and so it is of limited practical/every-day use. I showed it to an Aspie friend who recoiled at all the moving letters. Just because you can, doesn't mean you should.

ficklepickle 7y ago
I'm an aspie and I enjoyed it. My first thought was lack of accessibility. But it could be neat for logos or artsy stuff. The spamming of the browser history, however, did annoy me. I am on mobile and had to just close the tab.

guerrilla 7y ago

Is there a non-dynamic version of this font or is it specific to this project? I see other geometrics in Wikipedia but not this one.

hanniabu 7y ago

Pretty cool, but the WebGL examples on your page brought my computer to a crawl.

jen729w 7y ago
Humming along on my iPad. It looks amazing!

mlyle 7y ago

It's cool- I like the dynamic weighting and the minimal control points. As other people point out, there's very little "code." It would be cool if features would slowly nudge as you increase weight to ensure that they are preserved and balance is maintained as the weight increases.

spectramax 7y ago

From what I know, fonts are created by optical judgment, fiddling with kerning until it looks right and a tremendous amount of trial and error - this is because our vision system's complexity is compounded by "short-cuts" (optical illusions) that brain takes when processing dorsal and ventral pathways of the brain. In my view, this font is jarring to the eyes and ugly - I am not sure if this has to do with the programmatic nature (variable fonts are sort of programmatic, but with aforementioned manual adjustments) or if the font design itself. If you're a typographer, please share your thoughts and critique. A font such as this can be categorized under "Display font" but it would not pass the mustard for any serious candidate for text.

jhanschoo 7y ago
Not a typographer, but this is by no means an inferior typeface. You are correct that it is not suited for large bodies text, but this is shared by almost all geometric typefaces. Geometric typefaces are typically used to communicate minimalism and modernism. > it would not pass the mustard for any serious candidate for text. Many typefaces aren't designed for text but for identity. This one is very suitable for, say, asides and highlights in magazines, branding, poster copy, etc.. That it's amenable to modification because of the way it's coded points to its utility for these purposes. A google search gives me these: https://creativemarket.com/blog/geometric-sans-serif-fonts https://creativemarket.com/blog/geometric-sans-serif-fonts
- userbinator 7y ago
  It's very similar to Futura, another geometric typeface that was in fact used for a lot of body text.
  - spectramax 7y ago
    That's what it reminded me of too. Futura is also used for serious display text such as cockpit controls by Airbus (?) if I am not mistaken.
    - 7y ago

LilBytes 7y ago

This is absolutely beautiful. Wow! Thank you for the post.

Yuval_Halevi 7y ago

I must say that it's one of the coolest sites I've seen lately Beautiful fonts and I love how they show it in many different variations using creative animations

vkaku 7y ago

That's impressive AF. The website demo is cool, although it ran a bit slow on my PC/GPU. I love the fact that most stuff (including paintings) are better created as a command stream vs when rasterized. Minimum( number(Commands), number(RasterizedOutput) ) is always a deciding factor, but this is indeed well done.

ofrzeta 7y ago

It's nice but it's no longer HTML text. So you can't use it as a web font or for any HTML text elements. Also no cut and paste, no accessibility etc.

dmix 7y ago
Is there really no way to turn this into a WOFF? It's beautiful!
- chx 7y ago
  Can't see a problem. https://graphicdesign.stackexchange.com/a/119350/69210 https://graphicdesign.stackexchange.com/a/119350/69210
  - ofrzeta 7y ago
    Well, I can. Not sure how your pasting a StackOverflow URL is an easy solution to that problem. I see no mention of SVG on the Leon site. To use the proposed solution you would first need to generate SVG from the Leon Javascript Canvas code. That's probably not impossible but certainly not "easy".
    - chx 7y ago
      Oh! https://github.com/gliffy/canvas2svg https://github.com/gliffy/canvas2svg
      - ofrzeta 7y ago
        Just to make a point I cloned that repo and ran "npm test" that failed with "/tmp/canvas2svg/node_modules/socket.io/lib/store.js:35 Store.prototype.__proto__ = EventEmitter.prototype; TypeError: Cannot read property 'prototype' of undefined ..." But otherwise I am sure it will work out of the box. Just keep on Googling!
cpach 7y ago

pacaro 7y ago

Albrecht Durer gave detailed instructions on how to construct the upper case letters (or at least those needed to write Latin) using compass and ruler. A while back I made a coffeescript version of that http://pollrobots.github.io/BlogCode/durer.html http://pollrobots.github.io/BlogCode/durer.html

tgv 7y ago
Very pretty.
tomcam 7y ago
Beautifully done. Thank you. Also, Durer was a genius.
tincholio 7y ago
That is indeed beautiful!

huhtenberg 7y ago

The OpenType spec includes support for variable weights, added in 2016. This is yet another feature it borrowed from TrueType GX, which in turn was a part of Mac's QuickDraw GX dating back to mid 90s. [1] https://en.wikipedia.org/wiki/Variable_fonts https://en.wikipedia.org/wiki/Variable_fonts [2] https://en.wikipedia.org/wiki/QuickDraw_GX#TrueType_GX https://en.wikipedia.org/wiki/QuickDraw_GX#TrueType_GX [3] https://webkit.org/blog/7051/variable-fonts-on-the-web/ https://webkit.org/blog/7051/variable-fonts-on-the-web/

rememberlenny 7y ago
Variable fonts are amazing. The font distributor Im working with is making a huge push to provide a large library of variable web fonts by the end of this year.

emmanueloga_ 7y ago

Super cool work! Congrats for the birth of baby Leon :-) -- I got interested in typographic animation a while back, there are two related Wikipedia pages: "Motion Graphics" [1] and "Kinetic Typography" [2]. There is not a lot of info describing algorithms to perform Kinetic Typography that I could find. There are a few tools for doing Kinetic Typography for After Effects [3] and a couple other random software products of varying quality. Btw, After Effects seems to be the closed-source reference implementation for all sorts of complex and cool looking effects. If for some reason all releases and source code of After Effects where to disappear from existence, it would set back the whole field of Motion Graphics by 25 years... 1: https://en.wikipedia.org/wiki/Motion_graphics https://en.wikipedia.org/wiki/Motion_graphics 2: https://en.wikipedia.org/wiki/Kinetic_typography https://en.wikipedia.org/wiki/Kinetic_typography 3: https://en.wikipedia.org/wiki/Adobe_After_Effects https://en.wikipedia.org/wiki/Adobe_After_Effects

SCdF 7y ago

Fonts are like art: I don't know exactly why I like something, but I know when I do. This font is gorgeous.

ru999gol 7y ago

that would be interesting if "made with code" was true. In reality this is not anywhere near close to what I would dare to describe as "made with code": https://github.com/cmiscm/leonsans/blob/master/src/font/upper.js https://github.com/cmiscm/leonsans/blob/master/src/font/uppe...

pvinis 7y ago

Iosevka[0] is another great font that is code-generated. 0: https://github.com/be5invis/Iosevka https://github.com/be5invis/Iosevka

eddyg 7y ago
Such a fantastic font for coding, with a variant for any stylistic alternatives you prefer/desire!

koliber 7y ago

Is this <blink 2.0>?

alanbernstein 7y ago

This is fascinating, there is quite a bit of overlap with a font that I started designing recently: http://alanbernstein.net/images/line-font-lowercase http://alanbernstein.net/images/line-font-lowercase I do small projects on CNC machines, and I got annoyed at having to trace both sides of a character, when using the outline of a standard font. In response, I created the single-stroke characters shown above, but only enough of them to draw basic labels. Part of my original inspiration was this blog post: https://mzucker.github.io/2016/08/03/miniray.html https://mzucker.github.io/2016/08/03/miniray.html It would be interesting to do a closer comparison of these two fonts, it looks like some of our letters are identical. I definitely prefer some of Leon's characters, especially the 's'. It should be easy enough for me to implement mine in javascript, because I focused on simplicity of the glyph definitions. For example, lowercase 'e' is defined like this: 'e': [Line([-0.5, 0.5], [0.5, 0.5]), Arc([0, 0.5], 0.5, 0, 7/4)], I hope I can find the time to experiment with this.

leegr 7y ago

What a perfectly normal way to celebrate the birth of a baby