[HN Gopher] Brutalita Sans: An Experimental Font and Font Editor
___________________________________________________________________
Brutalita Sans: An Experimental Font and Font Editor
Author : fibo
Score : 517 points
Date : 2025-09-23 13:54 UTC (2 days ago)
(HTM) web link (brutalita.com)
(TXT) w3m dump (brutalita.com)
| limbero wrote:
| Wow, this is both really fun and very technically impressive!
| erremerre wrote:
| An amazing thing, given the author is Spanish speaker I really
| miss the n N. But I guess his answer is going to be, you can make
| those yourself!
| mistercow wrote:
| 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?
| dole wrote:
| 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 N or n characters into the Editing box to
| create it new, and you can use it immediately with the
| alphabet textbox on the left.
| cgriswald wrote:
| The editor doesn't understand n and you can't make a tilde
| because it requires a minimum of four points of width.
| xg15 wrote:
| 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.
| GnarfGnarf wrote:
| I appreciate how lower-case 'L', digit '1' and upper-case 'I' are
| differentiated. Also alpha 'O' and zero.
| timontsiolis wrote:
| Very inspiring... Makes me wanna dive into fonts again...
| noreplydev wrote:
| from spain?
| sixthDot wrote:
| little UX issue: that's a little surprising that knots cannot be
| moved.
| giancarlostoro wrote:
| 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
| afandian wrote:
| Also reminiscent of CNC router fonts.
|
| https://webonastick.com/fonts/routed-gothic/
|
| Discussed here a few times.
| https://news.ycombinator.com/item?id=30190397
| rbanffy wrote:
| I had hopes I could find an answer to
| https://space.stackexchange.com/questions/41048/are-there-
| an... in this rabbit hole.
|
| Not yet.
| cl3misch wrote:
| 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...
| giancarlostoro wrote:
| 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. ;)
| doublerabbit wrote:
| 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/
| fanf2 wrote:
| Reminds me of Teletext, the BBC Micro's mode 7, and Bedstead
| https://bjh21.me.uk/bedstead/
| afandian wrote:
| How do you edit different letters? When I opened it, 'Q' is
| selected but I don't see buttons to change letter?
| hedora wrote:
| Type the letter you want in the left box.
| tspng wrote:
| The letter below the "Editing" label is an input field. You can
| change the current letter there.
| afandian wrote:
| Thanks, got it! There's no clue that it's editable.
| linguistics__ wrote:
| Where you see the 'Q', it's a text-field, you can just enter a
| different letter and it'll switch.
| bapak wrote:
| 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?
| afandian wrote:
| I like the UI, as more of a thing-to-play-with than a serious
| typographic tool. Each grid contains a continuous polyline.
| thedumbname wrote:
| How to split line? Not clear how to draw character with accents,
| for example
| oniony wrote:
| Each box is a layer. So you put the accent in the second box.
| thw_9a83c wrote:
| > 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.
| thedumbname wrote:
| Got it, thanks
| sshine wrote:
| Very cool.
| lelanthran wrote:
| 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)
| KwanEsq wrote:
| 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.
| evertedsphere wrote:
| this read to me like brutalita (which would be "brutality" in
| italian but i don't know if it is actually a word in use) first
| lentil_soup wrote:
| close enough, but it's in spanish. Form the website:
|
| "The name means "little brutal" in Spanish."
|
| so the emphasis is on the 'i'
| evertedsphere wrote:
| yes, hence the "first" (before i saw the note)
| jortis wrote:
| Yes, is a word in use.
|
| Brutalita is brutality in english.
| thw_9a83c wrote:
| 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.
| DannyPage wrote:
| It would also help to indicate which dot is starting point and
| which is the ending point.
| jortis wrote:
| Very nice font.
|
| In italian "Brutalita" (but with an accent on the last a:
| "Brutalita") it means brutality.
| doright wrote:
| Reminds me of Metafont by Donald Knuth.
|
| https://en.m.wikipedia.org/wiki/Metafont
| hyperpl wrote:
| 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....)
| rebolek wrote:
| 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.
| JdeBP wrote:
| 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...
| browningstreet wrote:
| Oblig
|
| https://fontstruct.com/
| nickdothutton wrote:
| A little reminiscent of modernist Italian fonts seen on war
| memorials.
| asddubs wrote:
| I would suggest drag to move dots
| sionisrecur wrote:
| 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.
| pyrale wrote:
| Hate the font, love the editor.
|
| edit: tried to type "a", 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" = "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.
| dheera wrote:
| 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.
| citizenpaul wrote:
| 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.
| rc1 wrote:
| Looking at the link and the editor, it seems like a
| feasible fork.
| nph278 wrote:
| Relevant tom7 project:
|
| http://tom7.org/lowercase/
| niccl wrote:
| 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
| Vivtek wrote:
| Gary McGraw was the first doctoral candidate to work on the
| Letter Spirit project:
|
| https://web.archive.org/web/20220331021500/http://goosie.co
| g...
|
| And John Rehling did a second portion in _his_ doctoral
| work:
|
| https://web.archive.org/web/20150320160815/https://www.cogs
| c...
|
| (Thanks for this complaint - I hadn't realized that
| Rehling's thesis was linked from the Waybacked version of
| his personal page, and that finally completes my
| collection!)
|
| You can also read Chapter 10 in Hofstadter's 1995 book
| "Fluid Concepts and Creative Analogies" for a pretty solid
| overview.
|
| But yeah, seeing this project immediately reminded me of
| Letter Spirit, since it's basically a web editor for
| gridfonts.
| bmn__ wrote:
| The grid is too narrow. :( With just five pixels, I can't make a
| decent looking ss and Ss that are sufficiently distinct from each
| other.
| zeeqeen wrote:
| The font has bad support for CJK fonts (take Chinese for
| example).
|
| en: Hello, World! zh: Ni Hao ,Shi Jie !
|
| You can copy that in their font editor to give it a try.
| lagniappe wrote:
| Lots of complaining in here about something that's really well
| made.
| adw wrote:
| Previously https://news.ycombinator.com/item?id=29921137
| wordglyph wrote:
| This would have come in handy when I built https://WordGlyph.xyz
| a word game based on building a letter font
| rbanffy wrote:
| Reminds me of how the fonts are defined in the IBM 2250 and the
| CDC 6x00 console.
| sunrunner wrote:
| Glyph editing makes me feel like I'm doing Marching Squares.
| noduerme wrote:
| 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?
| javierbyte wrote:
| 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.
| well_actulily wrote:
| With heavy use of SVG <symbol>, one would hope!
|
| https://developer.mozilla.org/en-
| US/docs/Web/SVG/Reference/E...
| jappwilson wrote:
| 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
| javierbyte wrote:
| 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
| nine_k wrote:
| 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-3 wrote:
| Do you accept PR to include some accented characters, or do you
| prefer keeping a limited set or characters?
| xg15 wrote:
| 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...
| olivia-banks wrote:
| Font showcase websites are frequently some of my favorites from a
| design perspective. This stuff just looks awesome.
___________________________________________________________________
(page generated 2025-09-25 23:00 UTC)