Expert Tip: Text Scaling

Text scaling is a tool that controls the size of text on different breakpoints, so that your text always looks good whether viewing from your desktop or phone. For example, when you design how your header looks on desktop, the text may be too big when you switch and look at it on mobile.
With text scaling, you can choose the minimum and maximum size of the text, that way the max size will be shown on desktop and the min size will be shown on mobile. Once you set your text to scale, you can see how it changes by switching between breakpoints.

Note : Changing the value of the text sizes from a lower breakpoint (e.g. tablet or mobile) breaks the text scaling across breakpoints.

2 Likes

@meytalw Thanks for addressing this! My question is – if you set your text to scale on the Desktop breakpoint (say 40-60 pts.) how can the minimum size “be shown on mobile” as well? I was under the impression that the 40-60 pts. affected the Desktop breakpoint only and that you had to do separate scaling for the Tablet and Mobile breakpoints. :thinking: Along those same lines, how do I view my minimum and maximum scaling sizes inside one breakpoint? By adjusting the viewport? It’s always tricky for me to figure out how to set my min and max sizes. Appreciate your feedback!

@marisa59229 Thanks for posting this question! :slight_smile: I had the very same concern. If we set the text scale to be 40 - 60 px on ‘Desktop’ and then switch to ‘Tablet’ or ‘Mobile’ breakpoints, the text scale still only displays the range i.e 40 - 60 px instead of the ‘actual font size’ that is displayed on the tablet screen.

As you rightly pointed out, it can look odd on different breakpoints and any indication on how we can set ‘different font sizes for different breakpoints’ while still being able utilize the ‘scale text’ feature would be immensely helpful.

One workaround that isn’t perfect is to go to the ‘Desktop’ (largest breakpoint)view and make a note of the correct font size for this display. Then do the same for ‘Mobile’ (smallest breakpoint) and then set the text scale feature ON with these values. But again, we still run into the problem of the in-between breakpoints since we are unable to see or adjust the font sizes for these middle breakpoints since text scale only favors the largest and smallest breakpoint. The middle person always loses out in this case :pensive:

Thanks again and any help would be Awesome!

After playing around a bit, I think I may have found a temporary solution.

It seems you can set ‘text-scale’ for each breakpoint. So let’s say you have 3 breakpoints:

  1. 1201 - 1596
  2. 1025 - 1200 px
  3. 768 - 1024 px

You can set different ‘text-scale’ ranges for all these different breakpoints. For example:

  1. 1201 - 1596 px > Text Scale Range = 40 - 50 px
  2. 1025 - 1200 px > Text Scale Range = 30 - 36 px
  3. 768 - 1024 px > Text Scale Range = 24 - 28 px

Hope this helps! :wink:

Hi @designedbyalexander ! Many thanks for your thorough feedback!!! :smiling_face: And yes, I figured that part out as well (you can adjust text scaling per breakpoint), BUT – here’s the million dollar question – how do you figure out what sizes to begin with??? :thinking: Interestingly enough, I found a YT video from a Wix designer who went through the process of how she designed one of the fabulous Editor X templates we have available to us. And in the video, she discusses how she uses Sketch to determine her font sizes??? I downloaded Sketch and while it seems handy to do pre-designing in, I still can’t figure out how she determined the font sizes per breakpoint. Was it a trial and error thing? And not to open up a can of worms @meytalw , but should we be starting out our Editor X designs in Sketch because one of the Wix template creators does, too??

@marisa59229 The reason designers use UI design tools like Sketch, Adobe XD, and Figma is because when you work directly in Editor X you are actually developing. In Editor X, you have to click several times to change the color of a button, for example. These UI design tools like Sketch, allow you to make design adjustments more efficiently. When you’re 100% happy with your design, move into Editor X to complete the functionality and start developing. This took me a while to implement but it’s worth it. As far as text sizes go here’s a great tutorial: Advanced Typography Design in Figma | Envato Tuts+