Fluid Fonts, and a tale of liquid things

Just three little fonts.

It all begun with The Designer bringing the fonts specification to a Front-end Developer, from now on The Developer.

The Developer read the specs and thought, “Oh man!, there are so many breakpoints, so many media-queries, this is so arbitrary.”.

The nerd voice in his head said, “Use a continuous function, no conditions, no arbitrariness, and you know that those functions are sexy, aren’t they?”.

He thought, “Well, yeah… but no! That’s making a bagel with a bazooka.”

It replied, “It will be the crispiest bagel ever.”

And that was enough to convince him of going down the nerd path…


He began navigating this twisted, yet wonderful place called, The Internet, where people argue over nothing, watch videos of cats and occasionally seek for wisdom. He was looking for an unsung hero, someone who had already been to the same nerdy place as he was, someone who had worked with continuous functions for fonts before.

Eventually he found his hero, Trent Walton, who wrote, eons ago, well, not really, it was 2012, the tome: Fluid Type. Enlightened by this beacon of knowledge he looked further and found a scroll called: Precise control over responsive typography written by Mike Riethmuller that contained instructions in a magic language called CSS, yeah in this world programmers, engineers and scientists are what we used to call wizards, magicians and sorcerers.

Following the steps of his predecessors he created a continuous function, everything he and his inner nerd needed, or maybe not, I mean dear reader look at it, yes, right below this paragraph.

A mundane truncated ramp function.

His inner nerd thought, “Oh hell no! it got no curves, what part of sexy you didn’t get, I’m talking about something like this”, and he plotted inside his mind this curve.

The mighty and powerful arctangent function, also known as the Serpentine Dragon.

He liked it, but he knew that it was too powerful to contain, he had to find a lesser form of this beautiful function. Inspired by the wisdom Trent Walton, he realized that he just needed an scaling factor, yes dear reader, those are fancy words for just a number smaller than one and greater that zero, he could use his levitation and scaling spells to do the rest, mathematicians would call that scaling and displacement, but we all know that that is magic, and off he went, looking for this scaling factor.


Upon deep meditation he came to the conclusion that if you divide a number by itself it yields one, no shit Watson, we all know that, and then he realized that if he added one to the divisor he would get what he wanted, dear reader get ready, this is getting nerdier.

He, somehow, figured that as this number, ω, gets closer to infinity the result gets closer to one, I don’t know about you reader, but infinity is too large to comprehend. He also wrote down these strange glyphs.

This is supposed to mean that as ω gets closer to infinity that division gets closer to one.

In the same, unknown way, he figured that as this number, ω, gets closer to zero the result got closer to zero, and, again, wrote down these glyphs, what’s is going on with him and these glyphs.

I guess that this mean that as ω gets closer to zero that division gets closer to zero.

Those two things that he figured unlocked another level of nerdism on him. He performed some spells and in front of his eyes this curve appeared, yes dear reader right down here.

This curve sprung from the magic of those glyphs, or maybe from the display you are reading this on.

His nerdy self thought, “Now we’re talking, we’ve got some curves now, but you know, this ain’t the real deal”, and he knew that he needed to beautify and enrich this already beautiful curve, he reviewed his old spell-books and dusted of this thing called function composition, dear reader, what is this? He used this spell to put curves inside curves, creating new ones, he went full Frankenstein, you can see the result of this magic down here.

And the spells produced these curves, at the bottom you can see the glyphs used for each one.

His nerdy self watched these curves thought “Hell yeah, look at those curves! I like the third one, the green one, nice curves, that’s how I like it.”, his inner nerd was definitely in love with this curve.

The newer love of his inner nerd.

Now having found the ideal curve, it was the time for the transformation magic to do the rest.

He realized that in their original forms, all the curves crossed each other in the exact same place, when ω was one all the curves where at one-half, so he thought “I can use that mid point as a control point.”, reader, what is a control point? he wanted to be able to decide when these curves were going to be at one-half, so he scribbled again on this language, I think that this is called Mathematics, but now a new symbol appeared, yeah, that ρ symbol down here.

He changed the one of the previous form for this ρ symbol, I think the ancients called it rho.

He thought “In this form I can decide where will the mid point is going to be, it will be at ρ, when ω equals to ρ., wow he is taming these beasts. He pouring these mathematical writings into a notebook was the last thing he did on that day, he was tired and needed a rest, and so did I.

Oh, he literally meant ω being equal to ρ.

Oh Man! a narrator can’t just have his sleep! On the middle of the night he had an epiphany, he visualized a point surfing these beautiful curves, and then he realized that he could command the curve to pass through this point, this could give him absolute control over these curves, and that was, quite literally, the point, yes reader, down here.

He wanted to command the curve to pass through that point.

He scratched and scribbled his way into the answer, and within all the glyphs, papers and ink a shining solution arose, the one that will give him ultimate control over the curve, oh no, that might be too much power, he found a spell that could control the shape of the curve, you can see it below here.

This spell finally allowed him to manipulate the shape of the curve. 𝛼 and 𝛽 were the horizontal and vertical position of the control point.

He had dominated the shape of these curves now he just needed to use minor magic to move the curve up and change its height, I had no idea what he was doing. He easily found the magic to do that, and it’s right down here.

Wait, he just created an spell that uses another spell, wow. d was the smallest point of the curve, and h the total height.

He was satisfied with his findings, he thought that one single scale factor, f(ω), that changed with the size of the screen, I hope you are not reading this on paper, could be used to control all the fonts using the help of multiple scaling functions, g(ω), controlling each font, I think I get it, f(ω) is the overlord and the g(ω) are the minions.


The math was ready, the time for glyphs and notebook scratching was over, now it is techno time, yes reader, we are diving into the binary realm of computers.

He thought, “Well, I’ll just need a few CSS variables, some calcs(), and a bit of JavaScript get this running”, dear reader, what is that JavaScript thing, it seems scary.

He wrote down in The JavaScript Language, the instructions to calculate the scaling factor, you can see it right here.

This is this JavaScript thing, he seems to be calculating the scaling factor.

Then he wrote some CSS code, where he placed the scaling functions, look! it’s right below.

I guess that these are the CSS variables and the calcs(), oh look, there it is, the scale factor.

He combined these two pieces into one example to show to The Designer, he placed it into another dimension right down here.

What is this? some sort of portal to another dimension where code lives.

His inner nerd thought “Oh, look at that beauty, so smooth and fluid.”. He showed this to The Designer and… he loved it! The Developer just asked The Designer to define the d, the minimum font-size, and h, how much can the font grow, for the different fonts, that was all he needed to implement it.

Can you believe it dear reader, all that nerdiness, boiled down to just a few lines in the code realm?


Disclaimer

This is my first article, feel free to give me both technical and writing feedback or advice.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade