() translation by (you can also view the original English article)
Типографика пожалуй самый важная часть любого веб-дизайна. Огромный заголовок на пустой белой странице может выглядеть, как мечта минималиста, но что случится когда мы начнём открывать наш веб-сайт на устройствах с небольшим экраном?
Аррррр!!! Всё ломается и выглядит ужасно.
Вот почему нам нужна адаптивная типографика. Нам нужна типографика, которая будет адаптироваться согласно брейкпоинтам. Но никто не хочет возиться со сбросом основных размеров шрифтов для каждого типографического элемента на странице.
К счастью мы можем изменить размер html селектора тем самым все его потомки наследуют релевантный, меньший размер.
К прмеру
Давайте начнём с простого примера разметки:
1 |
<h1>Header 1</h1> |
2 |
<h2>Header 2</h2> |
3 |
<h3>Header 3</h3> |
4 |
<h4>Header 4</h4> |
5 |
<h5>Header 5</h5> |
6 |
<h6>Header 6</h6> |
7 |
|
8 |
<p>
|
9 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. |
10 |
</p>
|
11 |
|
12 |
<ul>
|
13 |
<li>List Item 1</li> |
14 |
<li>List Item 2</li> |
15 |
<li>List Item 3</li> |
16 |
</ul>
|
17 |
|
18 |
<ol>
|
19 |
<li>List Item 1</li> |
20 |
<li>List Item 2</li> |
21 |
<li>List Item 3</li> |
22 |
</ol>
|
Немного пододвинем границы с боков нашему сайту добавив padding html селектору, далее мы уберём margin-top для наших типографических элементов, так как выглядит это довольно плохо, когда заголовок h1 имеет отступ от изображения, размером в несколько пикселей, в то время когда он должен находится рядом. Всё остальное пока что будет обладать стилями по умолчанию браузера.
Я использую Stylus, так как вы возможно знаете я фанат Stylus, ниже можно увидеть, как выглядит синтаксис:
1 |
html
|
2 |
padding: 2rem |
3 |
|
4 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
5 |
margin-top: 0 |
Неплохое начало, большой текст со светлым шрифтом на сегодняшний день в тренде, давайте добавим это. Помимо этого мы добавим line-height, чтобы наши параграфы выглядели хорошо.
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
|
7 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
8 |
margin-top: 0 |
Фикс linek-height
Но теперь наши элементы имеют огромный margin-bottom и наши заголовки обладают огромным line-height. К счастью это довольно быстро изменить:
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
|
7 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
8 |
margin-top: 0 |
9 |
margin-bottom: 1rem |
10 |
|
11 |
h1, h2, h3, h4, h5, h6 |
12 |
margin-bottom: .5rem |
13 |
line-height: 1.1 |
Вот так! Наша типографика для ленивых закончена. Мы пропустили несколько типографических элементов (blockquotes, списки определений и так далее), добавьте их в том случае если они вам понадобятся.
Проблемы маленькой области просмотра
Давайте посмотрим что случится когда мы изменим область просмотра. Наша типографика выглядит ужасно. Её сложно читать и пользователю потребуется скролить несколько раз, чтобы прочитать параграф.
Давайте исправим это добавив медиа запросы и изменим font-size нашего html селектора согласно брейкпоинтам:
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
@media (max-width: 900px) |
7 |
font-size: 20px |
8 |
@media (max-width: 500px) |
9 |
font-size: 14px |
10 |
|
11 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
12 |
margin-top: 0 |
13 |
margin-bottom: 1rem |
14 |
|
15 |
h1, h2, h3, h4, h5, h6 |
16 |
margin-bottom: .5rem |
17 |
line-height: 1.1 |
Вуаля!
Теперь у нас есть адаптивная типографика, которую мы получили за пять минут. Размер всех типографических элементов зависит от html элемента, тем самым уменьшив font-size html для небольших экранов, мы уменьшим пропорционально размеры шрифтов остальных элементов.
Полноэкранная демонстрация на CodePen.
К дальнейшему чтению
Если вас действительно интересует тематика адаптивной типографики, вы хотите узнать больше деталей о данном шаблоне, я рекомендую Современный подход к веб-типографике от Jason Pamental.
