9 советов по типографике сайта
9 советов по типографике сайта
20 января 2014

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

Типографика для веб сайта – достаточно важный элемент дизайна, который в рунете выражен как-то не очень сильно. Данный вопрос чаще поднимается на англоязычных зарубежных дизайнерских блогах, у нас внимание ему практически не уделяется. Нет, конечно при создании макета большинство дизайнеров думает о типографике сайта – шрифтах, оформлении, но уж очень скромно и мало. Потому, наверное, в рунете можно по пальцам посчитать количество проектов с яркой креативной и нестандартной типографикой, больше стандартного унылого “серого” дизайна:( Возможно, именно по этому Дмитрий Наумов решил поделиться интересным гостевым постом о типографике. Дима по совместительству, кстати, является автором весьма полезного проекта Converlab – “Дизайн. Юзабилити. Конверсия.”

 

Итак, 9 советов по типографике веб сайта:

1. Выбор шрифта

От выбора шрифта зависит очень много. Дизайн шрифта определяет настроение, передает «характер», да и вообще оказывает сильное влияние на восприятие. Выбирайте тот шрифт, который соответствует стилю и концепции вашего сайта. Например, для «традиционного» дизайна пойдет традиционный шрифт с засечками, вроде Times Roman, для «современного» дизайна может подойти шрифт без засечек — Arial или Helvetica;

2. Размер шрифта

Особо важен размер шрифта основной части текста. Заголовок (подзаголовки) может быть гротескно большим и неуклюжим, но основной текст должен быть комфортным, что возможно только при оптимальный размерах. Обычно это 12-16 px; типографика

3. Набор стилей

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

4. Акцент

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

5. Ширина столбца

В традиционной типографике большое внимание уделяется ширине колонки, по этой причине текст разбивают на колонки в газетах и журналах. Если строка слишком длинная, читать ее не удобно. Потому что приходится слишком далеко переводить взгляд от конца одной строки до начала следующей. Короткая строка тоже не хорошо. Оптимальная длина строки лежит в диапазоне 70-140 знаков;

6. Интерлиньяж (Leading)

Интерлиньяж (Leading) — расстояние между строками. Если оно маленькое, это отрицательно сказывается на читабельности. Слишком большой Leading тоже ничего хорошего не сулит. В общих случаях, вам скорее всего подойдет интерлиньяж на 2-4 пункта больше чем размер шрифта;

7. Общая структура страницы

В идеале должна на странице должна использоваться единая сетка. Таким образом можно добиться гармоничного вида всего сайта в целом. Старайтесь использовать общие правила и стили (которые вы придумали) на всем сайте;

8. Цвет и контраст

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

9. Белое пространство

Белое пространство — это не пустота, а важный элемент дизайна. Не следует слишком тесно лепить элементы, всегда оставляйте немного «воздуха». Таким образом можно добиться чистого, легкого, приятного дизайна. — Во-первых, спасибо Диме за пост. Все сказано кратко и по существу, по сути, развивать тему можно бесконечно по каждому из пунктов. Думаю, часть ответов на вопросы сможете найти на его сайте Converlab. Кроме того, от себя хотелось добавить, что, если вы уж решили сделать что-то “эдакое” в плане типографики сайта, то советовал бы перед работой просмотреть различные подборки в интернете с оригинальными решениями. Это очень вдохновляет, а также способствует появлению креативных идей.

Источник: design-mania.ru/web-design/articles/soveti-tipografiki/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
200 лицензионных кириллических шрифтов
200 лицензионных кириллических шрифтов

Многие дизайнеры спрашивают меня, где взять нормальные шрифты для работы...

07.04 0
Чем можно заменить Helvetica - 6 альтернатив
Чем можно заменить Helvetica - 6 альтернатив

Небольшая подборка шрифтов, которыми можно заменить Helvetica в ваших проектах.

02.06 0
Простые правила сильного текста 3Уровень сложности:
3. Специалист
Простые правила сильного текста

Видео урок о том, как создавать короткие и емкие тексты в стиле инфо-дизайна и минимализма.

28.09 1
Типографика для веб: +10% к скорости чтения, +15% восприятию
Типографика для веб: +10% к скорости чтения, +15% восприятию

Очень доступная статья от Павла Лебедева, как быстро сделать ваши тексты в макетах на порядок лучше.

08.05 3
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.