Магия CSS. Глава 5. Типографика
Типографика — это сложно
Во-первых, мысленно похлопайте себя по спине. Вы уже далеко продвинулись. Вы читаете про типографику!
Теперь остановитесь на мгновение и осознайте, что большая часть вещей, на которые вы смотрите каждый день — это текст. Так что прежде чем обсуждать типографику, просто посмотрим на нее.
Найдите минутку и просто пройдитесь по некоторым прекрасным примерам дизайна, основанным на типографике:
- Awwwards: Typography in Web Design
- Tutsplus: 10 Examples of Inspirational Typography on the Web
- Web Design Ledger: 21 Beautiful Examples of Typography in Web Design
- Smashing Magazine: A Journey Through Beautiful Typography In Web Design
- Web3Canvas: 20 beautifully designed Typography Website Inspiration 2013
Видеть
Как и в ситуации с цветом, чтобы создать хороший дизайн на основе типографики, нужно использовать собственные глаза. Действительно видеть форму каждого глифа. Подмечать отрицательное пространство между глифами. Вы можете контролировать это в большей степени, чем вы думаете. И на протяжении следующих глав я планирую показать вам, как это сделать.
Основные типографские инструменты в CSS
Основной ваш инструментарий состоит из следующих правил:
- Свойства шрифта
- Свойства текста
- Разное
Теперь, когда у вас есть общее представление о том, чем можно управлять, давайте рассмотрим несколько комбинаций свойств.
Примеры
Пример 1: Светлый, заглавный с пространством
Светлый цвет текста на темном фоне кажется более тяжелым, чем есть на самом деле. Поэтому в этом примере с белым текстом на фиолетовом фоне мы зададим свойство font-weight: 300.
Используя все заглавные буквы, вы можете добиться мощного эффекта, но вы должны пользоваться этим приемом осторожно. Одна из проблем с этим приемом — БУКВЫ МОГУТ ЧУВСТВОВАТЬ СЕБЯ ЗАЖАТЫМИ. Это происходит потому, что по умолчанию кернинг и расстояние между буквами заточены на слова в нижнем регистре. Чтобы компенсировать этот недостаток, а также добавить больше многозначительности, мы добавим щедрый 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, с font-style: italic и с более светлым цветом #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
Чтобы получить больше удовольствия, загляните в Butterick’s Practical Typography. Это обязательная к прочтению книга для тех, кто заинтересован в типографике.
Внеклассное чтение
- Butterick’s Practical Typography
- CSS Typography Cheat Sheet
- Type Scale
- Codedrops: Make a Statement with Type
Цитирование
P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!