Трекинг текста

letter-spacing

В SIMAI Framework доступно 6 модифкаторов межбуквенного интервала.

Классы

Класс Значение
tracking-tighter letter-spacing: var(--sf-text--tracking-tighter);
tracking-tight letter-spacing: var(--sf-text--tracking-tight);
tracking-no-tracking letter-spacing: var(--sf-text--tracking-no-tracking);
tracking-wide letter-spacing: var(--sf-text--tracking-wide);
tracking-wider letter-spacing: var(--sf-text--tracking-wider);
tracking-widest letter-spacing: var(--sf-text--tracking-widest);

Описание

Адаптивный модификатор. Изменяет треккинг (межбуквенный интервал) в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Принимает значения:
    • tracking-tighter – плотный текст
    • tracking-tight – сжатый текст
    • tracking-no-tracking – нормальный текст
    • tracking-wide – свободный текст
    • tracking-wider – просторный текст
    • tracking-widest – разреженный текст

Пример

tracking-tighter
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
tracking-tight
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
tracking-no-tracking
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
tracking-wide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
tracking-wider
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
tracking-widest
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="tracking-tighter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="tracking-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="tracking-no-tracking">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="tracking-wide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="tracking-wider">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="tracking-widest">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Переменные

Переменная Значение
--sf-text--tracking-tighter -0.05;
--sf-text--tracking-tight -0.025;
--sf-text--tracking-no-tracking 0;
--sf-text--tracking-wide 0.025;
--sf-text--tracking-wider 0.05;
--sf-text--tracking-widest 0.1;

Изменить статью