Как-то относительно давно интернет-пространство было маленьким, его страницы были на 100% текстовыми, или около того. Прошло время, и теперь в Интернете можно не только читать, как мы читаем газету, но и смотреть, как телевизор, слушать, как радио, а также просто рассматривать, как картинную галерею.
Тем не менее, львиную долю информационного потока человек получает, именно читая информацию на сайтах, представленную в текстовом виде, и не важно, что это: анонсы новостей, анекдоты или отрывки из диссертации. Посему, какой бы сайт Вы не создавали, особое внимание необходимо уделить тому, как будут отображаться тексты: какими цветами, шрифтами и размерами.
Просматривая многие эскизы дизайнов сайтов, часто замечаю, что форме некоторые дизайнеры уделяют значительно больше внимания, чем содержанию. Самый распространенный прием, который я не одобряю больше всего, — отношение к тексту, как к текстуре. Это значит буквально следующее: очень мелкий текст, размером в 10 пикселей, не больше, и пониженный контраст между текстом и фоном, например, светло-голубой текст на темно-сером фоне. При продолжительном чтении важно, чтобы контраст между фоном и текстом не был стопроцентным, но и чрезмерно снижать его не стоит: глаза будут быстро уставать в попытках вычленить буквы из фона.
Шрифты
Основной текст должен с наибольшим комфортом для глаз читаться, поэтому опыт веб-дизайнеров, помноженный на ограничения, принятые в Интернете, сформировал список самых популярных шрифтов. Какие могут быть ограничения, спросите Вы? Браузер, получая указание с веб-сервера отобразить страницу шрифтом Tahoma, будет искать именно этот шрифт не на сервере, а на компьютере пользователя. Если не найдет заданный вариант, то будет искать что-то похожее, а если вдруг поиски не увенчаются успехом, возьмет в качестве используемого шрифта либо тот, что указан в его собственных настройках, либо вообще первый попавшийся. Именно по этой причине для основного текста нельзя указывать шрифт, которого не будет на 70% компьютеров, если, конечно, Вы заинтересованы в том, чтобы браузер пользователя показывал тексты так, как Вы задумали.
Размер
Размер шрифта для основного текста должен быть не менее 12 пикселей, а по моему убеждению — не менее 14-ти, если это шрифт без засечек, такой как Tahoma, и не менее 14 пикселей, если шрифт с засечками, например Times New Roman.
Шрифты с засечками (слева) и без засечек (справа)
Естественно, если дизайн создаваемого Вами сайта будет в стиле Web 2.0 — то размер смело можно увеличивать вплоть до 20-ти.
Выравнивание
Текст может быть выровнен по левому краю, по правому и по обоим краям. В первом случае неровным остается правый край текстового блока, во втором — левый, а в третьем оба края ровные. Конечно, привлекательнее всего, когда текст ровный и слева, и справа. Но если колонка, в которую мы встраиваем текст, слишком узкая, при полной выключке (т.е. когда выравнивание по обеим сторонам) в тексте образуются неприятные дырки между словами (т.к. слова до настоящего времени, не разрываются на слоги для их переноса). По правому краю выравнивать большие куски текста очень нежелательно: их просто неудобно читать, так как глаз устает каждый раз искать начало строки.
Продолжение: Правильный текст в веб-дизайне. Часть 2.
Статью прислал: Евгений Мирошниченко, http://www.mirash.ru/
Постовые:
- Меню — один из самых важных элементов веб-сайта. Правильно создать меню на CSS не сложно. Все подробно описано. Сделает даже начинающий.
- Какой уважающий себя веб-мастер не умеет обращаться с Linux? Как, Вы все еще не освоили эту операционку? Тогда срочно качайте бесплатные курсы Linux, пока друзья не засмеяли :)
- Решили заказать сайт? Тогда воспользуйтесь услугами WEBANET. Большинство веб-студий предлагают решения на базе кустарных, самописных движков. За те же деньги в WEBANET Вам сделают сайт на профессиональной CMS, такой как Bitrix, DLE и Joomla.
а какие шрифты порекомендуете для заголовком и основношго контента?
sdxp [#comment-2085], я бы рекомендовал делать так. Основной контент — шрифт без засечек, который есть у большинства посетителей (Arial, Verdana). Заголовки — любой популярный шрифт — с засечками или без. А в шапке можно использовать вообще любые шрифты, только надписи нужно сохранить в jpg/png. По поводу размера — текст должен быть 12-14px, заголовки — больше основного текста, в пределах разумного.
А из не стандартных какие рекомендуйте ?
Валерий [#comment-2089], Те, что на картинке + Tahoma. Если дизайн позволяет, можно также использовать Courier New, но его следует использовать только в крайнем случае, например, для отображения на странице фрагментов кода (C/C++, Java, HTML,…). Итого «стандартных» шрифтов реально штук 5 — остальных может не быть у многих посетителей.
Хотел бы спросить как специалиста насчет цвета текста статей на одном своем блоге – haveall точка net
Все бьюсь над цветом и никак не могу прийти к окончательному решению, то слишком серо, то слишком блекло, то наоборот режет глаз. Может, подскажите какой-нибудь вариант решения? Или просто на свой вкус что порекомендуете? Буду очень признателен.
Заранее спасибо!
Ланайан [#comment-2093], на темном фоне всегда так будет. Используйте белый фон и шрифт #313131 или около того.
Да, в том то и дело, что общий шаблон переделывать неохота. Если поставить белый фон под статьи, то он совсем не вяжется с сайдбаром и шапкой, тогда надо дизайн менять полностью, хех. Неувязка((
Ланайан [#comment-2095], в блоге главное — не дизайн, а контент. Да и дизайн у Вас очень хороший, текст нормально воспринимается. Не обращайте внимания на такие мелочи, если их исправление вызывает сложности.
Спасибо!
Да, из этого блога хочу сделать конфетку, где буду выкладывать самое интересное, поэтому и придираюсь к каждой мелочи.
Ладненько, над ним еще буду работать, пока все-таки еще сыроват))
Спасибо за совет!
Вопрос по поводу размеров шрифтов. Как я понял, рекомендуются 12-14px. Это для основного текста? А как быть с тексом в сайдбарах? Особенно, если это краткие анонсы или иные группы ссылок? Ширина сайдбара уже основного текста, поэтому возникает желание запихнуть туда побольше, а сделать это без ухудшения визуального восприятия мне кажется можно только за счет уменьшения шрифта в сайдбарах. До каких размеров? 9-11px мне кажутся вполне читаемыми. Или нет?
Кубачев [#comment-2100], в сайдбаре не должно быть много текста. Если тем не менее все необходимое не умещается, можно сделать два сайдбара. Для кратких анонсов сайдбар не годится — тут нужна отдельная колонка с анонсами, достаточно широкая, чтобы в ней все уместилось. Обычно размер шрифта в сайдбаре совпадает с размером основного текста.
а зафига раньше «страницы бИли» ?
Гость [#comment-2158], опечатка :)
От выбранного шрифта (стиль и размер) зависит общее впечатление от сайта. Поэтому к этому выбору нужно подойти со всей серьезностью.
> Основной текст должен с наибольшим комфортом для глаз читаться,
> поэтому опыт веб-дизайнеров
Вот больше всего огорчает, когда дизигнеры ограничивают такую замечательную возможность на сайтах, как увеличении или уменьшение шрифта путем перемотки колесика мышки и зажатие кнопки контрал на клаве.
Белоногов Илья [#comment-2241], а разве ее как-то можно заблокировать?
Под заблокировать, в данном случае, имеется ввиду указывать конкретные значения в пикселях, а не в em и тогда либа браузер не может их увеличить или может, но дизайн просто разбегается — как тараканы от тапочка ;)