Правила отзывчивой веб-типографии

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

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

Эта статья направлена ​​на предоставление как дизайнеров, так и разработчиков, от которого можно начать общение на тему типографии. Мы рассмотрим необходимые принципы проектирования и изучаем практические решения для отзывчивая типография Отказ

Что такое хорошая типография?

«Хорошо» всегда субъективен; Это не фиксированный якорь, на котором мы можем навеять связь. Для дизайнеров и разработчиков эффективно общаться, мы должны начать с того, что общий знаменатель может понять обе стороны. Этот знаменатель - цель типографии.

Типография - это появление текста; Мы одеваемся в текст. Целью одевания является создание этого пользователя достаточно привлекательным, чтобы привлечь разговор, но не уделять особое внимание, что другая сторона отвлекается от разговора.

Аналогичным образом, цель типографии - это позволить читателям фокусироваться и погружать себя в содержание текста. Хорошая типография, по определению, типография, которая помогает тексту выполнить свою цель общения.

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

• Семейство шрифтов
• Размер шрифта
• Высота линии (также называемая ведущими)
• Ширина текста (также называемая текстовой мерой)

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

Искусство читаемого текста

Первый шаг в любом проекте - установить размер шрифта , высота линии и ширина вашего текста тела. Этот процесс называется наборным. Начните с помощью набора на наборах со страницей, которая содержит информацию о потребностях пользователей. Насколько это возможно, эта страница должна содержать несколько элементов, таких как H1, H2, H3, текст тела и подписи, для которых вы должны сделать сознательный выбор относительно того, что работает для вашего дизайна. Чем больше элементов вашей страницы содержит, тем лучше ваши шансы на установку типовой схемы, которая работает через доску.

Когда вы выбираете размер шрифта , высота линии И измерить для вашего текста тела, убедитесь, что вы используете реальный контент. Если у вас нет фактического контента, используйте текст из Wikipedia вместо LOREM IPSUM.

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

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

Установка правых размеров сложнее объяснить в письменном виде, поэтому я сделал несколько видео, чтобы помочь вам с размер шрифта , мера и ведущий Отказ

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

Ваш шрифт слишком маленький, если:

• Вы должны сосредоточиться, чтобы прочитать текст
• Вы должны врисовать твои глаза
• У вас есть желание увеличить

Ваш шрифт слишком большой, если:

• Вы начинаете носить заметные буквы вместо того, чтобы читать контент
• Вы можете прочитать только один-три слова одновременно
• У вас есть желание уменьшить масштабирование

Ваш текстовый мерой слишком длинный, если:

• Вы должны повернуть голову, чтобы прочитать текст
• Вы теряете концентрацию на полпути через

Ваша текстовая мера слишком коротка, если:

• Вы чувствуете раздражение, когда текст ломается к следующей строке
• Ваши глаза устают от подпрыгивания слева и вправо быстро

Ваш ведущий слишком узкий, если:

• Текст чувствует себя плотным и подавляющим
• Вы читаете неправильную линию текста случайно

Ваш ведущий слишком большой, если:

• Вы отвлекаетесь от белого пространства между рядами слов

Всегда помните определение хорошей типографии: вы не после совершенства, вы просто стреляете в текст, который легко читать. При этом вы захотите проверить вашу наборных вариантов со своей аудиторией (друзьями и коллегами делают отличные тестеры), чтобы убедиться, что вы правы. Перейдите только к установке размеров других элементов, когда вы закончите набирать текст тела.

Набор других элементов

Многие дизайнеры и разработчики выбрали размер шрифта Для элементов, таких как H1 и H2 визуально, и просто надеясь, что эти волшебные числа хорошо работают в их дизайне. Но нет необходимости просто тянуть числа из тонкого воздуха; Типографы использовали типографические весы на протяжении веков, чтобы помочь с этим. То, что вы делаете, это выбрать ряд из масштабирования типографии как размер вашего элемента. К сожалению, эти масштабы не могут быть напрямую использоваться для веб-сайта, потому что они построены для дизайна печати.

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

Чтобы создать модульную шкалу, вы берете текст тела размер шрифта (Также называется базовый размер шрифта) и умножить его соотношением много раз, пока не получите масштаб. Зачастую отношение, которое вы используете, получен из музыки (поскольку музыка имеет корни в гармонии). Выше приведен пример масштаба, создаваемого с помощью Модульный калькулятор масштаба Отказ

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

Вертикальный ритм

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

Сколько белого пространства вы должны использовать? Многие дизайнеры выбирают фигуру, такую ​​как 10px, это легко для их дизайна. Многие разработчики, с другой стороны, имеют тенденцию вытекать случайное число (например, 6PX) из другой системы сетки, либо статьи, которую они читали в Интернете. Неудивительно, что эти два не могут общаться.

Как вы можете себе представить, нет необходимости полагаться на волшебный номер для белого пространства; Мы можем использовать несколько высота линии Ценность нашего текста тела. Это потому, что мы инстинктивно распознаем узоры белого пространства в тексте. Чем сильнее шаблон, безопаснее, которое мы чувствуем, а тем легче выпустить наши умы поступать в контент.

Использовать вертикальный ритм, все, что вы делаете:

1. Установите белое пространство между элементами на множестве основания высота линии
2. Установить высота линии всех других элементов к кратнему базу высота линии

Множественное сваемое не должно быть целым числом. Вы можете использовать значения, такие как 0,5x и 1.25X базы высота линии предоставить вам больше гибкости. Эти значения работают, потому что вертикальный ритм использует принцип повторения.

Базовая сетка или нет?

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

Честно говоря, вы никогда не получите базовые сетки, чтобы отлично работать в Интернете, потому что математика в типографии всегда содержит субпиксели (например, 24,8px), и все браузеры образуют подсиклирование по-разному. Например, некоторые браузеры вызывают каждый элемент на странице, чтобы быть выключенным на 1PX. Эти ошибки 1PX накапливаются и нажимают любые элементы, размещенные вниз по нижнему странице, еще дальше от сетки. В результате я рекомендую к использованию базовой сетки.

Двигаясь, давайте вступим в царство отзывчивых практик и проектирование для нескольких экранов.

Типография для нескольких экранов

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

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

Во-вторых, мы хотим сохранить пропорции между текстом тела и другими элементами. Это означает, что мы должны увеличить размеры всех элементов, когда мы увеличиваем размер текста тела.

В-третьих, в определенных точках останова, мы хотим увеличить размер шрифта конкретных элементов (как H1), выбирая другой номер из модульной шкалы. Это позволяет нам контролировать визуальную иерархию и гарантирует, что элементы Garner достаточно настолько внимания, чтобы потянуть пользователь на чтение.

Кодирование для отзывчивой типографии

Мы знаем, что нам нужно увеличить наш текст размеры пропорционально. Самый простой способ сделать это - увеличить размер шрифта внутри HTML селектор. Мы также хотим использовать относительные единицы для уважения пользователя размер шрифта предпочтение

 HTML {размер шрифта: 100%;}
@media (мин-ширина: 40ЕМ) {
 HTML {размер шрифта: 112,5%;}
} 

Мы также хотим использовать относительную единицу для других элементов, поэтому они масштабируются в соответствии с HTML размер шрифта ( H2. в примере ниже). Если вам нужно изменить размер шрифта к другому количеству в модульной шкале, все, что вы делаете, это изменить размер шрифта соответственно ( H1. ниже).

 H1 {FONT-SIZE: 2.369EM;}
@media (мин-ширина: 40ЕМ) {
 HTML {размер шрифта: 3.147EM;}
}

H2 {размер шрифта: 1,777ЕМ;} 

Хотя процесс выглядит простым, новые разработчики могут столкнуться с тонкой головной боли из-за участия по математике, поэтому я рекомендую использовать функции и смешины, чтобы помочь. Я часто использую РС() от Библиотека модульной массы Отказ С этим вы можете написать MS (4) вместо 3.157em. и MS (3) вместо 2.369em. Отказ

Пример функции, которая может облегчить нагрузку на вычисление вертикального ритма: