Типографика в веб-дизайне

G
N
I
D
A
O
L

Статья

image news
view50

Типографика в веб-дизайне

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

Вступление

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

Основные моменты

  • Выбор шрифта. Шрифт играет важную роль в общей концепции сайта. Ошибочным будет предположение, что от выбора шрифта ничего не зависит. Шрифт подчеркнет стилистику сайта и усилит общее восприятие информации. Используя же случайный шрифт или стандартный - вы лишаете себя преимущества в этом плане.
  • Размер шрифта. Важную роль сыграет правильный подбор размеров шрифта основных элементов: h1, h2, h3, p, small и прочее. Не используйте на разных страницах разные размеры для одних и тех же, похожих элементов или блоков. Старайтесь соблюдать придуманные нормы, создавая целостный вид. Самое главное тут - четкое выделение заголовков, легко читаемый основной текст.
  • Набор стилей. Разбитый на элементы, но однотипный текст читать не приятно, он не захватывает внимание на важных элементах, вредит качеству восприятия информации. Для решения этой проблемы вам стоит придумать стили для выделения основных элементов, заголовков, цитат и прочего. Воспользуйтесь разными цветами, стилями начертания, элементами подчеркивания и выделения. Можете даже использовать другой шрифт для, например, цитат. Рекомендуемое максимальное количество шрифтов на сайте - два.
  • Простые заголовки. Упрощайте заголовки на сайте, не стройте сложные предложения. Отражайте только суть, для этого и придумали заголовки.
  • Акцент. Набор стилей уже поможет вам расставить акцент, например, на заголовках. Для предложений в тексте, используйте жирное написание, курсив, подчеркивание или придумайте что-нибудь особенное.
  • Ширина столбца. В газетах и печатных изданиях пишут в несколько колонок, заметили? Это не просто так, текст легче читать, когда строка не слишком длинная. Понятное дело, если дизайн под телефон - особо не разгуляешься, а вот для широких экранов уже нужно подумать, как сделать лучше. Мы думаем, что будущее за сайтами во всю ширину экрана, но не занимайте текстом всю область, оставьте её для навигации и других блоков. Можете придерживаться принципа +/- 70-140 знаков на строчку.
  • Долой воду. Оставляйте текст с основным смыслом на блоках вашего сайта, смотрите со стороны клиента, ему точно нужно прочитать все, что вы написали, или ему хватит и половины? Статьи и новости - это отдельный разговор, другие же страницы должны быть написаны четко и эффективно. Идеальный коммерческий сайт подчиняется такому правилу: Зашёл - нашёл - понял.
  • Интерлиньяж. Междустрочное расстояние, если оно маленькое, делает чтение текста неприятным занятием. Слишком большое - влечет за собой потерю концентрации информации на странице, сбивает с понимания структуры, в общем - беда. Используйте средние значение, опять же, исходя из придуманной концепции. Рекомендуется 130% от высоты текстовой строчки.
  • Общая структура страницы. Под этим понятием мы подразумеваем единую сетку для блоков и элементов сайта. Например - общая ширина. Довольно общее определение, но важное для понимания, как будет смотреться лучше. Но! Без фанатизма, блочные конструкции далеки от совершенства, они все кажутся однотипными, даже если раскрашены разными стилями и находятся в разных местах.
  • Выравнивание. Рекомендуется выравнивать текст по левому краю. Т.к. строки становятся разные по длине - читая текст, будет легче отследить где дальше читать, что повышает читабельность.
  • Цвет и контраст. Правильный набор стилей должен решать этот вопрос, но, мы напомним, что текст должен контрастировать с фоном. Потеря контраста - потеря акцентов внимания, выделения и читабельности. Бело-черный - самый лучший вариант, отталкиваемся от него и смотрим, что у нас получилось.
  • Пустое пространство. Информативность - важная составляющая сайта, тут без вопросов. Но, это не значит что нужно запихивать элементы один за другим, стилизовать текстовые страницы как газетную полосу. Оставляйте пространство между элементами, не нагромождайте информацией отображаемую область, лучше - оставляйте расстояние, так будет приятнее восприниматься. Посмотрите топы сайтов по дизайну, пустое пространство сейчас в моде.

На заметку

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

Правильное использование пробелов между абзацами увеличивает понимание текста на 20%. Это к слову о пустом пространстве.

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

Заключение

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