Striped

Магия CSS. Глава 5. Типографика

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

Во-первых, мысленно похлопайте себя по спине. Вы уже далеко продвинулись. Вы читаете про типографику!

Видеть

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

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

Основной ваш инструментарий состоит из следующих правил:

Примеры

Пример 1: Светлый, заглавный с пространством

Светлый цвет текста на темном фоне кажется более тяжелым, чем есть на самом деле. Поэтому в этом примере с белым текстом на фиолетовом фоне мы зададим свойство font-weight: 300.

.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: Контраст веса и стиля

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

.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

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

Внеклассное чтение

Цитирование

  1. Butterick’s Practical Typography

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC