Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Scaling fonts

All Squarespace templates have-built in responsive design that optimizes your site's text for every screen. Some templates give you fine-tuned control over how fonts scale by manually setting the maximum and minimum sizes for titles, headings, and other key text.

For example, you could set Heading 1 to scale between 12 and 25 pixels. On small browsers, such as mobile devices, the smallest your headers would ever get would be 12 pixels. On large browsers, like a wide-screen monitor, headers would scale all the way up to 25 pixels but never larger than that.

You can set these rules in these templates:

  • Skye, Foundry, Indigo, Ready, Tudor
  • Tremont, Camino, Carson, Henson
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori
Tip: For general help styling your site's text, visit Changing fonts.

Before you begin

  • For the best display, ensure that each header’s minimum font size is larger than the body text font size.
  • Some text, such as body text, can't be manually scaled.
  • Long words won’t break. If there's a long word displaying in a small space (such as a blog grid thumbnail tile), the end of the word may be cut off. If this happens, reduce the maximum size to ensure all words will fit in their containers.
  • If your mobile site isn’t functioning, experiment with reducing the minimum fonts.

Step 1 - Open the Style Editor

Log into your site and navigate to a page containing text you want to scale (such as Heading 1 text).

From the Home Menu, click Design, then Style Editor.

Step 2 - Enable scaling

In York, Artesia, Flores, Harris, Jasper, Jones, Lange, and Shibori, ensure the Scale tweak is checked for that text type. For example, to enable scaling for Heading 1 text, check the Scale Heading 1 tweak.

For all other templates, skip to the next step.

Step 3 - Set the maximum size

Click the font tweak for that text type (for example, Heading 1 Font) and use the Font Size slider to set the maximum font size.

Step 4 - Set the minimum size

Use the Min tweak to set the minimum font size for that text type (for example, Heading 1 Min). The font will never appear smaller than this size, even when viewed on mobile devices.

Preview scaling fonts

For the best results when previewing your maximum and minimum font sizes, open your site on a smartphone while you edit the font sizes on desktop. Refresh the smartphone every time you save the Style Editor changes. This is the most accurate way to see how your site looks on different devices.

Note: Device View doesn’t always accurately show scaled fonts. However, if the text fits within the style highlighter box that appears in Device View, it will generally display well on mobile devices.

Tweaks by template

For a full list of available tweaks, see your template's guide:

Was this article helpful?
2 out of 23 found this helpful