Striped

Магия 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

Цитирование

1. Butterick’s Practical Typography

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!