Add and format text
Select the Text tool from the toolbar or press T to add text to your document.
Text is placed inside a text container, an element such as a paragraph (
<p>) or heading (
To add text, create a text container with the Text tool, then enter text inside the container.
Text container size
When the Text tool is selected, you can draw a new text container of fixed size, or click the stage to create a container that will expand to fit your text as you type.
Resize an existing text container by clicking it with the Text tool selected, then dragging one of the handles at the corners and sides of the container.
Text container type
Use the Tag name dropdown to select from common text container elements, such as
<span>. You can also type in another tag.
Each tag listed in the dropdown has a default set of styles.
You can select a range of characters inside a text container only when the Text tool is active. (When the Selection tool is active, you can only select the entire text container, not specific parts of the text.)
Click before or after the text you want to select, then drag over the text to highlight it.
To deselect text, press Esc.
To type inside an existing text container, select the Text tool, then click inside the text container.
When you're in text editing mode, the text container is highlighted in blue and has resize handles on the corners and the sides. The blinking cursor indicates where newly entered text will be added.
Delete a text container
Use the Selection tool to select a text container, then press the Delete key.
Use the tool options bar or the Text panel to format text. The styles you choose apply to any currently selected text or text container. You can also set text styles before creating new text.
Formatting options in Google Web Designer include the following:
- Tag name - Select an HTML tag for the text container, or enter a tag that's not in the list. (If you change the tag, the default styles for the new tag will be applied.)
- Font name - Select a font or add a font from Google Fonts. (Learn more about choosing fonts in Google Web Designer.)
- Text style - Select the font weight (such as Bold or Regular) and whether the text is italic.
- Font size - Set the font size in pixels. This field may not reflect the displayed font size if text fitting options are enabled.
- Text color - Set a color using the color picker or hexadecimal value.
- Text alignment - Select Left align, Center align, Right align, or Justify.
- List - Select Numbered list or Bulleted list to make the text into a list.
- Indentation - Decrease or increase the indent.
- Link - Create or edit a hyperlink.
You can set additional text styles, such as
line-height for leading, in the CSS panel.
Copy text formatting
You can reuse text styles across text containers.
- Right-click the text container with the formatting you want to duplicate and select Copy text styles.
- Right-click the text container you want to change and select Apply text styles.
Each tag listed in the text tag dropdown is associated with a default set of styles that gets automatically applied to text inside any tags of that type. You can change these default styles, or apply them to text of other types.
Hover over the arrow to the right of a tag to open a menu with the following commands:
- Apply default styles - The selected text changes to use the tag's default styles, even if the selected text is in a different tag type.
- Set as default - Assign the current text styles as the new defaults for the tag. Existing text containers of this tag type use the new default styles, except when you have changed specific styles for those containers—the new defaults don't override your previous changes.