Очень часто, нарисовав страницу, начинающие дизайнеры на этом останавливаются и считают работу законченной. Это, конечно, так, но только в том случае, если заказана одна страница. Если сделан заказ на дизайн всего сайта, то нужно всегда помнить о том, что на страницах может быть содержимое любого рода, начиная от шести уровней заголовков заканчивая врезками и плашками.
В этом случае, особо стоит уделить внимание не только элементам существующим в HTML по-умолчанию, но и дополнительным элементам необходимым для веб-мастера (того самого который будет размещать содержимое на страницу).
Допустим, что уже подобраны основные цвета сайта, стилизация графических элементов. Теперь нужно разобраться с текстом. 0. Основной текст.Элементы контента на странице должны иметь единый стиль оформления, чтобы страница была адекватно воспринимаема и легко читабельна. Это касается в основном шрифта и цветов, но и отступы не исключение. Размер шрифта должен быть достаточно большой, а если требуется использовать маленький шрифт, то обязательно стоит предусмотреть возможность изменения его размера, например, использование em вместо px для указания размера шрифта в вёрстке (IE6 не умеет изменять размер шрифта если он указан в пикселях, остальные браузеры с этим справляются). Есть мнение, что рубленый шрифт (без засечек) более читаем с экрана, чем шрифт без засечек (не говоря уже о декоративных шрифтах). Соглашусь, с некоторыми оговорками. Если шрифт мелкий, то стоит использовать шрифт без засечек: | Windows | Mac OS | Unix/Linux |
|---|
Arial
Arial Black
Impact
Lucida Sans Unicode
MS Sans Serif
Tahoma
Trebuchet MS
Verdana | Charcoal
Gadget
Geneva
Helvetica
Lucida Grande | Bitstream Vera Sans
Lucida
Luxi Sans
URW Gothic L |
Если шрифт большой (например, заголовок), то можно использовать шрифт с засечками, который будет выглядеть гораздо изящнее. | Windows | Mac OS | Unix/Linux |
|---|
Times New Roman
Georgia
Palatino Linotype
Sylfaen
Bookman Old Style
Book Antiqua
Garamond | Times
Palatino
Gill Sans
Lucida Bright
Baskerville | Century Schoolbook L
URW Bookman L
URW Palladio L
Nimbus Roman No9 L
Bitstream Vera Serif
Utopia |
Всё, конечно, зависит от стиля дизайна сайта. К слову, рекомендую почитать следующие статьи: Как выбрать шрифт для Web-сайта и Как выбрать шрифт для Web-сайта 2: serif и monotype. 1. ЗаголовкиСуществуют 6 уровней заголовков, которыми не стоит пренебрегать, ведь очень часто электронный документ (в данном случае веб-сайт) может быть многоуровневым и все уровни заголовков могут быть востребованы. Хотя использование всего «спектра» заголовков может привести к тому, что пользователь запутается в уровнях. Поэтому трёх уровней заголовков в тексте будет достаточно. Заголовки самых верхних уровней лучше оставить для форматирования заголовочных надписей для различных блоков и заголовка сайта и страницы. Рекомендую для заголовков самых верхних уровней использовать большого размера шрифт и достаточно контрастный цвет. Спускаясь по уровню заголовков постепенно снижайте их яркость приближаясь к цвету основного текста. Делается это для того, чтобы мелкие заголовки были более читаемы. Например, если зелёный цвет один из основных цветов на сайте, то рекомендую в графическом редакторе изобразить градиент, где с одной стороны будет располагаться ваш зелёный цвет, а с другой стороны — цвет основного текста. 
Дело в том, что чем ярче и светлее цвет текста, тем он меньше контрастирует со светлым фоном. Для заголовков верхнего уровня яркость шрифта, а стало быть его низкая цветовая контрастность компенсируется их размером и контрастом формы. По мере уменьшения размера, уменьшается контраст формы, а стало быть уменьшается удобочитаемость, поэтому следует это компенсировать контрастом цвета, т. е. цвет заголовков делать более тёмным. 
Пример, отлично иллюстрирует, сказанное. Если стиль сайта подразумевает использование нескольких цветов, то можно их взять, расположить в порядке яркости и применить для заголовков. Но не стоит перебарщивать. Разные оттенки одного цвета допустимы. Но если вы будете использовать для всех шести заголовков разные по спектру цвета, то содержимое будет слишком пёстро оформлено и это будет мешать. Последний шестой заголовок, является заголовком самого низкого уровня и, в принципе, может даже не отличаться от основного текста ни цветом, ни размером. Можно просто сделать его жирным. 2. РазмерыРазмеры заголовков и текстовых блоков должны быть рассчитаны так, чтобы, во-первых, заголовки разного уровня были легко отличимы, т. е. различия должны быть на столько контрастны на сколько это возможно в определённом диапазоне. Но слишком большой контраст размера породит разобщённость элементов — этого следует избегать. Размер самих блоков текста зависит от размера шрифта. Как правило наиболее удобен для чтения блок текста шириной в 65 символов, поэтому для больших объёмов текста не подходит резиновая вёрстка. Высота абзаца, желательно, не должна превышать 7 строк.
3. ОтступыКоличество пустого места прямо пропорционально читабельности — это уже достаточно известное правило. Времена km.ru прошли (хотя сейчас дизайн слегка улучшен), сейчас наиболее актуален дизайн в так называемом стиле «Web 2.0», который, если не брать во внимание закруглённые углы, глянец, отражения а только форматирование текста, по сути представляет собой наглядный пример того, как должен выглядеть удобный для чтения сайт. Почему раньше были сайты похожие на zvuki.ru? Всё очень просто. Веб-дизайн унаследовал компактную вёрстку от газет и журналов, где каждая страница имела определённую и весьма немаленькую цену. И сейчас в газетах стараются на одну страницу запихнуть как можно больше. По началу в веб-дизайне поступали точно так же. Примеры перегруженных сайтов.
Но постепенно, до дизайнеров стало доходить, что пространство на веб-сайте не ограничена, а стало быть можно делать больше отступов. Больше отступов — глазам больше места для отдыха. «Стены текста» и обилие многоколончатых текстовых блоков раздражают глаза. Стандартная вёрстка 90х — 3–6 колонок с небольшими отступами и чёткими разделительными линиями или фонами. Современная вёрстка — 1–3 колонки с большими отступами и не всегда с очевидными делениями. Очень часто разделение блоков реализуется за счёт больших отступов и/или слабых границ и фонов. Отступы между текстовыми блоками должны быть соразмерны размерам текстовых блоков (не очень тавтологично получилось?). Т.е. так, чтобы расстояние между текстовыми блоками не отрывало их друг от друга по смыслу. Примеры не перегруженных сайтов
Высота строки должна быть не слишком большой, чтобы не спутать её с разделением абзаца и не слишком маленькой, чтобы текст не перестал быть нечитабельным. Рекомендую пропорцию от 3×2 до 5×3. Например, если размер шрифта равен 12px, то высоту строки можно ставить 18—20 px. Раньше, в печати, абзацы отделяли красными строками. В печати это допустимо, поскольку с бумаги читать гораздо легче, чем с экрана. В электронных документах для разделения абзацев используют отступы между самими абзацами. Отступы дают возможность легко отличить, где заканчивается абзац, не только в начале строки но и в её конце. Расстояние между абзацами следует ставить в диапазоне от высоты шрифта до высоты строки. Расстояние должно чётко указывать на разделение абзацев, но не должно совсем разорвать их взаимосвязь. Расстояние от заголовка и до начала текстового блока должно быть равно расстоянию между абзацами, а расстояние от конца текстового блока до следующего заголовка должно быть примерно в два раза больше, чем расстояние от заголовка до начала текстового блока. Это делается для того, чтобы обозначить принадлежность текста к определённому заголовку. Существующие настройки по-умолчанию во всех браузерах неприемлимы, поскольку они подразумевают равные расстояния от заголовка до другого содержимого сверху и снизу. 
4. ТаблицыОсновные свойства таблиц которые не помогают а только мешают воспринимать информацию: вертикальное выравнивание и ужасные рамки. Во-первых вертикальное выравнивание должно быть соответствующим содержимому, содержимое обычных ячеек долно иметь выравнивание по верху, содержимое заголовочных ячеек — по центру. Причём, если в горизонтальных заголовочных ячейках допустимо центрированное горизонтальное выравнивание, то в вертикальных заголовочных ячейках — нет. Рамку таблицы можно создать двумя способами: - Использовать свойство border и border-collapse: collapse для таблицы.
- Использовать разный фон для таблицы и ячеек таблицы, при этом border-collapse: separate, а расстояние между ячейками задаётся с помощью border-spacing.
Отступы у от границы ячейки до её содержимого должны быть не меньше половины высоты строки абзаца. А текст в заголовочных ячейках всегда должен отличаться либо жирностью, либо размером шрифта. В идеале, каждая нечётная строка таблицы должна отличаться фоном от чётной строки. Реализацию нужно согласовывать с программистом. Не стоит так же забывать и про заголовок самой таблицы (тэг <caption>). Кстати, рамка у caption во втором варианте таблицы (с помощью background) выглядит лучше. Пример, вёрстки упомянутых в статье элементов. www.seleckis.lv/wp-content/uploads/2008/02/markupr1.html
Продолжение следует… seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi
| 
