All Collections
Getting Started
The Text Formatting Panel
The Text Formatting Panel

Change the font, text styling, text alignment, and list style of your text elements.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

The text panel contains all the options for text formatting.

To use it, select an element on the page or some text within an text element, then open the panel from the right toolbar, select it from the "Window" menu, or press shift-T on your keyboard.

You may notice that certain values in the panel are greyed out and surrounded in parentheses. These values are being inherited from the global styles of the website. As with other global styling, you can override these inherited values by changing them here in the panel; you'll notice that the text becomes black to indicate that the styling has been defined at the level of this element.  

Changes you make to text by directly selecting it are not responsive changes, those new values will reflect across all device modes. If you select the text element, you can apply text changes that are responsive, but only if what you're trying to change isn't defined in Global Styles.

Setting the Font

Font Family

Use the dropdown at the top of the panel to select the font family for the text. A number of preset fonts are available by default.

Add Font

You can add additional fonts by clicking this button. The font manager will open and you then upload new fonts, select new Google fonts, or access other fonts previously uploaded to your account.

Clear Format

This will reset the text by removing all element-level styling. Any styling that is set in the website global styles will still be inherited.

Text Styling Parameters

Font Size

This controls the size of the font as it appears on screen.  It supports pixels (px), ems (em), and percentages (%).  By default, if you type in a number it will assumed to be pixels (px).

Line Height

This controls the space above and below lines of text.  It will need to be increased as font size increases to avoid text lines from overlapping.

Font Weight

This property controls the thickness of the lines in a font.  Each font family has different options for the available font weights.

Be aware that using too many font weights on your website can have an adverse effect on page performance as they all must be loaded separately.

Letter Spacing

Letter spacing controls the spacing between each character in a word.

Case

Case can force all characters to be upper case, lower case, or start case. This setting is for display only; the capitalization of the actual text that you typed will always be preserved.

Text Indent

Controls the amount of indent for the first line of a block of text.

Text Alignment

Aligns the text to the left, center, or right side of its parent, or justifies it.

Space Below / Space Above

This controls the amount of space below or above a block of text.

Text Decoration

Use these toggles to set the style of the text to underlined, strike through, or italics.

Did this answer your question?