Set minimum and maximum font sizes for version 7.0 sites.

All Squarespace templates have built-in responsive design that optimizes your site's text for every screen. Some templates include 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. Usually, the headers would display somewhere between the two font sizes.

You can set these rules in these template families:

• Skye
• Tremont
• York

This guide is for the version 7.0 templates listed above. To learn more about scaling text on version 7.1, and in other 7.0 template families, visit Formatting text.

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.
• For general help styling your site's text, visit Changing fonts.

Set font scaling sizes

To manually set the maximum and minimum sizes for your text:

1. Log into your site and navigate to a page containing text you want to scale (such as Heading 1 text).
2. Open the Site Styles panel.
3. In the York family, 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.
4. 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.
5. 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.
6. Click Save to apply your changes.

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 a computer. Refresh the smartphone every time you save Site Styles 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:

• Skye
• Tremont
• York