Размер текста
В 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 |