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

Formatting and styling text

In Squarespace, there are two main ways to customize text:

  • Formatting the structure of the text, including headers, lists, indentation, and bold/italics.
  • Styling the look of the text, including fonts, colors, sizes, and spacing.

You'll format text in the editors where you add the text, like Text Blocks. Style text in the Design panel.

Format text

Formatting creates basic text structure, helping you organize ideas on a page. You can apply formatting to text while you’re editing or adding it.

To format your text:

  1. In text editors like the Text Block, highlight the text you want to format.
  2. Use the icons in the toolbar to apply formatting to the text.

Learn more by following the links below:

I'm not seeing all of the formatting options

Certain text areas, like in panels and page settings, have different formatting options. For example, you may not see the clipboard icon for pasting as plain text because these areas automatically strip formatting when you paste text.

Style text

Styling controls the typography (font design), giving the words personality and flair. After formatting your test, use the options in the Design panel to change the style. The way you style your site's text depends on your site's version.

To style your text, use the Fonts and Colors panels 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 the Site Styles panel 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.

Follow these links to learn more about specific style options:

Align

In the Text Block toolbar, click the paragraph align icon to align text to the left, center, or right.

align.png

Bold

In the Text Block toolbar, click the B to bold.

toolbar-bold.png

Code

The way that you display code depends on your site's version.

The Text Block toolbar doesn't format text as code. To display examples of code in your text, use the Display Source option in a Code Block.

In the Text Block toolbar, use the Format drop-down menu to select Code. This prevents code from rendering in the Text Block so you can display examples of code.

Depending on your needs, you may want to use the Display Source option in a Code Block instead, since the Code Block automatically formats code snippets for readability.

Headings

In the Text Block toolbar, use the Format drop-down menu to create headings. The heading options are different depending on your site's version.

Choose from four levels of headings:

  • Heading 1 (h1)
  • Heading 2 (h2)
  • Heading 3 (h3)
  • Heading 4 (h4)

Choose from three levels of headings:

  • Heading 1 (h1)
  • Heading 2 (h2)
  • Heading 3 (h3)
Tip: Create a pull quote by mixing heading styles and wrapping one Text Block around another.

Indent

In the Text Block toolbar, click the increase or decrease indent icons to indent text to the left or right. Indenting will always indent the entire paragraph. It's not possible to only indent a single line.

text_toolbar_-_indent.png

Italics

In the Text Block toolbar, click the I to italicize.

toolbar-italics.png

Link

In the Text Block toolbar, click the link icon. You can link to:

  • An external page
  • An internal page
  • A file
  • An email address
  • A phone number

For detailed steps, visit Adding links to your site.

toolbar-link.png

List

In the Text Block toolbar, click the numbered and bulleted list icons to create lists.

text_toolbar_-_list.png

Paragraph or normal text

Format the primary body text on your site using the Text Block toolbar. What we call this text and how you style it depends on your site's version.

In the Text Block toolbar, use the use the drop-down menu to choose a Paragraph option and add regular body text. Choose from three levels of paragraph text:

  • Paragraph 1
  • Paragraph 2
  • Paragraph 3

Change the size and font by formatting Paragraphs text 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 color theme.

In the Text Block toolbar, select Normal from the drop-down menu to add regular body text.

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

Paste as plain text

If you copied text from an external program, paste it into the block as plain text by clicking the clipboard icon in the Text Block toolbar.

toolbar-clipboard.png

Quote

In the Text Block toolbar, select the quote icon to add quote formatting.

text_toolbar_-_quote.png

The quote format varies depending on your site's version.

Quote formatting 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 formatting 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

Remove formatting

In the Text Block toolbar, select the remove formatting icon to strip the text of formatting. This can be useful if you paste text from other sources, or to start over.

toolbar-remove-formatting.png

Underline

Underline options vary depending on your site's version.

Certain areas, such as lock screens and promotional pop-ups, have underline options, but Text Blocks don't support underlining text.

If you’re comfortable with HTML, you can use a Markdown Block or Code Block to underline text. Please note that we don't provide support for advanced modifications like these. For more details, visit Custom code FAQ.

Some templates have options in Site Styles for underlining specific types of text. Use the table below to review the type of text you can underline in these template families. To learn more about each option, visit your template's style tweaks guide.

As an alternative, if you're comfortable with HTML, you can use a Markdown Block or Code Block to underline text. Please note that we don't provide support for advanced modifications like these. For more details, visit Custom code FAQ.

Template family

Text you can underline

Adirondack

Pages titles and blog post titles

Avenue

Body links

Aviator

None

Bedford

None

Brine

Search bar header

Farro

Search bar header

Five

Sidebar site title and sidebar H3 text

Flatiron

None

Forte

Body links

Galapagos

None

Ishimoto

None

Momentum

Body links

Montauk

None

Native

Body links

Pacific

None

Skye

Body links

Supply

None

Tremont

Navigation links and Index menu links

Wells

None

Wexley

Body links

York

None

Color

In the Design panel, select the color tweak that corresponds with the text group you want to edit. For more detailed steps, visit Changing colors.

Font

In the Design panel, select the text group you want to edit, then select 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. In the Home Menu, click Design, then click Fonts.
  2. Click the-gear-icon on your selected font pack.
  3. Click the text type you want to edit: Headings, Paragraphs, Buttons, or Meta.
  4. Use the Letter Spacing slider to adjust the spacing, or enter a new em value.
  5. Click Save.

In Site Styles, select 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 version 7.0 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. In the Home Menu, click Design, then click Fonts.
  2. Click the-gear-icon on your selected font pack.
  3. Click the text type you want to edit: Headings, Paragraphs, Buttons, or Meta.
  4. Use the Line Height slider to adjust the spacing, or enter a new em value.
  5. Click Save.

In Site Styles, select the Line Height tweak to change the space between lines.

Note: A line height of 0em may cause overlapping text, especially on mobile devices.

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 the-gear-icon on your font pack to set the font size for a specific text area.

For full steps, visit Changing fonts.

In Site Styles, select 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. In the Home Menu, click Design, then click Fonts.
  2. Click the-gear-icon on your selected font pack.
  3. Click the text type you want to change: Headings, Paragraphs, Buttons, or Meta.
  4. Choose a style option from the Text Transform drop-down menu.

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. In the Home Menu, click Design, then click Fonts.
  2. Click the-gear-icon on your selected font pack.
  3. Click the text type you want to change: Headings, Paragraphs, Buttons, or Meta.
  4. Choose a weight option from the Weight drop-down menu.

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.

Troubleshooting

If you copy and paste content from programs like Microsoft Word or Google Drive, the text might carry over hidden styling that interferes with how it's formatted in Squarespace. If you see issues with spacing or headings in pasted text, visit Fixing text formatting for help.

For more help customizing your site's text, hire a Squarespace Expert.

Was this article helpful?
34 out of 149 found this helpful