Личный кабинет
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 пикселей. Немного, но и немало.
Вот в принципе и все о верстке, хотя я не затронул такие моменты, как балансировка цветов, использование плашек, рамок, линеек. В общем тема необятная и если эта статья заденет за живое я обязательно продолжу.
О шрифтах, их особенностях и об их разработке написанно немало, однако такая тема, как их уместное использование - осталась в тени. И вполне незаслуженно. Правильно подобранный может сделать многое, если не сказать, что почти все, на вашей веб-страничке. При правильном использовании шрифтов и при безупречной верстке, можно водить пользователя по сайту и подсознательно заставлять его углубляться все дальше и дальше в ваш проект. Большинство начинающих дизайнеров, даже не догадываются о тех богатых возможностях, которые кроются в шрифтах. Дабы рассеять неясность в столь замечательных кругах я и написал эту статью.
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 пикселей. Немного, но и немало.
Вот в принципе и все о верстке, хотя я не затронул такие моменты, как балансировка цветов, использование плашек, рамок, линеек. В общем тема необятная и если эта статья заденет за живое я обязательно продолжу.
- Фиксированный размер шрифта на Ваших веб-страничках
- Фиксированный размер шрифта на Ваших веб-страничках
- SEO оптимизация текста
- SEO оптимизация текста
- Секреты текста баннера
- Фреймы в HTML документах (2008-11-04)
- 10 признаков дурного тона в web-дизайне (2008-11-04)
- 800 и 1024. Пиксели или проценты? (2008-11-04)
- Как работает формат JPEG? (2008-11-04)
- О композиции в дизайне (2008-11-04)
- Психология в дизайне (2008-11-04)
- Шрифты (2008-11-04)
- Как сделать качественный веб-сайт (2008-11-04)
- Какой вид дизайна выбрать? (2008-11-04)
- Выпадающие меню с помощью CSS (2008-11-04)
- Создание веб-страниц для различных разрешений м... (2008-11-04)
- Веб-дизайн и анимация (2008-11-04)
- Немного об index.html (2008-11-04)
- Психология дизайна (2008-11-04)
- Что такое стильный web-сайт? (2008-11-04)
- Web дизайн :: Что такое хорошо и что такое плохо (2008-11-04)
- Лево, Право или Центр? (2008-11-04)
- Оптимизация изображений в формате JPG (2008-11-04)
- Альтернативные редакторы Flash (2008-11-04)
- Что же такое web-дизайн? (2008-11-04)
- Сайты для тинейджеров: правила дизайна (2008-11-04)
- Маленькие проблемы больших таблиц - HTML (2008-11-04)
- Особенности web-дизайна (2008-11-04)
- Подсказки и советы для веб-мастеров - Топ 100+ (2008-11-04)
- Единицы измерения CSS (2008-11-04)
- Состав изображений (2008-11-04)
- FLASH - ЧТО МОЖЕТ БЫТЬ ХУЖЕ? (2008-11-04)
- FAQ по графическим форматам файлов (2008-11-04)
- ПО необходимое для web-дизайнера (2008-11-04)
- Должностная инструкция веб-мастера (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Orange color: теория и практика (2008-11-04)
- Расположение баннера (2008-11-04)
- Советы "чайникам" (2008-11-04)
- С чего начать (2008-11-04)
- С чего начать (2008-11-04)
- Организация - вот ключ к успеху (2008-11-04)
- Обзор Gif-аниматоров (2008-11-04)
- Каскадные таблицы стилей (преимущества и недост... (2008-11-04)
- Фирменный шрифт (2008-11-04)
- Главные ошибки в web-дизайне (2008-11-04)
- CSS - Для чего нужны таблицы стилей? (2008-11-04)
- Таблицы или слои, что лучше? (2008-11-04)
- О скриптах (2008-11-04)
- Изучаем HTML (2008-11-04)
- Применение нескольких классов к элементу в CSS (2008-11-04)
- Создание сайта с помошью фреймов (2008-11-04)
- Основы работы со слоями в CSS (2008-11-04)
- 10 полезных советов (2008-11-04)
Быстрый переход