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

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

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

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

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

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

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

Мобильные устройства

CSS переменная Размер Значение, rem Значение, px
--sf-text--size-1/4 b0 0.625rem 10px
--sf-text--size-1/3 b2 0.75rem 12px
--sf-text--size-1/2 b4 0.875rem 14px
--sf-text--size-1 b6 1rem 16px
--sf-text--size-2 b8 1.125rem 18px
--sf-text--size-3 c0 1.25rem 20px
--sf-text--size-4 c1 1.375rem 22px
--sf-text--size-5 c2 1.5rem 24px
--sf-text--size-6 c3 1.625rem 26px
--sf-text--size-7 c4 1.75rem 28px
--sf-text--size-8 c6 2rem 32px
--sf-text--size-9 c8 2.25rem 36px
--sf-text--size-10 d0 2.5rem 40px
--sf-text--size-11 d1 2.75rem 44px
--sf-text--size-12 d2 3rem 48px
--sf-text--size-13 d3 3.25rem 52px

Десктоп

CSS переменная Размер Значение, rem Значение, px
--sf-text--size-1/4 b0 0.625rem 10px
--sf-text--size-1/3 b2 0.75rem 12px
--sf-text--size-1/2 b4 0.875rem 14px
--sf-text--size-1 b6 1rem 16px
--sf-text--size-2 c0 1.25rem 20px
--sf-text--size-3 c2 1.5rem 24px
--sf-text--size-4 c4 1.75rem 28px
--sf-text--size-5 c6 2rem 32px
--sf-text--size-6 c8 2.25rem 36px
--sf-text--size-7 d0 2.5rem 40px
--sf-text--size-8 d2 3rem 48px
--sf-text--size-9 d4 3.5rem 56px
--sf-text--size-10 d6 4rem 64px
--sf-text--size-11 d8 4.5rem 72px
--sf-text--size-12 e2 6rem 96px
--sf-text--size-13 e6 8rem 128px

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

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

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

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

Мобильные устройства

CSS переменная Размер Значение, rem Значение, px
--sf-text--height-1/4 b2 0.75rem 12px
--sf-text--height-1/3 b6 1rem 16px
--sf-text--height-1/2 c0 1.25rem 20px
--sf-text--height-1 c2 1.5rem 24px
--sf-text--height-2 c4 1.75rem 28px
--sf-text--height-3 c4 1.75rem 28px
--sf-text--height-4 c6 2rem 32px
--sf-text--height-5 c6 2rem 32px
--sf-text--height-6 c6 2rem 32px
--sf-text--height-7 c8 2.25rem 36px
--sf-text--height-8 d0 2.5rem 40px
--sf-text--height-9 d0 2.5rem 40px
--sf-text--height-10 d1 2.75rem 44px
--sf-text--height-11 d2 3rem 48px
--sf-text--height-12 d2 3rem 48px
--sf-text--height-13 d3 3.25rem 52px

Десктоп

CSS переменная Размер Значение, rem Значение, px
--sf-text--height-1/4 b2 0.75rem 12px
--sf-text--height-1/3 b6 1rem 16px
--sf-text--height-1/2 c0 1.25rem 20px
--sf-text--height-1 c2 1.5rem 24px
--sf-text--height-2 c4 1.75rem 28px
--sf-text--height-3 c6 2rem 32px
--sf-text--height-4 c8 2.25rem 36px
--sf-text--height-5 d0 2.5rem 40px
--sf-text--height-6 d0 2.5rem 40px
--sf-text--height-7 d1 2.75rem 44px
--sf-text--height-8 d2 3rem 48px
--sf-text--height-9 d4 3.5rem 56px
--sf-text--height-10 d6 4rem 64px
--sf-text--height-11 d8 4.5rem 72px
--sf-text--height-12 e2 6rem 96px
--sf-text--height-13 e6 8rem 128px

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