Mastodawn

I made a typeface, it's called Flexflex 🔠

I've been working on this project on-and-off for many months. Very happy to finally release it!

Flexflex is a typeface that responds to spatial requirements rather than imposing them. Built on a modular system, each letter can fit inside any given rectangular container and transforms continuously if its ratio changes. In theory, it's infinitely flexible.

For more information and interactive demos, see the website: https://ronikaufman.github.io/flexflex

Roni Kaufman 3d ago

More animations

Evan B🥥ehs 3d ago

@ronikaufman first one lowk giving amogus

F4GRX SÃ©bastien 3d ago

@ronikaufman the changes in radius are cleverly arranged!

Markus Hofer 3d ago

@ronikaufman looks awesome!

ink and yarn 3d ago

@ronikaufman This is so cool!

@ronikaufman "V" and "Y" are very similar. I would distinguish them a bit more. 🤔 But it's a fantastic idea.

@mogoh @ronikaufman Nice!
To my eye the X & I are hard to tell apart too.

Al & Val's Modern Homesteading 3d ago

@ronikaufman Prepare to be popular.....

Fractal Kitty 3d ago

@ronikaufman wow!!

DoomsdaysCW 3d ago

@ronikaufman Ooooh! As a former typographer, I think that's brilliant! well done!

@ronikaufman Nice!!

@ronikaufman I feel like this could be great as an actual font if that were possible, but I suppose it probably isn't?

Roni Kaufman 3d ago

@nazokiyoubinbou It would be great. I suppose it's not possible, but I don't know enough about font file formats to be sure

Simon Cozens 3d ago

@ronikaufman @nazokiyoubinbou It is possible, build it as a variable font with width and height axes. See https://djr.com/fit for prior art.

Fit

Fit makes text fit

Roni Kaufman 3d ago

@simoncozens @nazokiyoubinbou Thanks, I need to see how to do that then

Štěpán 3d ago

@simoncozens omg I can't read a word on that page

@ronikaufman @nazokiyoubinbou

F4GRX SÃ©bastien 3d ago

@ronikaufman this is pretty cool!

Prof Lutz 3d ago

@ronikaufman Yes, but does it use the GPU? 😏 @raph

Professional fatal error 3d ago

@ronikaufman
Flex flei

Amazing ♥️

shom ✊🏽🐧📷🤿🏔️🪚3d ago

@ronikaufman this is really cool and clever! Well done and thanks for sharing. I also really liked the sliders on the page showing in real time the way the font changes.
I'm not very fluent with JavaScript and examining the page to learn how to implement, I had a couple of questions. What's the suggested pattern for usage so it can fallback on plain HTML if JavaScript is disabled? Also, should it have an ARIA attribute for accessibility or would using it with HTML fallback be the preferred route for accessibility?

Roni Kaufman 3d ago

@shom Thank you! I'm not sure, I'm not an expert on accessibility, but I will look into it and improve the website. Thanks for the heads-up!

Sean Bala 3d ago

@ronikaufman This is pretty nifty - great work!

Tim Johnsen 3d ago

@ronikaufman @dlx delightful

El Dado Inquieto 3d ago

@ronikaufman Very interesting.

James Akers 3d ago

@ronikaufman SO many signage applications. I also appreciate the mono linear nature of this font.

@ronikaufman That's a beautiful typeface, good job!

Pete Prodoehl 🍕3d ago

@ronikaufman That is just... beautiful! ❤️

nina splendorr ✨🏳️‍⚧️3d ago

@ronikaufman super cool!!

Sexybiggetje🐖3d ago

@ronikaufman there's an n missing in the header 'Implemetation' on the homepage 🤗

Julia :v_bi::therian:?3d ago

@ronikaufman very very cool though by using SVGs it does lose on accessibility...

Marcin Cieślak 3d ago

@julia @ronikaufman would pure PostScript do better for accessibility?

Julia :v_bi::therian:?3d ago

@saper @ronikaufman well you couldn't use PostScript in a lot of contexts, including on the web, but I suppose you might be able to use it for that?

Marcin Cieślak 3d ago

@julia The problem is that I don't think that the usual font file formats do not accept height/width parameters as input.

The code from ronikaufman@genart.social is a set of PostScript operators, so we could make it a Type 3 font using pure PostScript code., but then, again, something needs to execute that code and Type 3 was poorly supported anyway. Not sure it would be better for accessibility...

Julia :v_bi::therian:?3d ago

@saper the accessibility point is that a typeface, rather than svg images, would allow a screenreader to "see" the text instead of just saying "image". I was not aware of type 3 fonts, maybe those could be used to make such a thing work

Avery (She/Her)3d ago

@julia @saper maybe something could be done with alt text?

Julia :v_bi::therian:?3d ago

@shitpostalotl @saper aria labeling maybe

James 🌈💜2d ago

As insanely complicated as it can get, Metafont, the font system underpinning TeX and its variants, actually does allow arbitrary height and width parameters. (And also another 58 parameters...)

It'll render to the necessary bitmap equivalents when your compiling to PDF, for example.

Danny Boling ☮️3d ago

I don't know anything about typefaces or fonts but even I understand how AMAZING this is! Congrats on getting it out. Good job! 💪💪

Econproph 3d ago

@ronikaufman While I understand and applaud the programming chops required to create the typeface, as a dyslexic I can assure it it's totally non-readable. Nope. Nada. No way.

villon genießt die Ferien 3d ago

@econproph @ronikaufman
That is unfortunately the case. But I think there are other fonts that could be more useful to you, but don't serve the same purposes as these fonts.

Lizzie she/her 3d ago

@ronikaufman ooooooooooo I LIKE THIS. Congrats! Beautiful!

villon genießt die Ferien 3d ago

@ronikaufman
Nice work.

Chery (Great Australian Pods)3d ago

@ronikaufman it's beautiful

Jack Yan (甄爵恩)3d ago

@ronikaufman Very clever, Roni, I love it!

gábor ugray 3d ago

@ronikaufman @vez There... you ruined it for me! Now I must keep thinking how to do this for Chinese ideographs :)

Awesome work. I'm loving it.

GhostOnTheHalfShell 3d ago

@ronikaufman Why no .ttf file?
I don't understand.

Dave bauer 3d ago

@ronikaufman This sounds amazing and totally subverts the "Don't stretch type" rule!

jonny (good kind)3d ago

@ronikaufman
WOW I LOVE THIS

mirabilos 3d ago

@ronikaufman I’ll mentally be calling it Fledc 😹 but I understand it was a design choice.

Pieter Lexis 2d ago

@ronikaufman my brain: Neat! I can't wait to see what cursed font rendering hack were needed for this"
The website: "It's JS an SVG"
Me: "That's way smarter indeed"
Cool stuff!

Roman Kliuchkovych 2d ago

@ronikaufman Love your modular and SVG-based approach! I explored stretching letters too, but went with a different direction — using HTML and flexbox instead. Getting it into SVG felt a bit too tricky for me :-)
https://keymasterr.com/micro/tall-letters/

Tall Letters

Type and stretch... or design and share you own letters!

Roman Kliuchkovych 2d ago

@ronikaufman Btw, since the letters are monospaced, would it help to use the vector-effect='non-scaling-stroke' property and allow them to fill all available space / resize freely?

Roni Kaufman 1d ago

@keymasterr I didn't know about that property, I'll check it out!

Roman Kliuchkovych 1d ago

@ronikaufman as an example, it works like this (you can resize and distort svg dimensions without messing with stroke width)

https://codepen.io/keymasterr/pen/ZEZoMZR

Coil Loader CSS-only

...

KnownUnknown 2d ago

@ronikaufman Absolutely gorgeous!

@ronikaufman that's great! are there character variants to minimize ambiguities between letter shapes at the extreme aspect ratios? I can see somebody unfamiliar with the typeface very easily mistake a very squished X for a stylized I or a Y for a T

Amber Weinberg 2d ago

@ronikaufman not sure what the real world use case would be for, but the animation is mighty addicting 😍