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

Styling text

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.

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 for a specific section.

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

In Site Styles, click the color tweak that corresponds with the text group 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. Your changes will stay in place while you edit other page content. To save your changes, hover over Done in the top left corner of the page editor and click Save.

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. To save your changes, hover over Done in the top left corner of the page editor and click Save.

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.

  • To learn more about each font size option, visit your template's style tweaks guide.
  • 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. To save your changes, hover over Done in the top left corner of the page editor and click Save.

In Site Styles, use the Text Transform drop-down menu in any font tweak.

To learn more about each font option, visit your template's style tweaks guide.

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. To save your changes, hover over Done in the top left corner of the page editor and click Save.

In Site Styles, use the Weight drop-down menu in any font tweak to make text thicker or thinner.

To learn more about each font option, visit your template's style tweaks guide.

Was this article helpful?
0 out of 1 found this helpful