Статьи / Веб-Дизайн / Подбор шрифта и верстка текста

  2008-11-04 11:53

1. Для чего это нужно



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



2. Термины



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



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



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



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



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



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



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



3. Уместное использование



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



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



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



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























Заголовок Times

Заголовок Arial
текст этой ячейки набран гарнитурой Times при размере в десять пунктов и при нормальном начертании. текст этой ячейки набран гарнитурой Arial при размере в восемь пунктов и при нормальном начертании.




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



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



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























Заголовок Times

Заголовок Arial
текст этой ячейки набран гарнитурой Times при размере в десять пунктов и при нормальном начертании. текст этой ячейки набран гарнитурой Arial при размере в восемь пунктов и при нормальном начертании.




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



Пример выворотки



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



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



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



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



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



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



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



4. Верстка в колонки



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



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



abcdefghijklmnopqrstuvwxyzabcdefghijklm



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



При использовании колонки для размещения ссылок держите ее ширину от 130 до 150 пикселей. Немного, но и немало.



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