Striped

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

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

Workafrolic (±∞)
4 min readJun 25, 2016

--

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

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

Найдите минутку и просто пройдитесь по некоторым прекрасным примерам дизайна, основанным на типографике:

Видеть

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

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

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

  • Свойства шрифта
  • Свойства текста
  • Разное

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

Примеры

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

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

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

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

Пример 2: Контраст веса и стиля

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

Первая строка получает свойства из примера 1, но мы увеличим вес до 700. Для сравнения вторую линию мы делаем более легкой, 300, с font-style: italic и с более светлым цветом #888.

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

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

Типографика везде

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

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

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

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

Цитирование

  1. Butterick’s Practical Typography

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

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

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

--

--

Workafrolic (±∞)
Workafrolic (±∞)

Written by Workafrolic (±∞)

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