Letter Spacing
A bold text element transitions its letter spacing from 0 to 8 px on hover via native CSS — zero JavaScript, applicable to any text element.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Text has 56 effects, including 4 free. Explore the category →
3 usage examples
How it works
The effect stacks two classes on the same <span>. .demo-text sets the typography (2.5 rem, weight 800, initial spacing -.02em). .text-spacing overrides that spacing to 0 and declares transition: letter-spacing .4s — the browser plans the interpolation with no JS involved. The rule .text-spacing:hover { letter-spacing: 8px } is the only target instruction: on hover, spacing grows from 0 to 8 px; when the cursor leaves, it returns to 0.
CSS interpolates letter-spacing natively. The implicit easing is ease (accelerate then decelerate). On Chromium 112+, the letter-spacing transition is GPU-accelerated with no layout repaint — the property is animated on the compositor thread. On Firefox and Safari, the engine re-renders the text block each frame, but the animation stays smooth at 60 fps for short strings. No requestAnimationFrame, no event listeners: the JS source is empty.
Accessibility
- prefers-reduced-motion: absent from the code. If your audience includes motion-sensitive users, add
@media (prefers-reduced-motion: reduce) { .text-spacing { transition: none } }in your stylesheet. - The effect is hover-only — not keyboard-accessible without modification. For keyboard navigation, add
.text-spacing:focus { letter-spacing: 8px }. - Contrast: the code inherits
color: #fff(body) on#0a0a0fbackground — ratio ≥ 21:1, WCAG AAA. - No
ariaattributes in the structure: the change is purely visual, no semantic state to communicate to screen readers.
Browser compatibility
CSS letter-spacing, transition, and :hover are universally supported since 2012. Zero dependencies.
Without CSS transition support (very old browsers), the text jumps directly to the target spacing on hover — no error, no missing JS.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="demo-preview">
<span class="demo-text text-spacing">TEXT</span>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| letter-spacing (target) | 8px | The letter-spacing: 8px line in .text-spacing:hover — expansion amplitude. 3–4 px for nav items, 12–20 px for display titles. |
| transition duration | .4s | In transition: letter-spacing .4s on .text-spacing — .2s for instant snap-back, .6–.8s for elegant inertia. |
| transition easing | ease (implicit) | Replace .4s with .4s cubic-bezier(0.4,0,0.2,1) for a Material spring, or .4s ease-out for natural deceleration. |
| letter-spacing (start) | 0 | The letter-spacing: 0 line in .text-spacing — start from -.05em for a more dramatic 'tight → airy' effect. |
| font-size | 2.5rem | In .demo-text — the effect is more spectacular on larger sizes. Below 1 rem a px expansion is barely noticeable. |
| font-weight | 800 | In .demo-text — a high weight (700–900) maximizes the visual contrast between the tight and spread states. |
FAQ
letter-spacing increases the rendered width of the inline element. To avoid layout shift, wrap the span in a fixed-width container, or add min-width: max-content to a nav item to reserve the maximum space on load..text-spacing:focus { letter-spacing: 8px }. Via JS: toggle a CSS class (el.classList.toggle('expanded')) with .text-spacing.expanded { letter-spacing: 8px } — the CSS transition plays automatically in both directions.letter-spacing is independent of a variable font's axes. You can combine the spacing expansion with a simultaneous transition on font-variation-settings (weight, width) — the browser interpolates both properties at the same time.
