Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS дизайн. Часть 24

Типография

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

Два океана

Простота типографии ведет к эффектному дизайну

Изумительная цветовая палитра «Двух океанов» обязана своим происхождением фото-
графии, которую Райан Симе сделал в Южной Калифорнии. Спокойные, как сам Тихий
океан, цвета и образы создают легкий контраст, который привлекает взгляд зрителя.
Работа «Два океана» не кажется кричащей или резкой. Частично это ощущение утонченности создается за счет простоты дизайна. Симе не стал злоупотреблять изображениями, цветами и шрифтами, а последовал философии Хемингуэя: «Уберите все вычурное». Он с удовольствием наблюдал, как дизайн оживает по мере того, как лишнее удаляется, а не добавляется.

Соглашения о шрифтах

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

Форма шрифта

Форма шрифта - это общий термин, включающий такие характеристики шрифта, как насыщенность, кегль и наклон. Насыщенность шрифта - это мера толщины отдельных литер. В CSS этой характеристике соответствует свойство font-weight. Разумеется, тут полно нюансов, и самый важный из них состоит в том, что не во всех шрифтах есть про-
межуточные варианты, согласующиеся с требованиями CSS. Более того, даже если шрифт обладает вариантом с нужной насыщенностью, браузер не
всегда сможет его отобразить.
На практике можно всегда быть уверенным в наличии по крайней мере двух видов начертания шрифта (normal и bold). В реальности оказывается, что насыщенностей всего две: полужирная и нормальная.
Под кеглем шрифта понимается ширина литер, составляющих этот шрифт. Встречается узкое (condensed), нормальное и широкое (expanded) начертание. В CSS для этой характеристики есть свойство f o n t - s t r e t c h . Однако оно не используется, потому что ни один из распространенных браузеров его не поддерживает.
Еще одной характеристикой шрифта является наклон, он соответствует свойству CSS f o n t - s t y l e . Существует два вида наклона:
• Italic (курсив) - специально разработанная модификация прямого шрифта с дополнительными «завитушками», как при рукописном начертании;
•f Oblique (наклонный) - модификация прямого шрифта, отличающаяся от курсива, поскольку она разработана не специально, а просто повторяет рисунок прямого шрифта, но с наклоном основных штрихов. Многие люди употребляют термин italic
там, где на самом деле имеется в виду oblique.
У свойства f o n t - s t y l e есть четыре возможных значения: n o r m a l , i t a l i c , o b l i q u e и i n h e r i t .

Контрастность шрифта


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

Цвет шрифта


Под цветом шрифта (type color) в полиграфии понимают общий оттенок блока текста. У светлых шрифтов типа Helvetica Light светлый цвет, поскольку наносится очень мало краски; насыщенные же шрифты типа Cooper или Arial Black выглядят гораздо темнее, потому что краски наносится больше. Но цвет шрифта зависит не только от гарнитуры, на восприятие влияют и другие факторы, например межбуквенный интервал (кернинг) и межстрочный интервал (интерлиньяж).
Помимо контрастности, для зрительного восприятия шрифта важен еще цвет, которым печатаются литеры. Оттенок шрифта (type hue) играет заметную роль, так как наряду с контрастными шрифтами дизайнер может еще выбирать и контрастные цвета.
Вообще говоря, не рекомендуется злоупотреблять многоцветием при выборе шрифтов. Бывают, конечно, случаи, когда наличие большого числа цветов оправдано, - скажем, на сайтах, предназначенных для детей. Но обычно переизбыток цветов свидетельствует о непрофессионализме.

Шрифты в «Двух океанах»


Стремление Симса к простоте отчетливо видно на примере работы «Два океана». Весь HTML-текст отображается шрифтом Trebuchet, а на случай его отсутствия указано еще несколько шрифтов без засечек:

body {font: llpx; «trebuchet ms», arial,
helvetica, sans-serif;}


Trebuchet - это шрифт без засечек, входящий в базовый комплект шрифтов Miscrosoft для Web и поставляемый также в комплекте с Microsoft Office. Это значит, что он распространен достаточно широко, хотя предусмотреть его отсутствие тоже необходимо.
Выбор оттенка и контрастности Выбор оттенка и контрастности шрифта критически
важен - не только для поддержания целостности дизайна, но и с точки зрения удобочитаемости, то есть легкости восприятия текста.
По традиции рекомендуется выбирать высококонтрастные цвета для фона и переднего плана, например черный текст на белом фоне или наоборот. Предполагается, что наряду с другими приемами это повысит удобочитаемость.
В «Двух океанах» Симе отошел от этой традиции и выбрал для основного текста очень изысканный желто-коричневый цвет:
color: #9F927F;
Контраст с белым фоном в этом случае относительно слабый. Интересно, что ссылки и в основном тексте, и по краям отображаются более темным оттенком синего цвета. Многие дизайнеры предпочли бы использовать такой цвет для основного текста из-за
более высокой контрастности.
Надо признать, что при печати основного текста синим цветом контрастность улучшилась, но утонченный контраст, достигаемый за счет использования
желто-коричневого цвета, выглядит приятнее. Именно выбор этого цвета и придает странице такой успокоительный вид, из-за чего и читать ее проще.
Более того, употребление синего цвета для выделения ссылок как внутри текста, так и в списке добавляет всему дизайну контрастности. И заодно делает страницу более интересной - подход тонкий, но в данном случае весьма эффективный.
Контрастность играет роль и при выборе инверсных цветов для заголовка. Текст внутри изображения отображается белым шрифтом на полупрозрачном фоне
поверх фотографии. А сразу под ним расположен подзаголовок, напечатанный тоже белым шрифтом, но на темном желто-коричневом фоне. Это создает интересный переход форм и движение, усиливающее общий эффект.
Текст в основной части страницы напечатан шрифтом размером 11 пикселей, равно как и ссылки в главном списке. Для дополнительных же ссылок выбран шрифт размером 9 пикселей, чтобы отразить их меньшую значимость. Удивительно, что может сделать раз-
ница всего в два пикселя, когда используется в сочетании с переменной контрастностью.

Использование размера и насыщенности шрифта для создания контрастности


Возвращаясь к заголовку на рис. 5, хочется обратить ваше внимание на то, что в этом графическом тексте Симе для создания контрастности воспользовался размером и весом шрифта. Слово ess набрано маленькими буквами и контрастирует с начальными заглавными буквами в словах Zen Garden. Подзаголовок ниже дает прекрасный пример создания контраста за счет насыщенности: слово beauty в нем выделено полужирным шрифтом из окружающего текста, отображаемого обычным шрифтом.
Тот же прием прослеживается и в карт - фотоинке непосредственно под фотографией, где первые семь слов напечатаны полужирным шрифтом, а остальные - нормальным.

Соотношение заголовков и текста


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

Учитесь простоте


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




css






css

css

Добавить статью в:
0



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



Поиск

***

Онлайн
Всего на сайте: 34
Гостей: 18
Пользователи: - отсутствуют
Роботы: robot Bot, Google Bot, robot Bot, robot Bot, robot Bot, Web Core / Roots, Yahoo Bot, robot Bot, crawl Bot, robot Bot, Google Bot, robot Bot, robot Bot, Yandex Bot, robot Bot, robot Bot

20-ка посетителей: freidauq16, Jeffreystodo, aapedkag, AlvinGog, JamesCax, mulov.gBep, Xacvoo89uymywof, rafaelnj69, AgnesAccony, marjoriefk60, BorisPa, deannrt2, jaclynie1, normatk11, ArturadruzWes, atortetsspelo, wapedkag, jerisb60, agrohimfcy, Nadejdatub


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги