Styling text

Customize your site’s text using a variety of settings.

Last updated December 19, 2024

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:

  1. Open site styles, then click Colors.
  2. Open the color theme for the section you want to edit.
  3. 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:

  1. Click Edit on the page or item with the text block, then click inside the text block.
  2. Highlight the text you want to change. This can be a single letter, a single word, or multiple words.
  3. 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.
  4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor..

RTE_click_color_circle.png

RTE_click_color_circle.png

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:

  1. While editing a page, click the paintbrush icon, then click Fonts.
  2. Under Global Font Styles, click the text type you want to edit: Headings, Paragraphs, Buttons, or Miscellaneous.
  3. Use the Letter Spacing slider to adjust the spacing, or enter a new em value.
  4. 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:

  1. While editing a page, click the paintbrush icon, then click Fonts.
  2. Under Global font styles, click the text type you want to edit: Headings, Paragraphs, Buttons, or Miscellaneous.
  3. Use the Line Height slider to change the spacing, or enter a new em value.
  4. 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 used in the title, subtitle, or caption of an image block follows the Paragraphs 2 text style in the Fonts panel. All other uses of monospace text follow the Miscellaneous text style. 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.

  1. While editing a page, click the paintbrush icon, then click Fonts.
  2. Under Global font styles, click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
  3. Choose a style option from the Text transform drop-down menu.
  4. 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.

  1. While editing a page, click the paintbrush icon, then click Fonts.
  2. Under Global Font Styles, click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
  3. Choose a weight option from the Weight drop-down menu.
  4. 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.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.