То, что выбор того или иного шрифта на сайте может оказывать значительное влияние как на внешний вид страниц, так и на впечатление от всего сайта в целом, ни для кого не является секретом. Тем не менее, выбор правильного шрифта – скорее искусство, чем наука. И если выбор оказался неверным, то вся Ваша работа по созданию сайта, наполнению его контентом, продвижению может пойти насмарку. Особенно когда Вы имеете дело с Web 2.0.

Какие же шрифты предпочтительны для использования с Web 2.0? На какие их особенности следует обратить внимание? И есть ли какие-нибудь официальные стандарты для шрифтов, используемых в Web 2.0?

Что касается стандартов, то едва ли они вообще существуют. Хотя бы потому, что для самого понятия Web 2.0 нет каких-либо официальных стандартов. Однако, определенные особенности безусловно имеются.

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

Размер шрифта также имеет значение. И хотя крупные шрифты остались в прошлом, сегодня они выглядят своеобразно и в некоторых случаях способны захватывать внимание. Шрифты – это один из элементов дизайна, которые наиболее часто являются источником проблем, и на которые обычно склонны жаловаться посетители сайтов. То эти шрифты слишком корявые, то слишком маленькие, создающие недостаточный контраст между текстом и фоном, и т.п.

В Web 2.0 основными требованиями к шрифтам являются стандартный или маленький размер букв и удобочитаемость. Наиболее популярным считается размер 14-16 пунктов при размере экрана дисплея 1024х768. Более крупные размеры букв делают сайт более удобочитаемым.

Некоторые из типов шрифтов, используемых в Web 2.0, имеют различные характеристики. Вот несколько таких предпочтительных шрифтов.

Закругленные шрифты

Это шрифты, имеющие скругленные концы, такие как Arial Rounded, FF Cocon и Helvetica Rounded. Данные шрифты выглядят мягче, и легче для глаз. Они придают современный внешний вид и впечатление заголовку или статье.

Классические шрифты

Есть шрифты, которые и сегодня остаются весьма полезными и популярными в Web 2.0. Классика легко узнаваема и удобна в работе. Среди наиболее используемых – Helvetica (который можно найти на большинстве вебсайтов), News Gothic, FF Meta (стандартный или жирный), Avenir и Interstate.

Футуристические шрифты

В Web 2.0 есть сайты, делающие акцент на новизне и футуристическом внешнем виде. Это ответ на новые технологические веяния. Такие шрифты часто позиционируются как techno и характеризуются простотой, с резкими и твердыми краями. Вот некоторые из них: Digital Sans, ITC Bauhaus, Agency, Handel Gothic и FF Dot Matrix.

Шрифты с засечками (Serif)

Шрифты Serif все еще популярны, однако их внешний вид претерпел ряд изменений. Например, Courier теперь используется гораздо реже. А наилучшим вариантом является, вероятно, American Typewriter, который является более стилизованной версией. Другие хорошо работающие шрифты – это Clarendon и ITC Officina (semi-serif).

Шрифты без засечек (Sans Serif)

Шрифты Sans Serif превосходны для использования в Web 2.0. Эти шрифты имеют чистые и обтекаемые формы и хорошо работают на большинстве вебсайтов. В их число входят, например, Frutiger и Helvetica.

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

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

30 эксклюзивных техник СSS навигации

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

Layout Gala — 40 различных базовых CSS-конфигураций вывода основных элементов разметки, как фиксированной так и «резиновой ширины».

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

Intensivstation — здесь представлены 16 различных вариантов CSS базовой разметки
 

Dynamic Drive's CSS Library — Один из ведущих источников кодинга и скриптов предлагает 12 CSS базовой разметки.

CSSCreator.com — Вместо того, чтобы выдавать готовые шаблоны, CSS — Сreator позволяет вам вводить информацию о разметке, которую вы хотите создать, и потом генерирует код. Вы сами устанавливаете ширину страницы, высоту элементов и их бэкграунды.

Layout-o-matic — ресурс очень похож на CSS-Creator. Вы выбираете несколько переменных и получаете код базовой CSS-разметки.

The Layout Reservoir — BlueRobot.com обеспечивает CSS для 3 различных видов разметки.

Code Sucks.com — предлагает более чем 90 видов различных разметок, как фиксированной так и «резиновой» ширины.

CSSeasy — В CSSeasy вам на выбор предлагается 8 шаблонов базовой CSS конфигурации.

Tomorrow's Laundry — Этот ресурс придется по душе разработчикам тем для WordPress. Четыре различных варианта разметки обеспечат вас основными стандартными блоками для ваших дизайнов тем.

WordPress Theme Generator— Еще один ресурс для разработчиков WordPress, генератор темы позволит вам выбрать желаемый тип разметки и сгенерирует базовый код.

Yahoo! Developer Network! — YUI CSS-сетки станут основой ваших решений как для фиксированной, так и для «резиновой» верстки.

SSI Developer — В SSI Developer есть множество разметок на две и три колонки. Каждая разметка указывает браузеры, в которых она будет работать корректно.

Mollio — Mollio предлагает несколько привлекательных разметок, но с поправкой на то, что они могут некорректно выглядеть в IE7.

CSS Tinderbox — Здесь вы найдете четыре простых, но привлекательных разметки.

Mitch Bryson — Mitch предлагает на выбор восемь различных CSS-разметок.

Firdamatic — Еще один инструмент на подобии CSS Creator и Layout-o-matic, Firdomatic позволит вам выбрать несколько базовых конфигураций, и затем сгенерирует код разметки.

Strictly CSS — Strictly CSS обеспечивает десять различных вариантов позиционирования, основанных на одном и том же HTML коде.

Маx Design — На Маx Design доступны двадцать три различных варианта позиционирования в нескольких различных категориях.

Glish.com — Перечень ссылок на большое количество CSS-разметок.

mycelly.com — Двенадцать различных разметок.

Little Boxes — Еще шестнадцать вариантов CSS.