Letter Spacing Adjuster

Pick letter spacing by eye and convert it to CSS, Figma and Photoshop values

The letter spacing adjuster lets you change the gap between letters (letter-spacing, also called tracking) on a specimen shown at its real size. Once you settle on a value, it builds the CSS code and a Tailwind class, and converts the same value into the units used in Figma, Photoshop and Word. For example, letter-spacing: -0.02em; on 16px text pulls each letter 0.32px closer to the next, which is −2% in Figma, tracking −20 in Photoshop and −0.24pt in Word for 12pt text.

Type any sentence into the specimen box. The magnified view draws the first few letters large and hatches the places where the space is added. The comparison ladder puts six lines above and below the current value side by side so you can choose by eye. The reference-by-size graph shows the spacing that Apple SF Pro, Inter and Material 3 use at each font size, next to your current value.

Why and when to adjust letter spacing

A typeface ships with default spacing chosen by its designer, and most text looks fine as it is. That default is tuned for a particular size and use, though, so very small text, very large text and all-caps text can look off. Adjusting letter spacing means widening or tightening the gaps a little to make such text easier to read.

• Moving a design to the web: Writing Figma's −2% or Photoshop's −20 straight into CSS gives a completely different result. Enter the design value in the matching field of the converter below and the em and px values appear at once.
• Large headings that look loose: As letters grow, the gaps between them grow too and become noticeable. Tightening a little often makes a heading look solid, but with some typefaces the opposite is true, so compare the values above and below on the comparison ladder.
• Small text and all-caps labels: Photo captions, footnotes, buttons and all-caps labels look less cramped with slightly more space. The Google Fonts typography guide also says that capital letters read better with extra spacing.
• Logos and wordmarks: Short words are sometimes spread wide for effect. Above about 0.1em, check that the space added after the last letter does not throw off centering.
• Fitting a document to a line or a page: In Word, a word or two that spills onto the next line is often fixed by condensing the spacing slightly. Each app uses different units and menus, which are listed below.

How to use it

1. Pick a similar example above (body, small text, heading, display, caps label, logo text), or set the font, font size, weight and line height yourself. Fonts that are not installed on this device are marked "not on this device" in the list.
2. Type your own sentence into the actual-size specimen. The magnified view and the comparison ladder switch to the first line of that sentence.
3. Move the letter spacing slider, or click the line that reads better on the comparison ladder. The clicked value moves to the center, so a few clicks narrow it down. The ladder step can be 0.005em, 0.01em or 0.025em.
4. If you already have a value from a design file, enter it in the "Values in other apps" table (Figma %, Photoshop tracking, Word pt and so on). Whichever field you use, the others update with it.
5. Choose em or px for the CSS output, then copy the full CSS, a single spacing line or the Tailwind class. You can also save the specimen as an image, or copy a link that carries the current settings to share with someone.

Unit conversion: em, px, %, tracking and pt

Every app counts letter spacing in its own unit. CSS em, Figma % and Adobe tracking are all proportional to the font size, so the ratio survives a change of size. px and Word's pt are fixed lengths, so you have to recalculate them for each font size to keep the same ratio. The table below shows what to enter in each app for −0.02em on 16px (12pt) text.

Word sets font size in pt, so when you match a web size in px, use 1px = 0.75pt (16px = 12pt). iOS kern and SwiftUI tracking are fixed lengths in pt, so for the same numeric font size you enter the same number as in the px field. Tailwind CSS has the six letter-spacing classes below. This tool outputs the class name when the value matches exactly, and an arbitrary-value class such as tracking-[-0.02em] otherwise.

Different spacing for different font sizes

Even within one typeface, the right spacing changes with size. Apple publishes a tracking table for SF Pro from 6pt to 96pt, Inter publishes a formula that gives the spacing from the font size (−0.0223 + 0.185 × e^{−0.1745 × size}), and Material 3 sets spacing for each of its 15 type roles. All of them add space to small text, but the details differ. Apple and Inter reach 0 around 12px and tighten at body sizes (14 to 20px). Material 3 gives body, label and the smaller title roles (Title Medium and Small) positive values (+0.007 to +0.045em), and Title Large, Headline and Display roles 0 (only the largest, Display Large, is −0.004em). At large sizes Inter stays near −0.022em, while the SF Pro table turns positive again from 24pt and returns to 0 at 80pt and above.

Apple's table is in pt and Material 3 is in sp, so on the web the numbers are read as the same number of px and converted to em (three decimal places). Apple's table is the same on iOS and macOS. Because the direction for large headings differs from one source to the next, the safest approach is to build a specimen in the font you will actually use and compare the values yourself.

Where to set letter spacing in Word and design apps

Japanese text starts from a different default. The W3C Requirements for Japanese Text Layout (JLREQ) say that, in principle, the character frames of ideographs, hiragana and katakana are square boxes and the characters are set with no spacing between them (solid setting). In other words, the baseline for Japanese body text is letter spacing 0, and you adjust it only where needed, such as in headings or narrow columns. Each app puts the setting in a different place.

• Word: On the Home tab, select the Font dialog box launcher, then the Advanced tab. Under Spacing, choose Expanded or Condensed and enter the amount in the By box (in points). Every selected letter changes by the same length.
• Figma: Enter a value in % or px in the Letter spacing field of the text properties. The Figma plugin documentation defines the unit of this value as either PERCENT or PIXELS.
• Photoshop, Illustrator, InDesign: Enter it in the tracking field of the Character panel. Adobe's help pages say that both tracking and kerning are measured in units of 1/1000 em.

Accessibility: keep the layout intact when users widen the spacing

WCAG 2.2 Success Criterion 1.4.12 Text Spacing (AA) requires that no content or function is lost when a user sets line height to 1.5 times the font size, spacing after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. It does not tell you to use those values in your design. It tells you to make sure text is not clipped or overlapped when a reader who needs it widens the spacing. The "WCAG 0.12" tick on the slider marks that value. Check that fixed-width buttons and headings cut to a single line do not overflow at 0.12em.

The Google Fonts typography guide says that all-caps text reads better with extra spacing and advises against negative letter spacing unless the text is at a very large heading size. For body text, start from 0 and compare the values above and below on the comparison ladder.

How CSS letter-spacing actually behaves

• An em value is turned into px on the element that declares it, and that px value is inherited. CSS Text 3 defines the computed value of letter-spacing as an absolute length. So if a 16px parent has letter-spacing: 0.1em, a 32px child inherits 1.6px unchanged (measured in Chrome 151). To keep the ratio in a child of a different size, write the em value again on the child. The % unit added in CSS Text 4 is inherited as a percentage, and MDN's compatibility data lists support from Chrome 145, Firefox 45 and Safari 7.
• Some browsers add space after the last letter too. The specification says no spacing is added at the start or end of a line, but Chrome 151 does add space after the last letter. As a result, centered text shifts to the left by half of the letter spacing. Give the heading block a padding-left of the same value, or subtract the same value with margin-right on the element wrapping the text, and it returns to the center. The faded last hatch mark in the magnified view is that space.
• Ligatures may be turned off. The specification recommends not applying optional ligatures such as fi when letter spacing is not 0. If you need them, you can switch them on with font-feature-settings, and the specification says that setting takes priority.
• Cursive scripts such as Arabic get no spacing. The specification says letter spacing must not be added between letters of a script that connects.

Common mistakes

• Using Photoshop tracking directly as px: Tracking −20 is not −20px but −0.02em. At 16px that is −0.32px.
• Using Figma % as em: Writing Figma's −2% as −2em makes the letters overlap completely. Divide by 100 and write −0.02em.
• Fixing a px value and then changing only the font size: A −0.32px that suited 16px text becomes −0.01em, half the ratio, on a 32px heading. Use em wherever the size changes.
• Forgetting that a parent's em spacing reaches children as px: An em spacing set on a large heading is passed down as px to the small text inside, making it too wide, or the reverse.
• Applying negative spacing to capitals: Start all-caps labels on the wider side. The caps label example uses +0.08em.
• Fitting text tightly into a fixed-width button: If a user widens spacing to 0.12em, the text overflows (WCAG 1.4.12). Let the button width grow with the text.
• Centering widely spaced text: With 0.2em on logo text, Chrome shifts it left by 0.1em. Use the correction above as well.

Limits and cautions

• The specimen is drawn only with fonts installed on this device. A font marked "not on this device" in the list, or a custom name that cannot be found, is drawn with a fallback font, so the spacing can differ from the web font on your real site.
• Some things vary by browser, such as the space after the last letter and the rounding of fractional px. The measurements in this article are from Chrome 151, and Safari and Firefox were not measured. The magnified view measures whether the browser you are using adds space after the last letter and tells you.
• Figma's documentation says only that the Letter spacing units are % and px and does not state what % is relative to. This tool calculates % as a percentage of the font size, so compare the px value Figma shows after you switch its unit to px with the px field here at least once.
• Saving as an image redraws the specimen on a canvas, so lines may break in different places than on screen. In browsers without canvas letterSpacing support (before Safari 18.4, according to MDN), letters are drawn one by one and kerning is lost.
• The values in the reference graph were set by Apple, Inter and Material 3 for their own typefaces. For other fonts, use them as a starting point and confirm with the specimen.

As of October 22, 2026. Based on W3C CSS Text Level 3 (Candidate Recommendation Draft 2026-08-14) and Level 4 (Editor's Draft 2026-08-14), WCAG 2.2 (2024-12-12), MDN browser-compat-data 8.1.6, Apple HIG Typography (updated 2025-12-16), androidx Material 3 TypeScaleTokens, W3C JLREQ, and measurements in Chrome 151.

Sources

• 01W3C: CSS Text Module Level 3Candidate Recommendation Draft 2026-08-14. Definition of letter-spacing (normal | length), no spacing at the start or end of a line, optional ligatures, connected scripts
• 02W3C: CSS Text Module Level 4Editor's Draft 2026-08-14. Percentages allowed in letter-spacing, relative to the used font size
• 03MDN: letter-spacingbrowser-compat-data 8.1.6 (2026-10-15): % values Chrome 145, Firefox 45, Safari 7; canvas letterSpacing Chrome 99, Firefox 115, Safari 18.4
• 04W3C WAI: Understanding Success Criterion 1.4.12 Text SpacingAA. Line height 1.5, spacing after paragraphs 2, letter spacing 0.12, word spacing 0.16 times the font size must not remove content
• 05Google Fonts Knowledge: Tracking / letter-spacingCapitals read better with extra spacing; negative spacing only at very large heading sizes
• 06Apple: Human Interface Guidelines, TypographySF Pro tracking table by size (6 to 96pt, 1/1000 em), update logged 2025-12-16
• 07Inter: Lab (Dynamic Metrics)tracking = −0.0223 + 0.185 × e^(−0.1745 × font size)
• 08AndroidX: Material 3 TypeScaleTokensSize and letter spacing (sp) of the 15 roles from Display to Label
• 09Adobe: Photoshop, line and character spacingTracking and kerning are measured in 1/1000 em (InDesign and Illustrator help say the same)
• 10Microsoft: Change the spaces between text in WordFont dialog box, Advanced tab, Spacing: Expanded or Condensed; the unit of the value is pt (VBA Font.Spacing documentation)
• 11Figma Plugin API: LetterSpacingLetter spacing units are PIXELS and PERCENT
• 12Android Developers: TextView.setLetterSpacingLetter spacing is set in em
• 13Apple Developer: NSAttributedString.Key.kernThe adjustment between letters is in pt (SwiftUI tracking is also pt)
• 14Tailwind CSS: letter-spacingSix steps from tracking-tighter −0.05em to tracking-widest 0.1em
• 15W3C: Requirements for Japanese Text Layout (JLREQ)In principle, character frames of ideographs, hiragana and katakana are square boxes and the characters are set without intervening spacing (solid setting)

Frequently asked questions

Related tools