CMYK ↔ RGB ↔ HEX Color Converter
About Letter Spacing Calculator
The Letter Spacing (Tracking) & Optical Kerning Calculator converts Photoshop / Figma / InDesign integer tracking units (-100 to +1000) into standard CSS `letter-spacing` in `em`, `rem`, and `px` units, optimizing optical legibility across font sizes.
How to Use Letter Spacing Calculator
Step 1
Enter Figma tracking integer or target CSS `letter-spacing`.
Step 2
Enter font size to evaluate computed pixel spacing.
Step 3
Inspect live text kerning on the preview stage.
Step 4
Click "Copy CSS letter-spacing".
Practical Use Cases for Letter Spacing Calculator
Translating Figma / Illustrator Tracking to CSS `letter-spacing`
Convert Figma tracking values (e.g. tracking: `50` or `-20`) into exact CSS `letter-spacing: 0.05em;` and `letter-spacing: -0.02em;`.
Optical Tracking Adjustments for Uppercase & Large Display Type
Apply proportional letter spacing for uppercase small caps (`letter-spacing: 0.1em`) and negative tracking for giant hero headlines (`-0.03em`).
Input & Output Examples
Converting Figma Tracking 40 to CSS em
Tracking: `40` (Figma / Adobe 1/1000 em scale), Font Size: `16px`
CSS `em`: `0.04em` | CSS `px`: `0.64px` | Formula: `40 / 1000 = 0.04em`
Key Features & Performance
- ✓Two-way conversion: Figma/Adobe Tracking (1/1000 em) $\\leftrightarrow$ CSS `em` $\\leftrightarrow$ CSS `px` $\\leftrightarrow$ CSS `rem`.
- ✓Includes optical spacing presets: Uppercase Micro-Caps (+0.12em), Clean Body (0em), Tight Headline (-0.025em), Display Poster (-0.05em).
- ✓Live interactive text preview with dynamic kerning slider.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy CSS declaration.
Key Terminology & Definitions
Tracking vs Kerning
Tracking (letter-spacing) adjusts spacing uniformly across all characters in a block of text, while kerning adjusts spacing between specific pairs of letters.
Adobe 1/1000 em Scale
The standard tracking measurement unit used in Figma, Photoshop, and InDesign where 1000 units equal 1 full em.