How can I get text to scale automatically on different iOS screen sizes in Webflow?

To make text scale automatically across different iOS screen sizes in Webflow, you should use responsive units like vw (viewport width) or set up responsive styles using Webflow’s breakpoints.

​

1. Use Viewport-Based Units (vw) for Font Sizes

​

• Select your text element in the Webflow Designer.
• In the Typography section, change the font size unit to vw (e.g., 5vw).
• This scales the text size based on the width of the viewport.
• Use lower values for better control (e.g., 2.5vw for body text).
• This ensures the text grows or shrinks relative to screen size, including iPhones and iPads.

​

2. Adjust Font Size Using Media Query Breakpoints

​

• In Webflow, click the Device Icons at the top of the Designer to switch to different breakpoints (Tablet, Mobile Landscape, Mobile Portrait).
• Manually set font sizes for each screen size if vw doesn’t give the desired result.
• This ensures tailored typography on specific iOS devices.

​

3. Combine vw with min() or clamp() for Better Control

​

• Use the custom code embed method or a site-wide <style> tag in the Page Settings to use clamp():
• Example: clamp(14px, 2.5vw, 24px) means text will never be smaller than 14px or larger than 24px.
• This isn’t directly available in the UI, so use a Custom CSS Embed or define it in the site’s Head Code section.
• Helpful for preventing text from becoming too small on small screens.

​

4. Set “Body (All Pages)” Styles Properly

​

• Go to the Selector dropdown and choose Body (All Pages).
• Set a base font size and use relative units like % or em for child text elements.
• This helps maintain consistency in scaling across multiple elements.

​

Summary

​

To ensure text scales automatically across different iOS screen sizes in Webflow, use viewport-based units like vw, optionally refine with clamp() in custom CSS, and adjust settings per device using Webflow's breakpoints. This ensures consistent, readable typography across all iOS devices.