Главная
К библиотеке

2. Термины.
Первым делом согласуем наши знания на уровне терминов. Разложим все по полочкам и будем говорить на профессиональном языке.

Шрифт - гарнитура определенного кегля и начертания (упустим межсимвольные интервалы и интерлиньяж, они нам не пригодятся.).

Кегль - размер гарнитуры подобранный для данного шрифта. Измеряется в пунктах.

Начертание - стиль написания гарнитуры. Например - полужирный, италик (наклонный) или одновременно и то и другое.

Гарнитура - совокупность литер (символов), объединенных одним стилем и общей идеей. Например, Times или Arial.

Есть также такие параметры, как межсимвольный интервал и интерлиньяж (межстрочный интервал), но из-за расхождений в реализации css ведущими броузерами, нам этими параметрами придется пользоваться только в Photoshop. Ну, уж если разговор пошел об этой замечательной программе, то нельзя не упомянуть про сглаживание (anti-aliased). При включении этого параметра ваши тексты будут немного размываться по краям и тем самым помогут вам избавиться от угловатости графики.

С терминами техническими разобрались, теперь определимся с описанием гарнитур. Все они делятся на гарнитуры с засечками и без них. Теперь не трудно догадаться, что значат непонятные serif и sans serif, так часто виденные вами после названия гарнитуры (взгляните на MS Serif и на MS Sans Serif, и вы поймете, о чем я).

Вот в принципе и все теперь переходим к изучению азов шрифтового дизайна.

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

Гарнитуры с засечками намного более функциональны. Благодаря именно своим засечкам, они позволяют набирать тексты небольшого размера (в 10-12 пунктов) с потерей читабельности равной нулю. Но, к огромному сожалению, такие шрифты в своем большинстве не выразительны. Для заголовка лучше выбирать рубленый шрифт. Ну, а если, какие-то неведомые силы (в виде стилиста например) не позволяют вам менять шрифт, тогда стоит прибегнуть к какому-нибудь приему выделения, о которых я расскажу чуть ниже.

Существует еще и третий вид гарнитур. Декоративные. При работе с ними будьте предельно осторожны! При всей своей красоте и изящности у них есть один сильный недостаток - их трудно читать. Чаще всего декоративные шрифты используются в логотипах и для создания внутреннего настроения на веб-странице (например, страницы с древнерусской тематикой используют старославянские гарнитуры и т.д.).

Теперь проведем маленький, но очень наглядный эксперимент, который продемонстрирует особенности таких известных гарнитур, как Times (с засечками) и Arial (рубленый).

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

Теперь, как я и обещал чуть выше, мы поговорим о выделении текста на общем плане страницы. Наиболее простой способ выделения заголовков - изменение гарнитуры и кегля заголовка от основного текста (также менять можно и цвет с начертанием).

Второй способ выделения текста (из наиболее приемлемых в интернете) это изменение цвета фона для всей колонки текста. Возьмем нашу табличку и поставим туда серый фон.

Куда теперь упал ваш взгляд?

Ну и наконец, самый проверенный способ. Это выворотка, или попросту говоря, инверсия цветов. Вы берете текст и задний фон и меняете их цветами, как например здесь:
Пример выворотки

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

Теперь я немного расскажу о приемах выделения текста на общем фоне публикации. Их немного. Это отчасти обусловлено тем, что менять гарнитуру или кегль посреди текста, а потом возвращать обратно просто противопоказано! При выделении текста мы будем пользоваться лишь начертаниями.
Первое начертание - полужирный текст. Очень хороший прием, однако, использовать его надо умеренно. Выделяйте полужирным начертанием лишь отдельные слова и никогда не выделяйте фразы. Также не стоит, и перебарщивать, при большом количестве полужирных слов страница начинает пестрить, и перестает радовать глаз.

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

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

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

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

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

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

abcdefghijklmnopqrstuvwxyzabcdefghijklm

Именно такая ширина является оптимальной для данного шрифта. Однако при размере стандартной страницы в 620 пикселей это слишком много. Если вас это не устраивает, возьмите самое длинное слово вашего текста и напечатайте его полтора раза (как в случае с алфавитом).
При использовании колонки для размещения ссылок держите ее ширину от 130 до 150 пикселей. Немного, но и немало.

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

(c) Домников Евгений http://wdc.lgg.ru/