letter-spacing

CSS-властивість letter-spacing (укр. — “відстань між літерами”) використовується для налаштування відстані між символами тексту. Це дозволяє створити ефект розширеного або стислого тексту, що може бути корисним для дизайну заголовків, кнопок, логотипів або тексту, який потребує покращеної читабельності.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

letter-spacing: normal | <length> ;

Значення

  • normal — встановлює стандартну відстань між літерами (використовується за замовчуванням).
  • <length> — визначає конкретну відстань між літерами. Це значення може бути задано в різних одиницях виміру, таких як px, em, rem, % тощо.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість letter-spacing застосовується до всіх символів в елементі, включаючи пробіли, що може вплинути на зовнішній вигляд тексту.
  • letter-spacing особливо корисно для налаштування інтервалів у заголовках або декоративному тексті, коли потрібно зробити текст більш відкритим або стислим.
  • При використанні від’ємних значень letter-spacing можна досягти ефекту “злипання” символів, що інколи використовується для створення графічних ефектів або стилізації логотипів.
  • Властивість letter-spacing зазвичай застосовується до блокових елементів, таких як параграфи або заголовки, але також може бути використана для інлайн-елементів.
  • Властивість підтримується всіма сучасними браузерами.