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

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

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

Не будем мучить вас специфическими терминами, или рассказывать об истоках типографского дела, тем более что об этом мы уже писали ;)

Оформление текста на сайте

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

    В интернете для оформления текста большого объема наибольшей популярностью пользуются:

    • Arial;
    • Baskerville;
    • Century Schoolbook;
    • Courier New;
    • Georgia;
    • Helvetica;
    • Tahoma;
    • Times New Roman;
    • Trebuchet;
    • Verdana.
  2. Правильный размер. Отказ от мелкого отображения шрифта – очередная прописная истина, но с полезными статистическими данными;) Универсального рецепта в вопросе выбора идеального размера шрифта на сайте не существует. Тем не менее, согласно данным исследований лаборатории Software Usability Research Laboratory:

    • шрифты Verdana и Arial наиболее удобны для чтения с размерами 10, 12 и 14pt;
    • высокую степень восприятия «печатной» информации показали Courier и Arial;
    • наихудший результат у Comic Sans, шрифт был удостоен званий «сложный» и «не вызывающий доверия»;
    • самая высокая скорость чтения отмечена при использовании Arial и Times New Roman;
    • положительные отзывы получили Arial 14pt, Courier 12pt, Tahoma 10pt.
  3. Правила хорошего тона, выравнивания и длины строки. Выбрать пару шрифтов и оптимальный размер для них – это даже не половина дела, а его треть. Удобство, комфорт и прочие «плюхи» посетителям обеспечат:

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

Эффектная и эффективная типографика в дизайне сайта

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

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

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

Качественная типографика в вебе

«На этом ресурсе типографика достаточно игрива, она бросает вызов читателю. Игра моноширинных и узких начертаний, италики и брусковой антиквы завораживает. Казалось бы, подобный винегрет лишит структурности и юзабильности, но, напротив, ресурс только выиграл. Он приобрёл неповторимый стиль».

Качественная веб-типографика

«Типографика Дин-стандарта ещё не одно поколение будет будоражить умы дизайнеров. Прекрасный ресурс с на первый взгляд строгой блочностью и типографикой, но со второго взгляда шрифты уже не кажутся такими угрюмыми, наоборот, всё более простодушными».

Удачно подобранная типографика может быть яркой, филигранной, лаконичной… При этом она не должна терять своей главной функции – передачи письменной информации. Мнимая красота шрифта бесполезна, если из-за неё усложняется восприятие содержания.

Последнее в нашем блоге