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 ;)
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! :)
m-p-35 minutes ago
Do you accept PR to include some accented characters, or do you prefer keeping a limited set or characters?
pyrale6 hours ago
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 where the points end up being on the line vertically.
dheera4 hours ago
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.
citizenpaul4 hours ago
I think that would be really difficult to pull off in a way that generates usable fonts. A huge part of fonts is subjective human perception of them.
It would be cool for marketing style fonts though.
rc14 hours ago
Looking at the link and the editor, it seems like a feasible fork.
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
xg151 hour ago
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...
giancarlostoro7 hours ago
Reminded me a teenie tiny bit of the original font used by Habbo Hotel Volter (Goldfish) which has a rough pixel look to it (at least that's how my nostalgia makes me see it) they got rid of the Volter font when Habbo upgraded from Adobe Shockwave to Adobe Flash, they went to Ubuntu font if I remember correctly. I still miss the old font.
My favorite thing about Habbo's font from back in 2001 is the "emojis" that it had. If you played Habbo back then, you were likely using emojis before they were cool. ;)
That editor is really cool; you can even see the font change live on the left!
Yeah, that is recent, they have had Origins out for over a year. Friends of mine were indirectly involved in what lead to Origins being a thing. Someone discovered you can just run Shockwave as a standalone executable. The developer leading the efforts for Origins was also iconic in the Habbo reverse engineering scene, where players would recreate the back-end server. He was known as Myrax back then. ;)
doublerabbit5 hours ago
I was one of those scene-kids. Some Java guy joined the IRC channel saw what we had coded, swore bloody mercy and then rewrote it as a lesson to us.
I lost the archive on an old hard-drive however the scene still limps along. C# and Java were the main languages used.
Font showcase websites are frequently some of my favorites from a design perspective. This stuff just looks awesome.
noduerme5 hours ago
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?
javierbyte3 hours ago
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.
Same, I love the idea but the editor needs a bit of work. Moving dots, deleting dots and dragging to create new lines would be nice.
On the other hand I do like that it is low resolution so one is limited from trying to add lots of details.
jortis7 hours ago
Very nice font.
In italian "Brutalita" (but with an accent on the last a: "Brutalità") it means brutality.
erremerre8 hours ago
An amazing thing, given the author is Spanish speaker I really miss the ñ Ñ.
But I guess his answer is going to be, you can make those yourself!
mistercow7 hours ago
I tried to do that, and now I’m just confused. The included glyph for the lower case n doesn’t actually fit the grid, so you can’t seem to replicate it. But also that grid doesn’t have enough resolution to do the tilde. Maybe I’m missing something?
xg1518 minutes ago
Yeah, there are some sort of shenanigans going on in the editor. The premade letters use a finer grid than what the editor lets you work with.
It's most obvious with O, {, & and # which are impossible to draw with the grid that's presented to you.
dole7 hours ago
Enter a N or n into the Editing box, you'll see the two grids that make the glyph up along with a blank third grid on the bottom, add a small tilde in the top two rows. Or copy and paste the actual Ñ or ñ characters into the Editing box to create it new, and you can use it immediately with the alphabet textbox on the left.
cgriswald5 hours ago
The editor doesn’t understand ñ and you can’t make a tilde because it requires a minimum of four points of width.
thw_9a83c7 hours ago
It's very nice and interesting, but the font editor is... brutal.
There is no way to undo, redo, or move the anchor points. At least you can delete the last line segment by clicking on the last point.
DannyPage7 hours ago
It would also help to indicate which dot is starting point and which is the ending point.
GnarfGnarf8 hours ago
I appreciate how lower-case ‘L’, digit ‘1’ and upper-case ‘I’ are differentiated. Also alpha ‘O’ and zero.
limbero8 hours ago
Wow, this is both really fun and very technically impressive!
Reminds me of how the fonts are defined in the IBM 2250 and the CDC 6x00 console.
rebolek7 hours ago
This is amazing!
Reminds when I was doing my own bitmap fonts on ZX Spectrum and Amiga. They were probably very ugly by today's standards but they were mine :) I guess I'll create one for my terminal, it probably won't be used there for too long but it would remind me of times when I was more in control of my machine.
JdeBP5 hours ago
One does not need a WWW-based editor to make that kind of font, if you're going to give it a go. A text editor and Viznut's perl scripts yields BDF files quite straightforwardly.
How do you edit different letters? When I opened it, 'Q' is selected but I don't see buttons to change letter?
linguistics__7 hours ago
Where you see the 'Q', it's a text-field, you can just enter a different letter and it'll switch.
tspng7 hours ago
The letter below the "Editing" label is an input field. You can change the current letter there.
afandian7 hours ago
Thanks, got it! There's no clue that it's editable.
hedora7 hours ago
Type the letter you want in the left box.
wordglyph5 hours ago
This would have come in handy when I built https://WordGlyph.xyz a word game based on building a letter font
thedumbname7 hours ago
How to split line? Not clear how to draw character with accents, for example
thw_9a83c7 hours ago
> 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.
thedumbname2 hours ago
Got it, thanks
oniony7 hours ago
Each box is a layer. So you put the accent in the second box.
bapak7 hours ago
Cool but pretty bad edit UI. Can't figure out how to edit an existing letter without starting from scratch. One letter at a time. What are even the additional grids below the letter being edited?
afandian7 hours ago
I like the UI, as more of a thing-to-play-with than a serious typographic tool. Each grid contains a continuous polyline.
very cool idea for the editor. I remember having to add an entire sprite sheet for fonts. I wonder if it can generate a sprite sheet for generated fonts
hyperpl7 hours ago
Will need to try this in a terminal but on initial glance it looks similar to terminus (a font I've been trying to find a replacement for for over 20 years....)
zeeqeen6 hours ago
The font has bad support for CJK fonts (take Chinese for example).
en: Hello, World!
zh: 你好，世界！
You can copy that in their font editor to give it a try.
sunrunner5 hours ago
Glyph editing makes me feel like I’m doing Marching Squares.
nickdothutton6 hours ago
A little reminiscent of modernist Italian fonts seen on war memorials.
sixthDot7 hours ago
little UX issue: that's a little surprising that knots cannot be moved.
evertedsphere7 hours ago
this read to me like brutalità (which would be "brutality" in italian but i don't know if it is actually a word in use) first
lentil_soup7 hours ago
close enough, but it's in spanish. Form the website:
"The name means "little brutal" in Spanish."
so the emphasis is on the 'i'
evertedsphere6 hours ago
yes, hence the "first" (before i saw the note)
jortis7 hours ago
Yes, is a word in use.
Brutalità is brutality in english.
lelanthran7 hours ago
This needs more upvotes. Hopefully the author reads this comment and provides a hint on how to create extra grids (accidentally deleted one, now I only have 2)
KwanEsq7 hours ago
So far as I can tell an extra blank grid appears as soon as the previous blank one has content/pre-existing default grid is edited.
bmn__6 hours ago
The grid is too narrow. :( With just five pixels, I can't make a decent looking ß and ẞ that are sufficiently distinct from each other.
lagniappe6 hours ago
Lots of complaining in here about something that's really well made.
timontsiolis8 hours ago
Very inspiring... Makes me wanna dive into fonts again...
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
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! :)
Do you accept PR to include some accented characters, or do you prefer keeping a limited set or characters?
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 where the points end up being on the line vertically.
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.
I think that would be really difficult to pull off in a way that generates usable fonts. A huge part of fonts is subjective human perception of them.
It would be cool for marketing style fonts though.
Looking at the link and the editor, it seems like a feasible fork.
Relevant tom7 project:
http://tom7.org/lowercase/
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
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...
Reminded me a teenie tiny bit of the original font used by Habbo Hotel Volter (Goldfish) which has a rough pixel look to it (at least that's how my nostalgia makes me see it) they got rid of the Volter font when Habbo upgraded from Adobe Shockwave to Adobe Flash, they went to Ubuntu font if I remember correctly. I still miss the old font.
My favorite thing about Habbo's font from back in 2001 is the "emojis" that it had. If you played Habbo back then, you were likely using emojis before they were cool. ;)
That editor is really cool; you can even see the font change live on the left!
https://www.dafont.com/volter-goldfish.font
Also reminiscent of CNC router fonts.
https://webonastick.com/fonts/routed-gothic/
Discussed here a few times. https://news.ycombinator.com/item?id=30190397
I had hopes I could find an answer to https://space.stackexchange.com/questions/41048/are-there-an... in this rabbit hole.
Not yet.
Thank you for sending me into a Habbo Hotel rabbit hole of nostalgia! They have a classic mode apparently, which is even on Steam now.
https://store.steampowered.com/app/3809900/Habbo_Hotel_Origi...
Yeah, that is recent, they have had Origins out for over a year. Friends of mine were indirectly involved in what lead to Origins being a thing. Someone discovered you can just run Shockwave as a standalone executable. The developer leading the efforts for Origins was also iconic in the Habbo reverse engineering scene, where players would recreate the back-end server. He was known as Myrax back then. ;)
I was one of those scene-kids. Some Java guy joined the IRC channel saw what we had coded, swore bloody mercy and then rewrote it as a lesson to us.
I lost the archive on an old hard-drive however the scene still limps along. C# and Java were the main languages used.
https://forum.ragezone.com/community/habbo-hotel.282/
Reminds me of Teletext, the BBC Micro’s mode 7, and Bedstead https://bjh21.me.uk/bedstead/
Font showcase websites are frequently some of my favorites from a design perspective. This stuff just looks awesome.
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.
With heavy use of SVG <symbol>, one would hope!
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
I would suggest drag to move dots
Same, I love the idea but the editor needs a bit of work. Moving dots, deleting dots and dragging to create new lines would be nice.
On the other hand I do like that it is low resolution so one is limited from trying to add lots of details.
Very nice font.
In italian "Brutalita" (but with an accent on the last a: "Brutalità") it means brutality.
An amazing thing, given the author is Spanish speaker I really miss the ñ Ñ. But I guess his answer is going to be, you can make those yourself!
I tried to do that, and now I’m just confused. The included glyph for the lower case n doesn’t actually fit the grid, so you can’t seem to replicate it. But also that grid doesn’t have enough resolution to do the tilde. Maybe I’m missing something?
Yeah, there are some sort of shenanigans going on in the editor. The premade letters use a finer grid than what the editor lets you work with.
It's most obvious with O, {, & and # which are impossible to draw with the grid that's presented to you.
Enter a N or n into the Editing box, you'll see the two grids that make the glyph up along with a blank third grid on the bottom, add a small tilde in the top two rows. Or copy and paste the actual Ñ or ñ characters into the Editing box to create it new, and you can use it immediately with the alphabet textbox on the left.
The editor doesn’t understand ñ and you can’t make a tilde because it requires a minimum of four points of width.
It's very nice and interesting, but the font editor is... brutal.
There is no way to undo, redo, or move the anchor points. At least you can delete the last line segment by clicking on the last point.
It would also help to indicate which dot is starting point and which is the ending point.
I appreciate how lower-case ‘L’, digit ‘1’ and upper-case ‘I’ are differentiated. Also alpha ‘O’ and zero.
Wow, this is both really fun and very technically impressive!
Previously https://news.ycombinator.com/item?id=29921137
Reminds me of how the fonts are defined in the IBM 2250 and the CDC 6x00 console.
This is amazing!
Reminds when I was doing my own bitmap fonts on ZX Spectrum and Amiga. They were probably very ugly by today's standards but they were mine :) I guess I'll create one for my terminal, it probably won't be used there for too long but it would remind me of times when I was more in control of my machine.
One does not need a WWW-based editor to make that kind of font, if you're going to give it a go. A text editor and Viznut's perl scripts yields BDF files quite straightforwardly.
* https://github.com/jdebp/unscii/blob/2.1.1f/src/font-topaz.t...
* https://github.com/jdebp/unscii/blob/2.1.1f/src/font-spectru...
How do you edit different letters? When I opened it, 'Q' is selected but I don't see buttons to change letter?
Where you see the 'Q', it's a text-field, you can just enter a different letter and it'll switch.
The letter below the "Editing" label is an input field. You can change the current letter there.
Thanks, got it! There's no clue that it's editable.
Type the letter you want in the left box.
This would have come in handy when I built https://WordGlyph.xyz a word game based on building a letter font
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
Each box is a layer. So you put the accent in the second box.
Cool but pretty bad edit UI. Can't figure out how to edit an existing letter without starting from scratch. One letter at a time. What are even the additional grids below the letter being edited?
I like the UI, as more of a thing-to-play-with than a serious typographic tool. Each grid contains a continuous polyline.
Reminds me of Metafont by Donald Knuth.
https://en.m.wikipedia.org/wiki/Metafont
very cool idea for the editor. I remember having to add an entire sprite sheet for fonts. I wonder if it can generate a sprite sheet for generated fonts
Will need to try this in a terminal but on initial glance it looks similar to terminus (a font I've been trying to find a replacement for for over 20 years....)
The font has bad support for CJK fonts (take Chinese for example).
en: Hello, World! zh: 你好，世界！
You can copy that in their font editor to give it a try.
Glyph editing makes me feel like I’m doing Marching Squares.
A little reminiscent of modernist Italian fonts seen on war memorials.
little UX issue: that's a little surprising that knots cannot be moved.
this read to me like brutalità (which would be "brutality" in italian but i don't know if it is actually a word in use) first
close enough, but it's in spanish. Form the website:
"The name means "little brutal" in Spanish."
so the emphasis is on the 'i'
yes, hence the "first" (before i saw the note)
Yes, is a word in use.
Brutalità is brutality in english.
This needs more upvotes. Hopefully the author reads this comment and provides a hint on how to create extra grids (accidentally deleted one, now I only have 2)
So far as I can tell an extra blank grid appears as soon as the previous blank one has content/pre-existing default grid is edited.
The grid is too narrow. :( With just five pixels, I can't make a decent looking ß and ẞ that are sufficiently distinct from each other.
Lots of complaining in here about something that's really well made.
Very inspiring... Makes me wanna dive into fonts again...
Oblig
https://fontstruct.com/
Very cool.
from spain?
[dead]