Tools Blog

Letter Spacing Tool

Calibrate letter spacing, word spacing and line height with live preview and preset styles.

6 presetspx / em / remCopy CSS instantly

① Adjust letter spacing, line height and font size ② Preview the result live ③ Copy the CSS values

Presets
Letter Spacing0em
Word Spacing0em
Line Height1.6
Font Size (px)16px
Font Weight
Font Family
Text Transform

Typography is the art and technique of arranging type. Good spacing creates rhythm, hierarchy, and visual comfort for the reader.

CSS Output
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.6;
font-size: 16px;
font-weight: 400;
font-family: DM Sans, sans-serif;
text-transform: none;

What is letter-spacing in CSS?

The CSS letter-spacing property controls the horizontal space between individual characters (also called tracking in print typography). It accepts positive or negative values in px, em, or rem. Using em units is generally preferred because the spacing scales proportionally when the font-size changes — a letter-spacing of 0.05em on a 16px font equals 0.8px, but on a 32px heading it becomes 1.6px automatically.

The word-spacing property adds or removes space between words, while line-height defines the vertical rhythm — the distance between baselines. Together these three properties control the density and readability of your text. WCAG 1.4.12 (Text Spacing) requires that no loss of content occurs when letter-spacing is set to at least 0.12em, word-spacing to 0.16em, and line-height to 1.5 — so always test your designs against these thresholds.

Frequently asked questions

The CSS letter-spacing property adds uniform space between every character in a text element. In print typography this is called "tracking". Positive values spread characters apart; negative values bring them closer. It accepts any CSS length unit (px, em, rem, ch) and is inherited by child elements.
When you set letter-spacing in em, the spacing scales automatically with the font-size. For example, letter-spacing: 0.05em on a 16px body becomes 0.8px, but on a 24px heading it becomes 1.2px — maintaining the same visual proportion. With px the spacing stays fixed, which can look too tight or too wide if the font-size changes due to user preferences or responsive design.
letter-spacing controls horizontal space between individual characters. word-spacing adds extra horizontal space specifically between words (on top of the normal space character). line-height sets the vertical distance between lines of text — it affects how "airy" or "dense" a paragraph feels. All three work together to create typographic rhythm.
Increase letter-spacing in three main scenarios: (1) uppercase text — capitals were designed for sentence case, so all-caps text needs extra tracking (typically 0.05–0.15em) to remain readable; (2) small-size text like captions and labels where characters can appear cramped; (3) display headings at very large sizes where tighter tracking often feels more refined and intentional.
For body text, a line-height between 1.5 and 1.7 is generally optimal — it gives enough vertical space for the eye to move from line to line without losing its place. Shorter content like headings and display text can use 1.1–1.3. Captions can work at 1.4. Avoid line-heights below 1 or above 2 for running text. WCAG 1.4.12 recommends at least 1.5 for body content.
Designers use precise spacing for: (1) brand style guides — documenting exact tracking and leading values for each text style; (2) CSS component libraries — finding the right letter-spacing for button labels, navigation items, and badges; (3) editorial design — balancing a display font at 64px with negative letter-spacing to look more refined; (4) accessibility audits — verifying text spacing meets WCAG 1.4.12 before launch.
WCAG 2.1 Success Criterion 1.4.12 (Text Spacing, Level AA) states that no loss of content or functionality occurs when users apply: letter-spacing of at least 0.12em, word-spacing of at least 0.16em, line-height of at least 1.5, and spacing following paragraphs of at least 2em. Your CSS must not use !important to override user-defined spacing or hard-code container heights that clip text.
Related Articles
CSS 5 min read
px, rem, em, vh: When to Use Each CSS Unit
A practical guide to CSS units: when to use px, rem, em, vh, and vw. Includes an accessibility-first explanation and a quick conversion reference table.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →