0/5

Шрифт – лицо вашего сайта

Шрифт – лицо вашего сайта
время публикации: :  01 апреля 2013 года
Что привлекает ваш взгляд при посещении вебсайта? Большинство, наверное, ответит – картинки.  Безусловно, на сайте находится большое количество визуальных объектов. Но, возможно, самым заметным и основополагающим визуальным аспектом сайта является типографика.  Текст – это способ получить информацию и он должен быть понятным, привлекательным, четким.

Типографика может как украсить сайт, так и полностью испортить его восприятие. CSS3 недавно разработали новый инструмент под названием «@font-face». Этот инструмент позволяет дизайнерам загружать на сайт приемлемые для сети шрифты.

Почему это важно? Для ответа на этот вопрос обсудим историю сетевой типографики.

Не так давно в интернете использовались только 18 шрифтов, так как «Windows», «Mac», и «Linux» выходили с предустановленными 18 шрифтами. Многие из них нам хорошо знакомы - Arial, Comic Sans MS, Courier New, Georgia, Impact, Tahoma/Geneva, Times New Roman, Trebuchet MS, Verdana, Webdings. Выбор оригинального шрифта был рискованным шагом для дизайнера, так как компьютер посетителя вебсайта мог не прочитать  необычный код.  В таком случае, компьютер был вынужден отобразить шрифт, наиболее близкий к оригиналу, или же загрузить страницу браузера по умолчанию.

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

Простой выход? Не совсем. Если текст превращается в изображение, то его трудно обновлять кому-либо, кроме самого дизайнера. К тому же,  такой текст не читается поисковыми машинами, что осложняет SEO («Search Engine Optimisation», поисковую оптимизацию) сайта. Поэтому часто приходится выбирать между хорошим дизайном и оптимальным оформлением для поисковых машин.

Вскоре появился сервис «Google Web Fonts», хранилище для приемлемых в сети шрифтов, который мог применяться с помощью очень простого отрывка кода. Он позволял любому компьютеру, посещающего сайт, читать его в том виде, каким он был задуман. В результате арсенал дизайнеров был расширен до более чем 600 семей шрифтов. С помощью «Google Web Fonts» стало доступным разнообразие комбинаций шрифтов, шаблонов шрифтов и конечно же, богатство возможностей изуродовать свой сайт с помощью неудачно подобранного шрифта.

Но из многих тысяч шрифтов, доступных бесплатно или по лицензии, стали доступными лишь около 600. Выбор был опять же ограничен стандартными шрифтами «Google»  или же кодировкой шрифта в формате изображения. Ответом CSS3 на эту проблему стала «@font-face».

Теперь, все что требуется для бесконечного разнообразия шрифтов, это кусок CSS кода и загрузка на сервер приемлемого для сети шрифта. Например, сайт http://lostworldsfairs.com/eldorado/  полностью стилизован с помощью CSS @font-face.  Эта технология оживляет дизайн сайта, делает текст легко редактируемым и доступным для поисковиков.

Единственная проблема, которую осталось решить -  что понимать под «приемлемыми в сети» штрифтами? Бесплатные шрифты? Лицензионные? Как вообще понять, подходит ли шрифт для использования в сети? Существует несколько сайтов - http://www.dafont.com, http://www.1001freefonts.com/ и http://www.fontspace.com/, содержащих большой набор приемлемых шрифтов. Многие из них имеют пометки, поясняющие то, как шрифты могут использоваться – лично, для коммерческих целей, бесплатно, по лицензии итд. Расширения .ttf, .woff и .eot указывают на используемые в сети шрифты. Для лучшей совместимости с браузерами и платформами, лучше всего отметить все три версии в  CSS  файле на вашем сайте и сделать их доступными на сервере вашего сайта.

Другими примерами выдающейся типографики, на наш взгляд, являются следующие сайты:

http://lostworldsfairs.com/atlantis/

http://lostworldsfairs.com/moon/

http://lifeingreenville.com

http://viljamis.com/

http://www.7daysinhavana.com/

http://www.hellobar.com/?v=b

http://buildresponsively.com/

Статья подготовлена на основе материала: http://www.business2community.com/online-marketing/the-font-face-of-your-site-0443658

1
Реклама на New Retail. Медиакит