Skip to main content
iotools.cloudiotools.cloud

CSS Text Spacing Generator

API reference

Generate CSS letter-spacing, word-spacing, line-height, text-indent and tab-size with a live paragraph preview. Choose px, em or rem units and copy the CSS and HTML.

Input

Only used for the preview and HTML snippet.

In the chosen unit (em is relative to the font size).

Width of a tab character; visible in pre-formatted text.

Output

Your spaced text will appear here.

spacing declarations
CSS
HTML
Was this helpful?

More ways to use this tool

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-spacing-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-text-spacing-generator` tool (CSS Text Spacing Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/css-text-spacing-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSS Text Spacing Generator — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

Spacing is what makes text readable. CSS gives you five properties to control it: letter-spacing, word-spacing, line-height, text-indent and tab-size. This generator lets you adjust all of them against a live paragraph and copy the CSS.

How to use it

  1. Paste or type sample text. It only drives the preview and the HTML snippet.
  2. Adjust letter and word spacing. Small positive values open up headings and uppercase text; small negative values tighten large display type.
  3. Set the line height. A unitless value such as 1.5 scales with the font size. Body text usually reads best between 1.4 and 1.7.
  4. Add a first-line indent if you want the book-style paragraph look.
  5. Choose a unit. em and rem scale with font size; px is fixed.
  6. Copy the output: the declarations, a full CSS rule and a matching HTML snippet.

Quick reference

  • letter-spacing is often called tracking. Around 0.05em to 0.1em suits all-caps labels.
  • word-spacing changes the gap between words only.
  • line-height is leading. Use a unitless number so nested elements inherit the ratio, not a computed length.
  • text-indent indents only the first line of a block.
  • tab-size sets how wide a tab character renders in white-space: pre blocks.

Accessibility tips

WCAG 1.4.12 asks that text still works when users set line height to at least 1.5, paragraph spacing to 2× and letter spacing to 0.12em. Avoid fixed-height containers that clip text when spacing grows.

For lines under or through text, see the CSS Text Decoration Generator. For shadows, try the CSS Text Shadow Generator.

Privacy

Everything runs in your browser. Your text and settings are never uploaded.

letter-spacingword-spacingline-heighttext-indenttab-sizetypographykerningleadingtracking

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads