обработка данных

Нажмите сюда, если долго загружается,
либо "ESC" - отмена
 
Заказ обратного звонка
Заказать звонок
Наш специалист свяжется с Вами и ответит на все вопросы
Обработка данных
Наш специалист свяжется с Вами и ответит на все вопросы.
OK

Правила создания отзывчивой веб-типографики

Источник: https://rusability.ru
Время чтения: ~7 мин
Правила создания отзывчивой веб-типографики
Статьи
711
Изображения носит иллюстрационный характер. Источник: rusability.ru
Создавать отзывчивую веб-типографику довольно сложно: нужно иметь как дизайнерские, так и технические навыки. Но несмотря на это права на ошибку нет, ведь типографика – основа веб-дизайна.

Но как справиться с этой непростой задачей?

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

В сегодняшней статье мы рассмотрим основы создания отзывчивой типографики и рассмотрим практические решения организации коммуникации при ее разработке.
1. Какую типографику можно считать хорошей?
"Хороший" – это всегда субъективное понятие, на нем нельзя строить коммуникацию. Чтобы дизайнеры и разработчики смогли общаться эффективно, нужно говорить известными обеим сторонам определениями.

Типографика – это внешний вид текста, его дизайн. Ее цель – привлечь внимание, но не отвлечь его от содержания. Хорошая типографика должна помогать тексту реализовать его основную задачу – коммуникацию.

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

Чтобы типографика была хорошей, необходимо правильно подобрать:

1. Семейство шрифтов;
2. Размер шрифтов;
3. Высоту строки;
4. Ширину текста;

Первый критерий отвечает за эмоции, которые вызывает типографика, три оставшиеся – за читабельность текста. Так как с первой задачей дизайнеры, зачастую, справляются на отлично, мы подробнее остановимся на трех последних пунктах.
Правила создания отзывчивой веб-типографики
Источник: rusability.ru
2. Искусство создания читабельного текста
Первый шаг в начале любого проекта – выбор размер шрифта, высоты строки и ширины текста. Этот процесс называется тайпсеттинг. Выбрать для этого лучше страницу, содержащую важную информацию и разнообразные элементы: заголовки h1, h2, h3, описания изображений, основной текст.

Устанавливать параметры желательно на реальном тексте, а не на Lorem Ipsum. Если у вас нет контента, используйте любой текст из интернета.

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

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

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

- Вам нужно концентрироваться, чтобы прочитать текст;
- Вам приходится прищуриваться;
- Вы вынуждены увеличивать масштаб страницы.

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

- Вы обращаете на шрифт больше внимания, чем на текст;
- Вы можете читать только одно-три слова за раз;
- Вы вынуждены уменьшать масштаб страницы.

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

- Вам приходится вертеть головой, чтобы прочитать текст;
- Вы часто теряете концентрацию на середине строки.Ваши строки слишком короткие, если:

- Вас раздражает, когда строка заканчивается;
- Ваши глаза быстро устают.

Пространство между вашими строками слишком узкое, если:

- Текст кажется нагроможденным;
- Вы нечаянно начинаете читать не ту строчку.

Пространство между вашими строками слишком широкое, если:

- Вы сбиваетесь при чтении текста.

Всегда помните основное правило хорошей типографики – текст должен легко читаться. Обязательно попросите вашу аудиторию протестировать тайпсеттинг (друзья и коллеги тоже подойдут), чтобы убедиться в правильности выбора.
3. Тайпсеттинг других элементов
Многие дизайнеры и разработчики подбирают размер шрифта для заголовков h1 и h2 наугад. Но в типографике есть проверенная временем шкала, которая поможет вам в этом.
Правила создания отзывчивой веб-типографики
Источник: rusability.ru
Чтобы правильно подобрать размеры, за основу возьмите размер основного текста и прибавляйте к нему указанное число, пока не получите готовую шкалу.

После этого можно приступать к настройке всех других элементов, выбирая высоту строки и ширину текста по такой же схеме, пока вы не достигните желаемого результата.
4. Вертикальный ритм
Следующий этап – объединение отдельных элементов с использованием техники вертикального ритма. Чтобы все элементы смотрелись гармонично, необходимо правильно подобрать пустое пространство. Оно должно быть достаточно большим, чтобы разъединять элементы, но и достаточно маленьким, чтобы не нарушить их связь.

Как много пустого пространства использовать? Многие дизайнеры ориентируются на цифру 10 пикселей. Но выбирать цифру наугад здесь тоже не нужно. Можно взять за основу высоту строк основного текста.

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

- Для установления пустого пространства элементов используйте значение высоты строки основного текста;
- Высоту строки всех элементов нужно выстраивать на основе основной высоты строки.

Увеличивать начальное значение можно и на 0,5 и на 1,25, это необязательно должно быть целое число. Принцип вертикального ритма работает за счет использования повторения.
Правила создания отзывчивой веб-типографики
Источник: rusability.ru
5. Сетка базовых линий
Принцип вертикального ритма и ориентация на сетку базовых линий плохо сочетаются. Конечно, базовые линии могут быть полезны, но новичков они чаще сбивают с толку.

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

- Во-первых, расстояние между глазами пользователей и экраном. Обычно, чем больше экран, тем дальше будут глаза пользователя. Вот почему для большего экрана необходимо использовать более крупный шрифт.
- Во-вторых, нужно сохранить пропорции между основным текстом и другими элементами. Поэтому необходимо увеличивать их размеры пропорционально.
- В-третьих, иногда уместно выбрать более крупное значение для некоторых элементов, например, заголовка h1, чтобы привлечь внимание читателя.
7. Код для отзывчивой типографики
Увеличивать размеры текста нужно пропорционально. Проще всего сделать это при помощи html селектора. Также необходимо учитывать предпочтения пользователя.
CODE
Нужно использовать соответствующие параметры и для других элементов.
CODE
Процесс выглядит довольно просто, но он требует хорошие знания математики. Используйте функцию ms() из шкалы в библиотеке. Так вы сможете написать ms(4) вместо 3.157em и ms(3) вместо 2.369em.

А вот пример функции, которая упросит расчет вертикального ритма:
CODE
Эта функция vr позволит вам использовать vr(3) для трех базовых линий, чтобы не высчитывать значение самостоятельно.

Значительно упростит задачу библиотека отзывчивой типографики Typi.
Правила создания отзывчивой веб-типографики
Источник: rusability.ru
8. Относительные единицы
Вопрос об относительных единицах сводится к выбору rem или em элементов. Но использовать их следует в разных обстоятельствах. Вот два правила, на которые следует ориентироваться:

- Используйте em, если значение должно зависеть от размера шрифта;
- Если нет, выбирайте rem.
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Подписка на новости. Получайте важное первым
ПОДПИСАТЬСЯ