Styling text

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.

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

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.

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.

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.

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.

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:

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.

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.

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.

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.