10 основных правил типографики в веб-дизайне
Что такое типографика
Правила в типографике
Использование правильного типа шрифта
Ограниченное количество шрифтов
Создание иерархии
Использование правильного цветового контраста
Не используйте центрирование текста
Не делайте шрифт слишком маленьким
Длина строки текста
Не используйте CAPSLOCK
Определение правильных точек фокусировки
Заключение
Задание
810.00K
Categories: internetinternet informaticsinformatics

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

1. 10 основных правил типографики в веб-дизайне

2. Что такое типографика


Типографика является одним из важных элементов веб-дизайна. Она
делает контент читаемым с помощью визуальной иерархии, правильно
подобранных шрифтов и верстки текста.
Плохая типографика может испортить впечатление пользователя о
сайте, а с ростом популярности CSS и HTML она стала еще более
важной. Веб-дизайн на 95% состоит из типографики
Существует заблуждение, что типографика — это искусство создания
декоративных шрифтов. Это не так. Типографика — это наука, которая
позволяет создать удобный для читателя текст. В нашем случае мы
говорим про текст на сайте.
разберем типовые правила типографики в веб-дизайне, которые важны
не только с точки зрения привлекательного визуала текста, но и
влияния на пользователя сайта (UX-дизайн).

3. Правила в типографике

• Эффективное использование пустого пространства
• Пробел не обязательно должен быть пространством между
элементами страницы, например картинками и текстом. Это
может быть пространство между буквами, предложениями или
абзацами.
• Если на сайте правильно управлять пустыми пространствами,
это повысит удобство чтения контента и упростит навигацию.
Еще один важный момент — оставить межстрочный интервал,
облегчающий чтение содержимого.
• Это очень важно, так как если мы оставим маленькое
пространство между строками, мы вызовем ощущение большой
плотности текста, а также усложним чтение для пользователей.
• Текст разбить на блоки по 3-4 строчки, что позволит его легко
воспринимать и читать.

4. Использование правильного типа шрифта

Выбор типа шрифта зависит
от его легкой воспринимаемости на
экране, а не от стиля. Иногда слишком
декоративный стиль шрифта отвлекает
от самой сути — чтения текста, так как
пользователь больше думает о самом
шрифте, а не о смысле текста.
Читаемый шрифт — это
высокий шрифт с широкими глифами
без стилей. Это не значит, что шрифты
с засечками нельзя использовать. Они
также могут хорошо работать, если
размер шрифта больше 12.
Для 12 и ниже используйте
шрифты по типу Sans serif.
При выборе шрифта важно
учитывать его отображение на разных
устройствах: ПК, смартфон и планшет,
так как некоторые шрифты из-за
тонкости букв могут хорошо смотреться
на компьютере, но на телефоне будет
сложно читать
Рекомендуем эти 10 веб-шрифтов для
сайта:
Gotham Pro;
Visuelt Pro;
TT Norms Pro;
Eastman;
RF Tone;
Value Sans Pro;
Gordita;
Mabry;
Averta;
Mont.

5. Ограниченное количество шрифтов

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

6. Создание иерархии


Чтобы привлечь внимание читателя, дизайнер должен разделить
текстовый контент по степени важности:
сильно важно;
менее важно;
не важно.
Сделать это можно, увеличив размер шрифта и добавив его жирности,
а также соблюдать семантичность заголовоков h1-h6.+
Это создаст иерархию. Чем крупнее шрифт, тем большее значение
текст имеет.

7. Использование правильного цветового контраста

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

8. Не используйте центрирование текста

• Начнем с того, что пользователю вообще неудобно читать
центрированный текст. Причина проста — каждая строка
обычно начинается с разной высоты, что усложняет
отслеживание прочитанного.
• Когда вы находите сайт, на котором сосредоточено большинство
текстов по центру, возникает ощущение, что это
непрофессионально. Частые ошибки при центрировании текста:
• чередование слишком длинных и слишком коротких строк;
• строки одинаковой длины;
• любые очевидные формы, которые приобретает текст, при
центровке.
• Умеренно используйте центрированный текст, и у вас получится
приятный дизайн.

9. Не делайте шрифт слишком маленьким

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

10. Длина строки текста

Чем короче строка текста, тем больше
пользователю нужно возвращаться назад к
началу новой строки, что создает сильное
напряжение в ритме чтения.
А длинные строки мешают внимательно
фокусироваться на тексте.
.
Поэтому важно придерживаться золотой
середины и рекомендуется использовать 60
знаков (символов, букв) в одной строке на
компьютерной версии сайта и 30-40 знаков для
мобильного устройства

11. Не используйте CAPSLOCK

• Текст, который пишется большими заглавными
буквами, считается«кричащим» и замедляет чтение
текста. CAPSLOCK применим:
• в аббревиатурах;
• в логотипах;
• иногда в заголовках.

12. Определение правильных точек фокусировки

Каждый дизайнер
знает, что читатели обычно
просматривают контент в
интернете по паттернам «Z»
и «F», поэтому структура
страниц делается по левому
краю слева-направо,
соблюдая
правила модульных сеток.

13. Заключение

• Резюмирая все вышесказанное можно определить 3
основные критерия успешной типографики на сайте.
Она должна быть:
• простой;
• понятной;
• разборчивой.
• Не старайтесь переборщить с творчеством, верстая
текст, а подумайте над тем, легко ли будет людям
читать то, что вы сделали.

14. Задание

• Выполнить конспект.
• Сделать вывод.
• В программе Word показать какой
информацией будет наполнен ваш Сайт
используя заголовки под заголовки.
• Каким шрифтом Вы будете
пользоваться при создании сайта.
English     Русский Rules