11. Типографика и шрифтовые гарнитуры.

Типографика — это художественное оформление текста посредством набора и верстки.

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

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

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

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

Многие люди используют слова «гарнитура» и «шрифт» как синонимы. На самом деле это не одно и тоже.

Гарнитура — набор из одного или нескольких шрифтов в одном или нескольких размерах и начертаниях, имеющих стилистическое единство рисунка и состоящих из определённого набора типографских знаков.

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

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

9 Простых советов по типографике веб-сайта:

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

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

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

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

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

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

4. Акцент

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

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

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

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

Интерлиньяж (Leading) — расстояние между строками. Оптимальный размер интерлиньяжа на 2-4 пункта больше чем размер шрифта.

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

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

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

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

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

Белое пространство — это не пустота, а важный элемент дизайна. Не следует слишком тесно лепить элементы, всегда оставляйте немного «воздуха». Таким образом можно добиться чистого и приятного дизайна.

Одним из показателей удобочитаемости является ширина строки документа. С появлением мониторов поддерживающих большое разрешение экрана стало возможно "укладывать" в одну строку до нескольких сотен знаков, однако строка "идеальной ширины" должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает значительно быстрее. Часто контраст снижают например используют темно-серый на белом фоне, чтобы резкий контраст не утомлял посетителя. Большие тексты стоит делать покрупнее (Text size 2 и выше). Боже вас упаси - делать слабоконтрастные сочетания шрифта и фона: например, желтый на белом.

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

Шрифт - в пределах публикации он должен иметь одинаковые характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.

"Ошибки в правописании" - одна из самых главных ошибок в web-дизайне. Пользователи не любят грамматических ошибок, если на Вашем сайте множество ошибок, то пользователи могут перестать ходить на ваш сайт. Если у вас плохо с грамматикой, то хотя бы проверяйте правописание в word`e, а еще лучше - дружите с орфографическим словарем.