
Leon Sans, a geometric typeface made with code - BafS
https://github.com/cmiscm/leonsans
======
kccqzy
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/lowe...](https://github.com/cmiscm/leonsans/blob/master/src/font/lower.js))
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).

~~~
svat
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/...](https://s3-us-
west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf)
) 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
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.

------
pacaro
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)

~~~
tomcam
Beautifully done. Thank you. Also, Durer was a genius.

------
hirundo
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.

~~~
clhodapp
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
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.

------
huhtenberg
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
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.

------
spectramax
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
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
It's very similar to Futura, another geometric typeface that was in fact used
for a lot of body text.

~~~
spectramax
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.

~~~
serpentines
Futura was implemented in the NASA standards manuals[0], and was then used by
many others (including Boeing[1] and IBM) for cockpit lettering, plaques, and
technical manuals/drawings.

[0]:
[https://msis.jsc.nasa.gov/sections/section09.htm#_9.5_LABELI...](https://msis.jsc.nasa.gov/sections/section09.htm#_9.5_LABELING_AND)
also linked here [2] [1] [https://www.avsim.com/forums/topic/133206-boeing-
panel-fonts...](https://www.avsim.com/forums/topic/133206-boeing-panel-fonts/)
[2]:
[https://news.ycombinator.com/item?id=19625838](https://news.ycombinator.com/item?id=19625838)

------
ofrzeta
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.

~~~
cpach
I’m not so sure about that. AFAICT it’s possible to add accessibility to
canvas elements. See e.g.
[http://pauljadam.com/demos/canvas.html](http://pauljadam.com/demos/canvas.html)

~~~
ofrzeta
Well, ok, you can provide accessibility alternatives to a Canvas. But does it
make much sense to do that for something that would otherwise be text? Ok,
granted that Leon Sans will probably be used for nice headers and such it
would probably be feasible.

------
alanbernstein
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.

------
josephg
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
do you know about hershey fonts?

~~~
josephg
I do; but I don’t think they look as good as this!

------
hawski
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.

------
pvinis
Iosevka[0] is another great font that is code-generated.

0: [https://github.com/be5invis/Iosevka](https://github.com/be5invis/Iosevka)

~~~
eddyg
Such a _fantastic_ font for coding, with a variant for _any_ stylistic
alternatives you prefer/desire!

------
emmanueloga_
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)

------
fangpenlin
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

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

~~~
ThomasBHickey
Metafont supports both stroke-based and outlined fonts.

------
Yuval_Halevi
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

------
205guy
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
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.

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

------
mlyle
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.

------
vkaku
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.

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

------
ru999gol
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/uppe...](https://github.com/cmiscm/leonsans/blob/master/src/font/upper.js)

------
guerrilla
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.

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

~~~
jstummbillig
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
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.

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

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

------
SCdF
Fonts are like art: I don't know exactly why I like something, but I know when
I do.

This font is gorgeous.

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

~~~
jen729w
Humming along on my iPad. It looks amazing!

------
cat199
a) awesome font

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

------
LilBytes
This is absolutely beautiful.

Wow! Thank you for the post.

------
koliber
Is this <blink 2.0>?

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

