Text formatting

Text Formatting essentials

Text utilities are easiest to review on a paragraph. A lead paragraph is selected so the most common Text Formatting properties are visible.

Paragraph example

Text utilities help you adjust alignment, wrapping, emphasis, and readability without changing semantics. The lead paragraph is selected so you can immediately see the Text Formatting options. Tip: if selection is tricky, use App Structure to jump to the exact text node.

Screenshot: Paragraph exampleClick to open the larger image

Orient yourself in Properties panel

Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Text: Color and see how it fits into this area.

Screenshot: Orient yourself in Properties panelClick to open the larger image

Text: Color

Use Color for text-* utilities (including the new *-emphasis variants). This step matters because Text: Color is part of Selection Panels Properties Textelementcolor, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Text: ColorClick to open the larger image

Text: Alignment

Use Align for text-start, text-center, and text-end. This step matters because Text: Alignment is part of Selection Panels Properties Textalign, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Text: AlignmentClick to open the larger image

Text: Weight & line height

Use Font Weight and Line Height to tune hierarchy without custom CSS. This step matters because Text: Weight & line height is part of Selection Panels Properties Textfontweight, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Text: Weight & line heightClick to open the larger image

Text: Advanced toggle

Some Text utilities are tucked behind the Advanced toggle to keep the inspector concise. When you don’t see an option you expect, enable Advanced.

Screenshot: Text: Advanced toggleClick to open the larger image

Enable Advanced

Turn on Advanced to reveal additional Text options. This step matters because Enable Advanced is part of Selection Panels Properties Text Advanced Layout, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Enable AdvancedClick to open the larger image

Text: Transform

With Advanced enabled, Transform becomes available for uppercase/capitalize/lowercase. This step matters because Text: Transform is part of Selection Panels Properties Texttransform, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Text: TransformClick to open the larger image

Text: Overflow

More options appear under Advanced, including Overflow for nowrap/truncate/text-break. This step matters because Text: Overflow is part of Selection Panels Properties Textoverflow, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Text: OverflowClick to open the larger image

Next steps

Continue with other Utilities tours or go back to the Utilities menu.