Leon Sans, a geometric typeface made with code

687 点作者 BafS超过 5 年前

30 条评论

kccqzy超过 5 年前

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 <a href="https://github.com/cmiscm/leonsans/blob/master/src/font/lower.js" rel="nofollow">https://github.com/cmiscm/leonsans/blob/master/src/font/lowe...</a>) 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).

评论 #20856279 未加载

评论 #20855090 未加载

评论 #20856114 未加载

pacaro超过 5 年前

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 <a href="http://pollrobots.github.io/BlogCode/durer.html" rel="nofollow">http://pollrobots.github.io/BlogCode/durer.html</a>

评论 #20863983 未加载

评论 #20864942 未加载

评论 #20858628 未加载

hirundo超过 5 年前

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.

评论 #20856515 未加载

评论 #20855871 未加载

评论 #20855961 未加载

评论 #20856053 未加载

评论 #20905979 未加载

评论 #20855890 未加载

huhtenberg超过 5 年前

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] <a href="https://en.wikipedia.org/wiki/Variable_fonts" rel="nofollow">https://en.wikipedia.org/wiki/Variable_fonts</a>[2] <a href="https://en.wikipedia.org/wiki/QuickDraw_GX#TrueType_GX" rel="nofollow">https://en.wikipedia.org/wiki/QuickDraw_GX#TrueType_GX</a>[3] <a href="https://webkit.org/blog/7051/variable-fonts-on-the-web/" rel="nofollow">https://webkit.org/blog/7051/variable-fonts-on-the-web/</a>

评论 #20857158 未加载

spectramax超过 5 年前

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.

评论 #20857132 未加载

ofrzeta超过 5 年前

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.

评论 #20857417 未加载

评论 #20856978 未加载

评论 #20875298 未加载

评论 #20859007 未加载

评论 #20856963 未加载

alanbernstein超过 5 年前

This is fascinating, there is quite a bit of overlap with a font that I started designing recently: <a href="http://alanbernstein.net/images/line-font-lowercase" rel="nofollow">http://alanbernstein.net/images/line-font-lowercase</a>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: <a href="https://mzucker.github.io/2016/08/03/miniray.html" rel="nofollow">https://mzucker.github.io/2016/08/03/miniray.html</a>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:<pre><code> 'e': [Line([-0.5, 0.5], [0.5, 0.5]), Arc([0, 0.5], 0.5, 0, 7/4)], </code></pre> I hope I can find the time to experiment with this.

josephg超过 5 年前

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!

评论 #20856645 未加载

hawski超过 5 年前

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超过 5 年前

Iosevka[0] is another great font that is code-generated.0: <a href="https://github.com/be5invis/Iosevka" rel="nofollow">https://github.com/be5invis/Iosevka</a>

评论 #20865408 未加载

emmanueloga_超过 5 年前

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: <a href="https://en.wikipedia.org/wiki/Motion_graphics" rel="nofollow">https://en.wikipedia.org/wiki/Motion_graphics</a>2: <a href="https://en.wikipedia.org/wiki/Kinetic_typography" rel="nofollow">https://en.wikipedia.org/wiki/Kinetic_typography</a>3: <a href="https://en.wikipedia.org/wiki/Adobe_After_Effects" rel="nofollow">https://en.wikipedia.org/wiki/Adobe_After_Effects</a>

fangpenlin超过 5 年前

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超过 5 年前

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

评论 #20855802 未加载

Yuval_Halevi超过 5 年前

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

205guy超过 5 年前

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.

评论 #20856159 未加载

leegr超过 5 年前

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

mlyle超过 5 年前

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超过 5 年前

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超过 5 年前

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

ru999gol超过 5 年前

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": <a href="https://github.com/cmiscm/leonsans/blob/master/src/font/upper.js" rel="nofollow">https://github.com/cmiscm/leonsans/blob/master/src/font/uppe...</a>

guerrilla超过 5 年前

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超过 5 年前

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

评论 #20855669 未加载

kossTKR超过 5 年前

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

snazz超过 5 年前

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

SCdF超过 5 年前

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

hanniabu超过 5 年前

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

评论 #20856069 未加载

cat199超过 5 年前

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

LilBytes超过 5 年前

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

koliber超过 5 年前

Is this <blink 2.0>?

intricatedetail超过 5 年前

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