This typography style is set to always look proportionate to the page and the screen size.

What does px* mean?

When enabling the Scale text toggle for a typography style, the font size you set is in px*.

px* is a unit of measure in the Studio Editor. It lets you edit sizing using a familiar measurement (pixels), while the actual measurement behind the scenes is responsive.

In other words, you set the font size in pixels according to the look you want to achieve on the primary breakpoint (desktop). The automatic text scale takes care of the rest.

How does text scale help with responsiveness?

When you set a typography style to scale, the font size automatically adjusts to look ideal on every screen.

Whether you're adding themed text from the Add Elements panel, or applying a typography style to existing text – the font size is always proportionate to the current breakpoint you're on.

What happens if I disable text scale?

The font size stays fixed across breakpoints. It no longer adjusts to different screen sizes automatically, which would mean spending more time on achieving responsiveness. You would need to manually set a specific font size for each breakpoint.

How can I make sure the text never gets too small or big?

After adding themed text, or applying a typography style to existing text, you can define the minimum and maximum font sizes in the Inspector panel.

Select the relevant text element.
Click the Open Inspector arrow at the top right of the Editor.
Scroll down to Design.
Select Custom from the Scale text drop-down.
Enter the From and To values.

Tip: Under Font size, you can see the text size for the current canvas. Click the other breakpoints in the Editor to see how it changes.

An example of custom text scale with minimum and maximum values defined

Setting Text to Scale Proportionally

Did this help?