7 правил типографики
Итак, думаю, всем понятно, что типографика в веб-дизайне подразумевает не только просто выбор шрифтов. Большинство дизайнеров ограничиваются выбором семейства и только немногие задумываются еще над высотой строки, промежутков между строк и подобным. Но есть несколько общеизвестных правил, если кому неизвестны, восполняйте упущенное.
Много разных шрифтов – это плохо.
Оперировать следует шрифтами из выбранных одного-двух семейств. Не более. Выбираем один шрифт для заголовков и один для текстовых блоков. Да, всего два. Стоит также понимать, что если вы будете размещать на своем сайте рекламу, в баннерах и рекламных блоках могут оказаться совсем иные шрифты, и если у вас уже в дизайне шрифтов разнообразие, будет совсем неаккуратно все выглядеть.
Определитесь с размерами.
Высота и ширина шрифтов, а также расстояние между строками и между буквами не должно меняться в случайном порядке на странице:
- Крупный шрифт означает большую важность написанного им текста. Соответственно, его нужно оставить заголовкам. И даже если вы не заключите слово с высотой шрифта в 30 пк в теги <h1>, и браузеры и посетители будут расценивать этот текст как более важный , чем тот, что выполнен высотой в 10 пк.
- Расстояние между строк не должно быть выставлено на сильно большие значения, это затрудняет чтение и понимание текста.
Только стандартные шрифты.
Нестандартные шрифты заменяются на стандартные у тех, у кого они не установлены. Так что используем только стандартные шрифты для Windows или Mac. Но иногда хочется добавить в дизайн оригинальных шрифтов, использовать шрифт как дизайнерский элемент. В таких случаях, не забудьте сделать такой текст картинкой, но не увлекайтесь – страница будет дольше загружаться, да и текст в картинках не индексируется поисковыми системами.
И напоминаю: Comic sans – он для комиксов, а не для веб-дизайна :-)
Используем шрифты и с засечками и без.
Современные мониторы позволяют не задумываться над читабельностью двух этих типов шрифтов. Ранее считалось, что шрифты serif (c засечками, Times New Roman), лучше для печати, а для веб лучше san-serif (например, Arial). Но это в прошлом, и кстати, сочетание двух этих типов (первый в заголовках, второй в тексте) зачастую очень неплохо смотрится.
Помните, что читатели могут менять размер шрифтов
Браузеры поддерживают эту функцию, а в Firefox, кстати, сейчас выполняется полное приближение страницы, что уже не так страшно. Но все равно стоит оценивать, как будет выглядеть сайт при разных размерах шрифтов. Это особенно важно при верстке макета, чтобы при больших размерах она не расползалась. Все же IE 6 еще не ушел из нашей жизни.
Создайте иерархию шрифтов.
Последовательно определитесь со шрифтами и размерами всех типов размещения текста в дизайне, все текстовые блоки, все виды заголовков, специальные выделения, цитаты и т.п. Так вы облегчите посетителю чтение информации страницы.
Уделите время типографике
Ошибка номер 1 – это не уделять время типографике. Текстовая информация – это практически самое важное на странице, пользователи приходят именно за ней, и она никак не должна «упасть в грязь лицом».
Кстати, еще о типографике можно прочесть в блоге у Михаила: Planet-design.com.ua
Между прочим, довольно объемная статья.



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