Дизайн текста: как сделать его «живым»

[Счастливчик]

Доброго времени суток, друзья! Сегодня впервые на моем блоге вы можете увидеть гостевой пост. Из которого вы узнаете как правильно оформлять тексты и как важно не только написать качественный текст, но и грамотно расположить его на странице. Гостевой пост подготовила компания – http://www.textstyle.ru.

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


Начнем с основного текста
Главное, на чем стоит заострить внимание – то, что все элементы контента должны быть оформлены единообразно. Необходимо это для того, чтобы информация на странице воспринималась адекватно и без затруднений, а текст был читабельным. Сказанное касается в основном цветов и шрифта, но не являются исключением и отступы.
Считается, что шрифт без засечек (рубленый) более удобен при чтении с экрана, чем шрифт с засечками. Наиболее распространен стиль Verdana, а самый популярный Times New Roman хорош только для напечатанных документов. Размер шрифта должен быть достаточно большим. В принципе, конкретное решение зависит от стиля сайта в целом и его тематики.
Поговорим о заголовках
Любой электронный документ может быть многоуровневым и все существующие 6 уровней заголовков могут быть востребованы. Рекомендуется использовать только три уровня заголовков, так как употребление всех шести, скорее всего, приведёт к тому, что читатель просто запутается. Для заголовков верхних уровней лучше использовать контрастный цвет и большой размер шрифта. По мере приближения к основному тексту, следует снижать яркость заголовков.
Чем светлее и ярче цвет текста, тем меньше он контрастирует со светлым фоном. Для заголовков верхнего уровня низкая контрастность компенсируется их размером и формой, а с уменьшением размера появляется необходимость компенсировать его при помощи цвета (то есть цвет берется уже более тёмный). Допускается использование нескольких цветов, если стиль сайта того требует, но не стоит для всех заголовков использовать разные цвета, это будет слишком пёстро. Ниже приведены два примера: один из них демонстрирует оформление сайта до работы профессионала, второй – после работы вебстальщика.


Картинки кликабельны
Размеры
Размеры текстовых блоков и заголовков должны быть рассчитаны так, чтобы заголовки разных уровней были отличимы друг от друга, но при этом не допускается слишком большой контраст, который порождает разобщённость элементов. Размер блоков текста напрямую зависит от размера шрифта. Наиболее удобной считается ширина в 65 символов для блока. Желательно также, чтобы высота абзаца не превышала 7 строк.
Следующее, на чем следует остановиться, – это отступы
Широко известно правило: достаточное количество пустого, не заполненного знаками места, увеличивает читабельность текста. Чем больше отступов – тем больше отдыха для глаз. Отступы между блоками текста должны быть соотнесены с самими этими блоками (то есть так, чтобы не возникало ощущения оторванности одного блока от другого). Не должна быть слишком большой или чересчур маленькой высота строки.
В электронных документах отступами разделяются абзацы, и допустимое расстояние между ними – в диапазоне от высоты строки до высоты шрифта. Расстояние от конца текстового блока до следующего за ним заголовка должно быть в два раза больше, чем от заголовка до начала блока текста, а расстояние от заголовка до начала блока текста примерно равно расстоянию между абзацами.
Вот несколько самых главных и первых требований к грамотному оформлению текста на веб-ресурсе. Многое, разумеется, зависит от самой тематики сайта и общей дизайнерской идеи. Посмотреть примеры грамотно оформленного текста можно здесь: http://www.textstyle.ru/.