9 советов по типографике сайта

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

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!

Комментариев - 13 для поста 9 советов по типографике сайта
  1. ]]> BOLVERIN ]]> (May 18, 2010)

    неплохо былобы показать пару примеро и описать вины и фейлы по каждому :)

  2. ]]> Дмитрий Наумов ]]> (May 19, 2010)

    Было неплохо, не подумал -).

  3. ]]> Кирилл ]]> (May 20, 2010)

    Согласен, было бы отлично, если бы Вы взяли несколько сайтов и по пунктам всё описали.
    Например, вот мой и предыдущего оратора:)

  4. ]]> Tod ]]> (May 20, 2010)

    Да, возможно, с примерами было бы действительно немного более наглядно:) Хотя при этом пост бы превратился в громаднейшую статью – по таким вещам книги пишут. Может быть получится в будущем открыть раздел типографика, где добавить еще чуток подобных статей, но с более четкими примерами.

  5. ]]> Женька ]]> (May 21, 2010)

    Да что толку с типографикой выпендриваться на сайтах когда верстальщики (в большинстве своём) плевать хотели на то, что вы в фотошопе вручную рисовали em-dash (т.к. в стандартных символах в шопе его нет) и продолжают тупо ставить минус в качестве тире.

  6. ]]> Progresser ]]> (May 22, 2010)

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

  7. ]]> Женька ]]> (May 23, 2010)

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

  8. ]]> wtyf ]]> (May 28, 2010)

    Вот никак не подберу толковый дизайн в стиле газеты (не интернет, реальной). Может кто кинет ссылку на шаблончик? Мне нравится минималистский стиль и шривты с засечками.

  9. ]]> AXS ]]> (June 12, 2011)

    2Женька, нормальный верстальщик знает наизусть, как отче наш, что m-dash ( — ) набирается на клавиатуре комбинацией Alt+0151, а n-dash ( – ) комбинацией Alt+0150

    PS: Я даже в аське использую «правильные» тире и кавычки-ёлочки.

  10. ]]> BFS ]]> (July 5, 2011)

    А вот объясните, почему кавычки-ёлочки это правильно. А типографский стиль кавычек – неправильно?

  11. ]]> AXS ]]> (July 6, 2011)

    Я не говорю, что типографские кавычки (имеются ввиду «лапки») — это зло. Просто лапки ( „“ ) приняты в английском языке, а ёлочки ( «» ) в русском. А популярный знак дюйма ( ” ) — это знак дюйма и не иначе.

    Коды на клавиатуре:
    („) — Alt+0132
    (“) — Alt+0147
    («) — Alt+0171
    (») — Alt+0187

    Кстати, верстальщикам могу посоветовать поставить раскладку Ильи Бирмана
    На вики http://ru.wikipedia.org/wiki/Типографская_Раскладка_Ильи_Бирмана
    Оф. сайт http://ilyabirman.ru/typography-layout
    Это раскладка позволяет набирать с клавиатуры такие символы как « » „ “ — ↓ → ↑ ← © ¹ ² ³ ‰ ∞ ≠ ½ ⅓ ¼ 〈 〉 € ® ™ ѣ ѵ ѳ ≈ § ° £ × … ̆ ¢
    Я спецом купил себе белую клавиатурку — http://www.genius.ru/products.aspx?pnum=15039 нанёс на клавиши тонким маркером нужные символы и приклеил сверху прозрачные наклейки для клавиш. Очень удобно получилось))

  12. ]]> Фермата ]]> (April 12, 2012)

    а вот красивые примеры типографики, прям вдохновляет на свершения и другие приятности: http://templates.motocms.ru/blog/obzory/tipografika-kak-dizajnerskij-trend/

  13. ]]> Настя ]]> (August 13, 2012)

    Еще ажно было бы упомянуть о таком понятии как кернинг :)

Оставить комментарий
для статьи 9 советов по типографике сайта