---
title: "Text styling"
description: "Text styling extensions change how text looks: its color, background color, font, size, line height, and alignment."
canonical_url: "https://tiptap.dev/docs/editor/extensions/text-styling"
---

# Text styling

Text styling extensions change how text looks: its color, background color, font, size, line height, and alignment.

## When you use them

- **Colors.** Color sets the font color of text, and Background color sets the color behind it. Both accept any color.
- **Fonts.** Font family and Font size set the typeface and the size of the selected text.
- **Spacing.** Line height sets the line height of text.
- **Alignment.** Text align aligns paragraphs, headings, or other blocks left, center, right, or justified.

## How they work

- **They build on the Text style mark.** Text style renders a `span` tag and adds no styling by itself. Background color, Color, Font family, Font size, and Line height add their value to that span as an inline style, so each of them needs Text style. [Nodes and marks](https://tiptap.dev/docs/editor/core-concepts/nodes-and-marks.md)
- **The TextStyle kit bundles them.** The [TextStyle kit](https://tiptap.dev/docs/editor/extensions/functionality/text-style-kit.md) holds Text style, Background color, Color, Font family, Font size, and Line height. None of them is in the [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md).
- **Text align works on nodes.** It adds an attribute to the node types you list in its `types` setting, which is empty by default. It has its own package and isn't part of the TextStyle kit.

## Related

- [Text formatting](https://tiptap.dev/docs/editor/extensions/text-formatting.md) marks words and phrases as bold, italic, linked, or highlighted.
- [Text blocks](https://tiptap.dev/docs/editor/extensions/text-blocks.md) are the paragraphs and headings that Text align aligns.