Размер текста

В SIMAI Framework предлагает для работы 16 адаптивных размеров текста и высоты строки.

Размер шрифта

Базовый размер шрифта обозначается значением 1 и равен размеру текста заданному по умолчанию в <html> - 1rem.

Увеличение размера текста (высоты строки) относительно базового значения обозначается целым числом, от 2 до 13

Уменьшение размера текста (высоты строки) обозначается обыкновенной дробью с числителем один: 1/2, 1/3, 1/4.

Размеры представляют собой адаптивные переменные которые меняют свои значения в зависимости от типа устройств. Для мобильных устройств размер текста уменьшается пропорционально размеру текста.

Мобильные устройства Десктоп
CSS переменная Размер Значение Размер Значение
--sf-text--size-1/4 border-1 0.625rem border-1 0.625rem
--sf-text--size-1/3 b-2 0.75rem b-2 0.75rem
--sf-text--size-1/2 b-3 0.875rem b-3 0.875rem
--sf-text--size-1 b-4 1rem b-4 1rem
--sf-text--size-2 b-5 1.125rem b-6 1.25rem
--sf-text--size-3 b-6 1.25rem b-8 1.5rem
--sf-text--size-4 b-7 1.375rem c-1 1.75rem
--sf-text--size-5 b-8 1.5rem c-2 2rem
--sf-text--size-6 b-9 1.625rem c-3 2.25rem
--sf-text--size-7 c-1 1.75rem c-4 2.5rem
--sf-text--size-8 c-2 2rem c-6 3rem
--sf-text--size-9 c-3 2.25rem c-8 3.5rem
--sf-text--size-10 c-4 2.5rem d-1 4rem
--sf-text--size-11 c-5 2.75rem d-2 4.5rem
--sf-text--size-12 c-6 3rem d-5 6rem
--sf-text--size-13 c-7 3.25rem d-9 8rem

Высота строки

Высота строки подбирается для каждого размера шрифта исходя из его размера и минимального шага.

Для базового размера шрифта комфортной является высота строки равная 1.5 от размера шрифта. При увеличении и уменьшении размера шрифта от базвого, высота строки уменьшается.

Минимальный размер шага для высоты текста составляет 0.25rem, поэтому высота текста побирается как ближайшая из системы размеров.

Мобильные устройства Десктоп
CSS переменная Размер Значение Размер Значение
--sf-text--height-1/4 b-2 0.75rem b-2 0.75rem
--sf-text--height-1/3 b-4 1rem b-4 1rem
--sf-text--height-1/2 b-6 1.25rem b-6 1.25rem
--sf-text--height-1 b-8 1.5rem b-8 1.5rem
--sf-text--height-2 c-1 1.75rem c-1 1.75rem
--sf-text--height-3 c-1 1.75rem c-2 2rem
--sf-text--height-4 c-2 2rem c-3 2.25rem
--sf-text--height-5 c-2 2rem c-4 2.5rem
--sf-text--height-6 c-2 2rem c-4 2.5rem
--sf-text--height-7 c-3 2.25rem c-5 2.75rem
--sf-text--height-8 c-4 2.5rem c-6 3rem
--sf-text--height-9 c-4 2.5rem c-8 3.5rem
--sf-text--height-10 c-5 2.75rem d-1 4rem
--sf-text--height-11 c-6 3rem d-2 4.5rem
--sf-text--height-12 c-6 3rem d-5 6rem
--sf-text--height-13 c-7 3.25rem d-9 8rem

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