When creating responsive experiences in Flex, text styles work in tandem with sizing and scaling to ensure text properly scales across multiple responsive variants. For example, you may have set a text box to responsively resize (with Relative size, Hug Content, etc.) with varying screen widths, but without proper text style settings, the text characters within will not resize with the text box, causing them to appear disproportionate to the rest of the layout. A header font size of 150 pixels may look good on a desktop variant that is 1800 pixels wide, but much too large on a mobile variant with an 800 pixel width.
Setting Breakpoint Font Sizes
To negate the issue in the above example, it is crucial to set specific font sizes for each responsive variant in a text style. To do so:
Hover over the target text style label
Either from the "Selected text style" section (for applied text styles) or the "Text styles" section (after clicking the Text styles icon) in the Inspector Panel
Click the Adjustment icon to open the Text style menu
Use the "Font size" drop down menus to adjust the font size for each responsive variant
It's generally best practice to ensure font sizes cascade downward: Desktop > Tablet > Mobile
Click Save
Once saved, when the experience hits a breakpoint while viewed, the text style will responsively switch the font to the corresponding size.