ARTICLE
I'm sure many of you must have heard about a property called 'Fit text'. It might go by different names but here's the general idea of what it does. This property fluidly adjusts the font size of text to perfectly fill the width of its container. It’s often used for brand names or short phrases to create a strong, bold visual impact.
As someone who started with Wix Studio, I was spoiled by its 'Scale proportionally' property. It is basically a "fit text property on crack." Because of this, I rarely use max-width property, since the text scaling feels natural and dynamic. Fit Text always looks great, and I use wherever possible.
In Framer, there is a fit text property in the font size panel, however it comes with limitations that I'll talk about in details in another post. I can use it, it is simple, however, I can only use it properly on text that is in one line only. And that rarely helps me in my use case.
Then came Webflow. With so many sizing units and control options, I thought this would be readily available and even if it doesn't, it'll be easy to implement. It was far from easy.
The struggle begins
Surprisingly, there weren’t many resources explaining how to achieve this 'Fit Text' functionality in Webflow. So, I went to ChatGPT. It offered me two options - First, going the pure CSS path and second, using a mix of CSS and JS. I never thought this would need Javascript as well. But okay I guess, I went with the hybrid approach since it promised pixel-perfect scaling (I'd really like to know why Javascript is needed here. So, if anyone wants to explain it to me or feel like this can be done in CSS and reduce the code lines, please let me know).
Well, after I added the code to my site, it was working well, until it wasn't. The text stopped scaling beyond the desktop breakpoint and stubbornly stayed left aligned. I even called up a friend who is a frontend developer for this simple thing. We tried inspecting the console to check for the working functions not just CSS tweaks. While I knew I could delete a container, text, or modify the CSS through the inspect panel, I never realized I could use the console to check specific working functions and even try a code block.
Even after we spent hours, no fix. It was late already and I decided to call it a day.
The struggle continues
The next day, I asked ChatGPT to forget the old code and start from scratch. This time I did something different. I created a text field with fit text property in Framer, recorded it and uploaded that video in ChatGPT for reference.
It generated a new CSS and JS that looked promising (not that I fully understood it anyways). Before adding it to the project, this time, I tested it directly on the console. And……it worked!! I added the code to my project settings, published it and finally got to see it in action.
I was so happy but that didn't last long. I added some gaps between the letters and I noticed that the last letter also had an awkward gap after the lsat letter, indirectly making the text appear left aligned. So, back to ChatGPT (sigh). After some trial and error, we wrapped each letter in a <span> and added consistent gaps between them. That was revision 3.
Then came hopefully the final tweak. I wanted the letter spacing I defined in Webflow's designer panel to control the actual spacing between the spans. This way, I wouldn't need to edit the code every time I want to adjust the text. A few quick modifications later, it worked perfectly.
Wrapping it all up
Once everything worked, I hosted the code on JSDeliver and implemented it on my live site. The fit text property was finally done after 4 revisions.
It's funny how something that takes literally few seconds in Wix Studio and Framer can turn into hours of trials, testing and debugging in Webflow. But, honestly, I learned a lot from this and this turned out to be a fun experience.