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.
@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. 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! 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
Hi @designedbyalexander ! Many thanks for your thorough feedback!!! 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??? 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+