Типографика

Типографика сложна

Для начала позвольте похлопать вас по спине. Вы зашли настолько далеко и читаете о типографике!

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

Найдите минутку и просто пролистайте некоторые из этих красивых дизайнерских коллекций основанных на типографике:

Видение

Как и с цветом, для хорошего дизайна с типографикой потребуется использовать ваши глаза. Действительно увидеть форму каждого символа. Обратить внимание на негативное пространство между символами. У вас больше контроля над такими вещами, чем вы могли бы подумать. И пройдя через несколько разделов я собираюсь показать вам это.

Основные инструменты типографики в CSS

Наш набор основных инструментов состоит из следующего:

Свойства шрифта:

Свойства текста:

Разное:

Теперь у вас есть общее представление о том, что возможно, давайте взглянем на несколько комбинаций этих свойств.

Примеры

Пример 1: Тонкие буквы, прописные, с интервалом

Тонкий цветной текст на тёмном фоне, как правило, воспринимается так, будто он более насыщенный. В этом примере белый на багровом, мы пошли на font-weight: 300.

Использование всех букв в верхнем регистре может оказать сильное воздействие, так что применяйте это редко. Одна вещь может произойти со словами в верхнем регистре — БУКВЫ БУДУТ ВОСПРИНИМАТЬСЯ ЗАЖАТЫМИ. Это потому, что кернинг по умолчанию и letter-spacing предназначены, в основном, для слов в нижнем регистре. Чтобы компенсировать это и добавить чуть больше серьёзности, мы щедро включили letter-spacing: .4em.

Свойства letter-spacing и text-align плохо сочетаются вместе, потому что пустой промежуток добавляется справа к каждой букве. Чтобы компенсировать это, когда указанные свойства используются совместно, мы добавим padding-left со значением, соответствующим letter-spacing (в нашем случае .4em).

.typography-example-1 {
  background-image: linear-gradient(135deg, #723362, #9d223c);
  background-color: #9d223c;
  color: #fff;
  padding: 1em 0;
  font-weight: 300;
  font-size: 1.8em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .4em;
  padding-left: .4em
}

Пример 2: Контрастная насыщенность и стили

В следующем примере мы покажем, как две строки текста взаимодействуют друг с другом.

Первая строка получает похожую трактовку из примера 1, но с насыщенностью 700. Для контраста второй строке даётся насыщенность 300, курсив и светлый цвет #888.

.typography-example-2 {
  background: #fff;
  color: #000;
  border: .5em solid;
  font-size: 1.5em;
  padding: 1em 0;
  text-align: center
}

.typography-example-2 .title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
  padding-left: .4em
}

.typography-example-2 .author {
  color: #888;
  font-size: .7em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .12em;
  padding-left: .12em
}

Пример 3. Настройка отдельных букв

Иногда хочется немного развлечься с текстом. Для этого есть Lettering.js — классный небольшой инструмент. Но если вы готовы самостоятельно обернуть каждую букву в <span>, вы сможете делать подобные вещи без применения JavaScript!

.typography-example-3 {
  border: .2em solid #ff4136;
  font-size: 3em;
  text-align: center;
  padding: .2em;
  color: #fff
}
  
.typography-example-3 span {
  display: inline-block;
  width: 20%;
  padding: .8125rem
}

.typography-example-3 span:nth-child(1) { background: #ff4136 }
.typography-example-3 span:nth-child(2) { background: #ff851b }
.typography-example-3 span:nth-child(3) { background: #2ecc40 }
.typography-example-3 span:nth-child(4) { background: #0074d9 }
.typography-example-3 span:nth-child(5) { background: #b10dc9 }

Типографика повсюду

Надеемся, что эти несколько примеров дали вам представление о том, что возможно с различными свойствами CSS. Типографика — это такая же важная часть дизайна, поэтому множество размышлений и понятий связанных с типографикой вложено в других разделах. Мы будем продолжать исследовать типографику по мере прохождения.

Практическая типографика

Для получения большего удовольствия от типографики посмотрите удивительные ресурсы приведённые ниже. В частности, взгляните на Butterick’s Practical Typography. Это обязательно к прочтению всем, кто интересуется типографикой.

Дальнейшее чтение

Автор и редакторы

Автор: Адам Шварц
Последнее изменение: 06.07.2015
Редакторы: Клим Щербаков
Цвет
Ctrl+
Курс по вёрстке сайта на CSS Grid