Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Как улучшить читаемость сайта Категория: Веб-дизайн
Название: Как улучшить читаемость сайта
Дата добавления: 25-08-2012
Раз просмотрено: 511
Комментарии: 0
Рейтинг: * * * * * * * * * * (2 голоса)

Как улучшить читаемость сайта

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

Правильная высота линии

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

Как правило, обычно добавляется 7 пикселей к размеру шрифта при настройке высоты строки для текста (с размером шрифта от 12 до 15 пикселей).

body {
	font-size: 14px;
	line-height: 21px; /* 14px + 7px */
}

Правильные отступы у заголовков

Другая распространенная ошибка — это  неправильные отступы у заголовков. Заголовок связан с абзацем, а не является разделителем между двумя абзацами. Поэтому заголовки должны иметь больший отступ сверху, чем снизу.

Не используйте слишком много различных шрифтов

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

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

Используйте моноширинный шрифт для отображения кода

Если вы разработчик (как большинство людей, читающих этот сайт) и у вас есть сайт, посвященный программированию, вы, вероятно, захотите отобразить какие-нибудь фрагменты кода на нем. Если да, то вам стоит использовать моноширинный шрифт для этого. Итак, что же такое моноширинный шрифт? Это шрифт, буквы и символы которого занимают одинаковое горизонтальное пространства.

Итак, какой шрифт следует использовать для отображения фрагментов кода на сайте? Courier на сегодняшний день является самым популярным, но можно попробовать такие шрифты, как Consolas или Monaco.

Думайте о контрастности

Даже если у вашего сайта великолепная типография, не следует забывать о контрастности. Если задний фон вашей страницы серый (#999), то не используйте темно-серый текст (#333), в противном случае, его будет трудно читать, особенно пожилым людям или людям с нарушениями зрения.

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

Оставляйте подчеркивание для ссылок

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

Структурируйте заголовки и текст

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

Не бойтесь белых мест

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

Используйте правильные символы

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

Он сказал: "Привет".

На самом деле, в русском языке следуют использовать такие кавычки:

Он сказал: «Привет».

Их HTML-мнемоники: « и ». Многие CMS, к примеру, WordPress, автоматически преобразуют кавычки в верные. Так же существуют правила использования дефисов, тире и математических знаков. Подробнее об этом можно почитать в статье «Типографика в веб-дизайне».

Это интересно: «Нумерованные списки с помощью CSS».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.