Типография

С помощью адаптивного модификатора .t вы можете менять оформление текста для различных видов устройств.

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

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

Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Размер. Обязательный параметр. Указывает размер шрифта. Принимает значение от -3 до 7:
- -3 – 0.65 х базовый размер шрифта
- -2 – 0.75 х базовый размер шрифта
- -1 – 0.85 х базовый размер шрифта
- 0 – 1 х базовый размер шрифта
- 1 – 1.25 х базовый размер шрифта
- 2 – 1.5 х базовый размер шрифта
- 3 – 2 х базовый размер шрифта
- 4 – 2.5 х базовый размер шрифта
- 5 – 3 х базовый размер шрифта
- 6 – 4 х базовый размер шрифта
- 7 – 6 х базовый размер шрифта

Text font size -3

Text font size -2

Text font size -1

Text font size 0 (default)

Text font size 1

Text font size 2

Text font size 3

Text font size 4

Text font size 5

Text font size 6

Text font size 7

<p class="t--3">Text font size -3</p>
<p class="t--2">Text font size -2</p>	
<p class="t--1">Text font size -1</p>
<p class="t-0">Text font size 0 (default)</p>
<p class="t-1">Text font size 1</p>
<p class="t-2">Text font size 2</p>
<p class="t-3">Text font size 3</p>
<p class="t-4">Text font size 4</p>
<p class="t-5">Text font size 5</p>
<p class="t-6">Text font size 6</p>
<p class="t-7">Text font size 7</p>

Адаптивный размер шрифта

Вы можете использовать параметры контрольных точек для измеения размера шрифта при различных разрешениях. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов размера шрифта текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font size -3 (<md)

Text font size -2 (<md)

Text font size -1 (<md)

Text font size 0 (default) (<md)

Text font size 1 (<md)

Text font size 2 (<md)

Text font size 3 (<md)

Text font size 4 (<md)

Text font size 5 (<md)

Text font size 6 (<md)

Text font size 7 (<md)

<p class="t--3 t-md-0">Text font size -3</p>
<p class="t--2 t-md-0">Text font size -2</p>	
<p class="t--1 t-md-0">Text font size -1</p>
<p class="t-0 t-md-0">Text font size 0 (default)</p>
<p class="t-1 t-md-0">Text font size 1</p>
<p class="t-2 t-md-0">Text font size 2</p>
<p class="t-3 t-md-0">Text font size 3</p>
<p class="t-4 t-md-0">Text font size 4</p>
<p class="t-5 t-md-0">Text font size 5</p>
<p class="t-6 t-md-0">Text font size 6</p>
<p class="t-7 t-md-0">Text font size 7</p>

Толщина шрифта

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

Контрольная точка. Необязательный параметр. Изменяет толщину шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Толщина. Обязательный параметр. Указывает толщину шрифта. Принимает значения:
- light – толщина шрифта 300
- regular – нормальная толщина шрифта
- medium – толщина шрифта 500
- bold – толщина шрифта жирная

Text font weight light

Text font weight regular

Text font weight medium

Text font weight bold

<p class="t-light">Text font weight light</p>
<p class="t-regular">Text font weight regular</p>	
<p class="t-medium">Text font weight medium</p>
<p class="t-bold">Text font weight bold</p>

Адаптивная толщина шрифта

Вы можете использовать параметры контрольных точек для измеения толщины шрифта при различных разрешениях. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов толщины шрифта подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font weight light (<md)

Text font weight regular (<md)

Text font weight medium (<md)

Text font weight bold (<md)

<p class="t-light t-md-regular">Text font weight light</p>
<p class="t-regular t-md-regular">Text font weight regular</p>
<p class="t-medium t-md-regular">Text font weight medium</p>
<p class="t-bold t-md-regular">Text font weight bold</p>

Стиль шрифта

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

Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Стиль. Обязательный параметр. Указывает стиль шрифта. Принимает значения:
- normal – нормальный шрифт
- italic – курсивный шрифт

Text font style normal

Text font style italic

<p class="t-normal">Text font style normal</p>
<p class="t-italic">Text font style italic</p>

Адаптивный стиль шрифта

Вы можете использовать параметры контрольных точек для измеения стиля шрифта при различных разрешениях. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов стиля подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font style italic (<md)

<p class="t-italic t-md-normal">Text font style italic</p>

Выравнивание текста

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

Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Выравнивание. Обязательный параметр. Указывает выравнивание текста. Принимает значения:
- left – выравнивание по левому краю
- right – выравнивание по правому краю
- center – выравнивание по центру
- justufy – выравнивание по ширине

Text align left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align right

Text align center

Text align justufy

<p class="t-left">Text align left</p>
<p class="t-right">Text align right</p>	
<p class="t-center">Text align center</p>
<p class="t-justufy">Text align justufy</p>

Адаптивное выравнивание текста

Вы можете использовать параметры контрольных точек для измеения параметра выравнивания текста. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов выравнивания текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text align right (<md)

Text align center (<md)

Text align justufy (<md)

<p class="t-right t-md-left">Text align right</p>	
<p class="t-center t-md-left">Text align center</p>
<p class="t-justufy t-md-left">Text align justufy</p>

Длина строки текста

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

Контрольная точка. Необязательный параметр. Изменяет размер строки текста только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Размер. Обязательный параметр. Определяет длину строки текста. Принимает значения:
- measure – длина строки ~66 символов
- measure-narrow – длина строки ~45 символов
- measure-wide – длина строки ~80 символов

Text measure

Text measure-narrow

Text measure-wide

<p class="t-measure">Text measure</p>
<p class="t-measure-narrow">Text measure-narrow</p>
<p class="t-measure-wide">Text measure-wide</p>

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

Вы можете использовать параметры контрольных точек для измеения параметра длины строки текста. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов длины строки текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text measure-narrow (<md)

Text measure-wide (<md)

<p class="t-measure-narrow t-md-measure">Text measure-narrow (<md)</p>	
<p class="t-measure-wide t-md-measure">Text measure-wide (<md)</p>

Утилиты