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-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.