As we continue to build the theme for our blog, we have been spending an excessive amount of time trying to get the font sizing correct for the myriad of devices that exist today.

We’re very interested in Tim Brown’s Modular Scale and thus we’ve decided to use the clamp function in CSS.


sizing scale is a uniform progression of sizes based on a scale—or, more accurately, a ratio.

CSS Tricks


Our initial attempt at font scaling was during engineering. While the designs we’ve created exist in Figma, we were finding it difficult to get the linear font scaling correct while looking at artboards. Instead, we wanted to see how the fonts would look in real-time, with actual content on a website, where we could adjust the browser window and test the scaling dynamically.

We have found that this is not the ideal process for our team. We’ve wasted hours with our engineers and designers trying to use inspector to find the correct font sizing and spacing for various viewports. So, we needed a new method.

Figma Prototypes for font scaling

Enter Figma Prototypes. We’ve been using prototypes for a while, but never as a pure method of testing font scaling. In our case, we created a few artboards at various common sizes, making sure we accounted for both the smallest size we’ll account for and the largest, and added text. Then, by opening a prototype with the following settings, we are able to view text almost identically to how it will appear on the web (we tested):

  • Device = none
  • Fill = 100% – display at full size
  • UI = hide Figma UI
Text from Fillerama.io

Above you can see a solid representation of how the fonts will look at various sizes. Using this as a guide, we can then do proper font scaling using the clamp method.


We also suggest Type Scale as another great tool for finding the right font ratio.

Share

Read More

How a small cafe got 1 million views with influencer marketing

Let's be honest, sometimes the world of influencer marketing can feel overwhelming – all those ...
Let's be honest, sometimes the world of influencer marketing can feel overwhelming – all those creators, the ever-changing platforms, and a dash of "how on earth do I even start this?" But hold on, because here's a little secret: influencer marketing isn't just for the mega-brands out there.