Михаил Юдин

Адаптивная веб типографика для разработчиков

Адаптивная веб типографика для разработчиков

Пример простой, но работающей адаптивной типографики. Не нужно знать много о типографике чтобы сверстать удобочитаемый текст.

Веб-типографика — как я до такого докатился

Сколько ни верстал макет страницы записи блога, всё получалась какая-то каша: списки зажаты, заголовки неразличимы, текст читать не хотелось. И тут решил серьёзно задаться вопросом: как создать простую адаптивную типографику для своего сайта.

Прошерстил некоторое количество ресурсов на тему веб-типорафики, в основном писалось про то, чего стоит придерживаться. Хотелось конкретики.

И вот наткнулся на несколько материалов для разработчиков, не дизайнеров. Были конкретные цифры, ссылки на инструменты.

Краткая выжимка о том, как сверстать красивую типографику:

  • используем минимальное количество шрифтов (1-2)
  • заголовки должны контрастировать с текстом (капс, жирность, цвет, гарнитура шрифта)
  • отступы у всех текстов должны быть больше высоты строки
  • размеры заголовков должны подчиняться одному коэффициенту (см. The rules of responsive web typography, Инструмент для подбора)
  • для мобилки используется стандартный размер шрифта, на десктопе немного больше
  • длина строки текста 60 символов (плюс/минус)
  • высота строки 1.6 (плюс/минус)

Рецепт создания адаптивной веб-типографики

  • указываем для десктопа размер шрифта 112.5% (это 18px из стандартных 16px)
  • определяем размер шрифта тела документа и высоту строки (все элементы кроме заголовков)
  • заходим в инструмент для подбора коэффициента для размеров заголовков
  • выбираем понравившийся коэффициент
  • находим размер в 1em, берём значение больше для заголовка последнего уровня (в примере это h5)
  • проставляем остальные размеры заголовков поднимаясь выше
  • проставляем отступы (margin сверху и снизу) у текстовых элементов по вкусу
html {
  font-size: 100%;
}

@media (min-width: 40em) {
  html {
    font-size: 112.5%;
  }
}

body {
  font: 1em/1.6 sans-serif;
}

ul {
  padding: 0 0 0 0.75em;
}

p,
ul,
ol,
table,
small,
hr {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  max-width: 66ch;
}

li {
  margin-bottom: 0.75em;
}

small {
  display: inline-block;
  font-size: 80%;
  line-height: 1.25em;
  color: #666;
}

hr {
  border: none;
  background-color: #e0e0e0;
  height: 1px;
  margin-left: 0;
  margin-right: 0;
}

h1,
h2,
h3,
h4,
h5,
header {
  margin: 1.25em 0 0.25em;
  line-height: 1.2;
  max-width: 60ch;
}

header > h1 {
  margin-top: 0;
}

h1 {
  font-size: 2.074em;
}
  
h2 {
  font-size: 1.728em;
}
  
h3 {
  font-size: 1.44em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}

Итого у нас получилась адаптивная веб-типографика, которая будет хорошо смотреться как на мобилке, так и на десктопе.

Обновляемую версию смотрите на https://github.com/fagci/minimalistic-site-snippets/blob/main/css/typography.css


Поблагодарить через СберБанк:

4274320107381801


Остались вопросы или есть пожелания, замечания — пишите в комментарии: