Formatting text

Use the text toolbar to format your text.

Last updated April 30, 2024

You can format text in the same editor where you add text, like in text blocks or image block captions.

This guide reviews the different ways to format text, including setting header or paragraph text, creating lists, adding indents, and bolding or italicizing.

Tip

To learn about styling text—including fonts, colors, and spacing—visit Styling text.

Format text

You can apply formatting to text while you’re editing or adding it.

To format your text in text areas like the text block and image block captions:

  1. Highlight the text you want to format.
  2. Use the icons in the toolbar to apply formatting to the text.

After using a text toolbar a few times, it might collapse into a condensed version. Click to expand it.

expand_toolbar.png

expand_toolbar.png

Note that certain text areas, like those in panels and page settings, have different formatting options. For example:

  • The color icon only appears in text blocks on version 7.1.
  • The toolbar for image block text on version 7.0 includes icons to bold, italicize, link, paste as plain text, and clear formatting. Other formatting options aren't supported.
  • The clipboard icon for pasting as plain text doesn't appear in areas that automatically strip formatting.

Use the sections below to review the specific steps for each type of formatting.

Align

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

Text_toolbar_align_text_drop-down_menu.jpg

Text_toolbar_align_text_drop-down_menu.jpg

Bold

In the text toolbar, click the B to bold text.

Note

If your font package doesn't include heavier font weights, the bold text may appear differently across browsers. To improve the consistency of bold text on different browsers, choose a font with more styles.

Bold_icon_Squarespace_text_toolbar_large_letter_B.png

Bold_icon_Squarespace_text_toolbar_large_letter_B.png

Code

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

The text 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 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, because the code block automatically formats code snippets for readability.

code.png

code.png

Headings

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

Headings_drop-down_Squarespace_text_toolbar.png

Headings_drop-down_Squarespace_text_toolbar.png

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.

Highlight

Accessing this feature

Highlighting text is only supported in text blocks on version 7.1 sites.

In the text toolbar, use the Text highlight tool to add emphasis to your text. In the drop-down menu, select a text highlight option:

  • Underline
  • Freehand
  • Wave
  • Cross
  • Double
  • Jagged
  • Circle
  • Scribble
  • Over and underline
  • Diagonal
  • Strikethrough

Customize the text highlight using the following style options:

  • Animation - Choose a style of animation: draw, fade, or fade and scale. Use the Duration slider to set the length of time for the animation. If you choose the draw animation, use Direction to select if the animation goes left to right or right to left.
  • Bring to front - Enable to bring the highlight in front of the text. When disabled, the highlight appears behind the text.
  • Color - Select a color from your site’s palette or a custom color. Use the slider to adjust the opacity.
  • End caps - Set a square or round shape for the ends of the highlight.
  • Thickness - Adjust the thickness of the highlight.
Text_highlit_icon_in_the_Squarespace_text_toolbar_letter_a_with_a_squiggle_under_it.png

Indent

In the text 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.

Indent_icon_Squarespace_text_toolbar.png

Italics

In the text toolbar, click the I to italicize text.

Italic_icon_Squarespace_text_toolbar.png

In the text 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.

Link_icon_Squarespace_text_toolbar.png

List

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

List_icons_Squarespace_text_toolbar.png

Monospace or code text

Monospace text has the same amount of horizontal space between each character. What we call this text depends on your site’s version.

In the text toolbar, click the Format drop-down menu and select Monospace.

To learn about the size, font, and color options for monospace text, visit Styling text.

Monospace_drop-down_Squarespace_text_toolbar.png

In the text toolbar, click the Format drop-down menu and select Code.

To learn about the size and color options for code text, visit Styling text. It's not possible to change the font style.

code.png

Paragraph or normal text

Format the primary body text on your site using the text toolbar. What we call this text depends on your site's version.

In the text toolbar, 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

To learn about the size, font, and color options for paragraph text, visit Styling text.

Paragraph_drop-down_Squarespace_text_toolbar.png

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

To see which style tweaks change the font, size, and color of body text, visit Styling text.

normal.png

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 toolbar.

Paste_as_plain_text_icon_Squarespace_text_toolbar.png

Quote

In the text toolbar, click the quote icon to add quote formatting.

Quote_icon_Squarespace_text_toolbar.png

Remove formatting

In the text toolbar, click the remove formatting icon to strip the text of formatting. This can be useful if you paste text from other sources, or want to start over. In version 7.1 text blocks, this also removes any custom text colors.

Squarespace_text_toolbar_clear_text_formatting_button.jpg

Scale

Accessing this feature

Scaling text is only supported in some 7.0 template families, and text blocks on version 7.1 sites.

To set text size to fill the width of the block without line breaks regardless of browser size, click the scale text icon in the text toolbar. This option is best for short titles or headlines; longer text may appear too small, especially on mobile browsers.

When text is scaled, other size settings won't affect it. You can use headings or paragraph formatting to match other styling, like fonts, and to optimize your text for SEO. You can still bold, italicize, and strikethrough text when it's scaled, and change its color, but options like lists and pull quotes won't work. 

Scaling_text_icon_Squarespace_text_toolbar.png

Strikethrough

In the text toolbar, click the strikethrough icon to add strikethrough formatting.

Strikethrough_icon_Squarespace_text_toolbar.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 with the text toolbar.

You can also highlight text and use the keyboard shortcut + U on a Mac or Ctrl + U on Windows to add an underline.

Consider your underline placement carefully, as visitors will often assume underlined text is a link, and may try to click it.

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 those template families.

You can also highlight text and use the keyboard shortcut + U on a Mac or Ctrl + U on Windows to add an underline.

Consider your underline placement carefully, as visitors will often assume underlined text is a link, and may try to click it.

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

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 Squarespace formatting. If you have issues with spacing or headings in pasted text, visit Fixing text formatting for help.

Consider hiring an independent designer through Squarespace Marketplace to customize your site's text.

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.