Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Brutalita Sans: An Experimental Font and Font Editor

brutalita.com

Post reply on HN
Print view View original

61–70 of 86 posts

Re: Brutalita Sans: An Experimental Font and Font Editor

#61

Post by nph278 »

dheera wrote: post #58
pyrale wrote: post #43

Hate the font, love the editor. edit: tried to type "à", and the letter is not recognized in the font (appears in red in the editor). Would there be a way to tell the editor that "à" = "a" + "`", rather than retyping the symbol from scratch? edit2 : Having to remove all the [2..n] points if you want to change the second point you made is also a bit of a pain, especially for people like me with little experience of wh…

I want to create a GenAI fork of this where you do one character and it tries to mimic the style for all of the others.

Relevant tom7 project:

http://tom7.org/lowercase/

Re: Brutalita Sans: An Experimental Font and Font Editor

#63

Post by javierbyte »

Author here! I'm so happy to see Brutalita randomly popping up on Hacker News!

I had fun building this small project, there are a few fun things I did to make this work:

- The editor is a textarea with a monospace font, but the text is transparent, the font is rendered on top of it using SVG of the same size and line height as the monospace font behind it. This way I didn't have to recreate a whole editor and got the real-time preview I wanted.

- The way the SVG preview and the 'real font' are constructed is different. I talk about this a bit more on my blog [1] but in short in SVG I can use "thick lines" with rounded corners, and for the font I have to render polygons and I found a great library "mfogel/polygon-clipping" that makes the process of combining them a breeze.

Thank you all for the interest! I might work on an update or two ;)

[1] https://javier.xyz/blog/brutalita-learning-opentypejs

Re: Brutalita Sans: An Experimental Font and Font Editor

#64

Post by javierbyte »

noduerme wrote: post #56

To me the magic here is that the font used on the website text updates in realtime when you make changes to any glyph. Anyone know how that's happening, exactly?

Hey! For the real-time editor I have an invisible textarea in the background with a monospace font and I'm rendering SVGs on top of it, each character is a React component.

Re: Brutalita Sans: An Experimental Font and Font Editor

#66

Post by thedumbname »

thw_9a83c wrote: post #24
thedumbname wrote: post #20

How to split line? Not clear how to draw character with accents, for example

> How to split line? Each (poly) line has a separate layer. Preview '#' character to get an idea. A new layer is created every time you fill the previous one.

Got it, thanks

Re: Brutalita Sans: An Experimental Font and Font Editor

#67

Post by xg15 »

The editor and generation scheme is really cool.

I'd like more info on the possible "operations" that form the font glyph though. First I thought it was all just choosing dots on the 3x5 grid and connecting them with lines, but there also seem to be "half-strokes" (lowercase i) and "rounded corners" that don't align with the dots (used for almost all "round" letters like O, C etc). Especially the latter seem to be crucial if you don't want all the round segment to look like diamonds.

So how do I do those things in the editor and are there even more of them?

Edit: Or is it really just 5x9 instead of 3x5 with only every second grid point visible? Lowercase "f" looks like that.

Also, it's kind of obvious you can't draw a "#" sign on a 3x5 grid...

Re: Brutalita Sans: An Experimental Font and Font Editor

#68

Post by niccl »

dheera wrote: post #58
pyrale wrote: post #43

Hate the font, love the editor. edit: tried to type "à", and the letter is not recognized in the font (appears in red in the editor). Would there be a way to tell the editor that "à" = "a" + "`", rather than retyping the symbol from scratch? edit2 : Having to remove all the [2..n] points if you want to change the second point you made is also a bit of a pain, especially for people like me with little experience of wh…

I want to create a GenAI fork of this where you do one character and it tries to mimic the style for all of the others.

Douglas Hofstadter went there with his Letter Spirit project/concept/something. I can't find a decent single link about it, but there seems to have been an HN discussion https://news.ycombinator.com/item?id=37754559

Re: Brutalita Sans: An Experimental Font and Font Editor

#69

Post by nine_k »

javierbyte wrote: post #63

Author here! I'm so happy to see Brutalita randomly popping up on Hacker News! I had fun building this small project, there are a few fun things I did to make this work: - The editor is a textarea with a monospace font, but the text is transparent, the font is rendered on top of it using SVG of the same size and line height as the monospace font behind it. This way I didn't have to recreate a whole editor and got the…

The editor does not seem to allow to move nodes, nor does it allow to delete a node, or at least to delete the last node of a chain. This makes the editing process more like a puzzle + skill game. One wrong click, and you have to redo from start. Or put every segment on a separate map, and be good at mentally combining them.

But well, it is an addictive game! :)

Post reply on HN