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.  

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 Google fonts by clicking this button, then pasting the Google font embed code into the popup dialog.

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 affect 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 or lower 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.

Space Below / Space Above

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

Cursor Type

The cursor dropdown allows you to specify how the user's mouse cursor will look when they hover over an element.

While this is found in the Text Formatting Panel, it actually isn't limited to text elements -- you can set the cursor type for any element on the page.

The dropdown will allow you to choose from a range of standard, predefined cursor types:

List Options

This will allow you to specify the type of bullet or numbering used in a list element. 

Before you can use this, you'll need to select the text and tag it as <ul> within the text element on the stage.

Text Alignment

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

Bold, Underlined, and Italicized Text

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

Did this answer your question?