Customize your site’s text using a variety of settings.
You can style a text's font, color, size, spacing, and more in site styles. Styling controls the typography (font design), giving the words personality and flair. Most style changes apply to that text type site-wide.
This guide reviews the different ways to style your site's text.
Tip: To learn about formatting text — including setting the text type, creating lists, and bolding and italicizing — visit Formatting text.
Watch a video
Style text
The way you style your site's text depends on your site's version.
To style your text, use the fonts and colors panels in site styles to set site-wide fonts and colors, or customize fonts and colors in specific sections.
To learn more, visit Changing fonts and Changing colors.
To style your text, use site styles to choose your text's fonts and colors. To help you achieve a consistent look, site styles tweaks apply to all text with a specific format.
For example, you can change the font of all headers at once, or all body text at once. Each template has slightly different text styling options. Learn more about how this works in Changing fonts.
Use the sections below to see the specific steps for each style option.
Color
The way you change text color depends on your site's version.
You can change the color of a whole text group in site styles, like Paragraph (small) or Heading links. To change the color of a text group:
- Open site styles, then click Colors.
- Open the color theme for the section you want to edit.
- Click the color tweak that corresponds with the text group you want to edit, then choose a new color.
For more detailed steps, visit Changing colors.
Text block color
In a text block, you can change the color of selected text. Change the colors of individual words to make them pop, or change each letter to a different color. To set custom text colors:
- Click Edit on the page or item with the text block, then click inside the text block.
- Highlight the text you want to change. This can be a single letter, a single word, or multiple words.
- In the text toolbar, click the color icon, then choose a new color. Click Palette to choose a color from your site-wide color palette, or click Custom to use the color picker.
- Click Save to save your changes and keep editing, or click Exit and then Save to close the editor..
Keep in mind:
- Changing text colors in the text block toolbar overrides any text colors set in site styles. After changing text colors in the text block toolbar, if you then change the color of that same text group in site styles, the color changes you made from the text block toolbar will stay in place.
- Changing a section's color theme overrides all text colors and resets the text to match the color settings for that theme. To restore custom text colors in the text block, you'll need to reapply them manually.
- If you change a section's color theme, then switch back to the previous color theme, custom text colors aren't preserved. You'll need to reapply them manually.
- The color icon only appears in text blocks, and not in other text toolbars.
In site styles, click the color tweak that corresponds with the text you want to edit. For more detailed steps, visit Changing colors.
Font
In site styles, click the text group you want to edit, then choose a new font. For detailed steps, visit Changing fonts.
Letter spacing
The way that you change the letter spacing depends on your site's version.
To change the letter spacing:
- While editing a page, click the paintbrush icon, then click Fonts.
- Under Global Font Styles, click the text type you want to edit: Headings, Paragraphs, Buttons, or Miscellaneous.
- Use the Letter Spacing slider to adjust the spacing, or enter a new em value.
- Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
In site styles, click the Letter spacing tweak to change the space between letters.
When setting the letter spacing:
- Negative values may cause overlapping characters. Keep letter spacing at 0px or higher to avoid layout issues on mobile.
- If your spacing changes don't show on mobile, ensure your spacing is set to px instead of em. For templates in the Bedford and Pacific families, headers have a maximum spacing on mobile.
Line height
The way that you change the line height depends on your site's version.
To change the line height:
- While editing a page, click the paintbrush icon, then click Fonts.
- Under Global font styles, click the text type you want to edit: Headings, Paragraphs, Buttons, or Miscellaneous.
- Use the Line Height slider to change the spacing, or enter a new em value.
- Your changes will stay in place while you edit other page content. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
In site styles, use the Line height tweak to change the space between lines.
Note: A line height of 0em may cause overlapping text, especially on mobile devices.
Monospace or code text
Monospace text has the same amount of horizontal space between each character. What we call this text and how you style it depends on your site’s version.
The size and font of monospace text follows the Miscellaneous text style in the Fonts panel. To style a font, visit Changing fonts.
The color of monospace text follows the Paragraph (medium) tweak in the Colors panel. To change font color, visit Changing colors.
The size and color of code text follows the body text tweaks. It's not possible to change the font style.
Paragraph or normal text
What we call the primary body text and how you style it depends on your site's version.
The size and font of paragraph text follows the Paragraphs text style in the Fonts panel.
Text on your site follows your site-wide color palette. Alternatively, you can make a section of text stand out by adjusting the section's color theme.
Which style tweaks change the font, size, and color of body text on your site depends on your template family:
Template |
Font |
Size |
Color |
Adirondack |
Main content > Text |
Main content > Text |
Main content > Text color |
Avenue |
Typography > Body text |
Typography > Body text |
Colors > Text color |
Aviator |
Typography > Text font |
Typography > Text font |
Colors > Text |
Bedford |
Main content > Page text font |
Main content > Page text font |
Main content > Page text color |
Brine |
Content: fonts > Body text |
Content: fonts > Body text |
Content: colors > Body text |
Farro |
Main: Content fonts > Body text |
Main: Content fonts > Body text |
Main: Content colors > Body text |
Five |
Main content > Body text |
Main content > Body text |
Main content > Body text color |
Flatiron |
Main content > Text |
Main content > Text |
Main content > Text color |
Forte |
Typography > Body text |
Typography > Body text |
Typography > Body text color |
Galapagos |
Site wide > Body font |
Site wide > Body font |
Site wide > Body text color |
Ishimoto |
Main content > Text |
Main content > Text size |
Main content > Body text color |
Momentum |
Main content > Body text |
Main content > Body text |
Main content > Body text color |
Montauk |
Typography > Body text |
Typography > Body text |
Colors > Text color |
Native |
Main content > Body text |
Main content > Body text size |
Main content > Body text color |
Pacific |
Main content > Text font |
Main content > Text font |
Main content > Text color |
Skye |
Site-wide fonts > Body |
Site-wide fonts > Body |
Site-wide text colors > Body text color |
Supply |
Main content > Body font |
Main content > Body font |
Main content > Body text color |
Tremont |
Site-wide fonts > Body font |
Site-wide fonts > Body font |
Site-wide font colors > Body color |
Wells |
Site wide options > Text |
Site wide options > Text size |
Site wide options > Headings color |
Wexley |
Main content > Body text font |
Main content > Body text font |
Main content > Body text color |
York |
Site: typography > Body font |
Site: typography > Body font |
Site: typography > Body text color |
Quote
In a text block, the quote style varies depending on your site's version.
The quote style follows the font and color for that type of text.
For example, if your quote text is Heading 2 text, the quote will have the same font and size as other Heading 2 text on your site. The quote text color will follow the colors for that section.
Tip: As an alternative, use a quote block, which has its own style options.
Quote style varies by template. For example, in some templates, the quote has a vertical line to the left to add visual separation.
Tip: As an alternative, use a quote block. The block has its own style options in some templates, which helps the quote stand out.
Quote text styles
Here's how to style quote text in these template families. In some templates, quote text follows the same styles as the quote block.
Template family |
Font |
Color |
Line |
Adirondack |
Follows body text |
Follows body text |
No |
Avenue |
Follows body text |
Follows body text |
Yes |
Aviator |
Quote font tweak |
Quote text tweak |
No |
Bedford |
Follows body text |
Follows body text |
No |
Brine |
Follows body text |
Follows body text |
Yes |
Farro |
Follows body text |
Follows body text |
Yes |
Five |
Blockquote tweak |
Follows body text |
No |
Flatiron |
Quote font tweak |
Quote color tweak |
No |
Forte |
Follows body text |
Follows body text |
No |
Galapagos |
Follows body text |
Follows body text |
Yes |
Ishimoto |
Follows body text |
Follows body text |
Yes |
Momentum |
Follows body text |
Follows body text |
No |
Montauk |
Follows body text |
Follows body text |
Yes |
Native |
Quotes and Quotes size tweaks |
Follows body text |
Yes |
Pacific |
Follows body text |
Follows body text |
Yes |
Skye |
Follows body text |
Follows body text |
Yes |
Supply |
Follows body text |
Follows body text |
Yes |
Tremont |
Follows body text |
Follows body text |
Yes |
Wells |
Quote and Quote size tweaks |
Follows body text |
No |
Wexley |
Quote font tweak |
Follows body text |
No |
York |
Follows body text |
Follows body text |
Yes |
Size
The process for changing your text size depends on your site's version.
In the Fonts panel, click a font pack to apply it to your site, then choose a Base size. All other text scales relative to this size. You can also click Assign styles to set the font size for a specific text area.
For full steps, visit Changing fonts.
In site styles, click the Size tweak to set the font size. You can use the slider or manually enter a font size.
In some templates, you can set the maximum or minimum sizes for fonts on different screen sizes. Learn more in Scaling fonts.
Tip: All Squarespace sites have-built in responsive design that optimizes your site's text sizes for every screen.
Text Transform
Use Text Transform to apply capitalization styling to text, including:
- Capitalize - Capitalize The First Letter Of Every Word
- Uppercase - ALL CAPS
- Lowercase - make every letter lowercase
This tweak only applies to certain fonts and text groups.
Text Transform appears in different areas depending on your site's version.
- While editing a page, click the paintbrush icon, then click Fonts.
- Under Global font styles, click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
- Choose a style option from the Text transform drop-down menu.
- Your changes will stay in place while you edit other page content. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
In site styles, use the Text transform drop-down menu in any font tweak.
Weight
The way you change text weight depends on your site's version.
- While editing a page, click the paintbrush icon, then click Fonts.
- Under Global Font Styles, click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
- Choose a weight option from the Weight drop-down menu.
- Your changes will stay in place while you edit other page content. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
In site styles, use the Weight drop-down menu in any font tweak to make text thicker or thinner.