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. In most cases, the headers would display somewhere between the two font sizes.
You can set these rules in these template families:
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 Site Styles
Log into your site and navigate to a page containing text you want to scale (such as Heading 1 text).
In the Home Menu, click Design, then Site Styles.
Step 2 - Enable scaling (York family)
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.
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 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: