6 способов улучшить типографику на сайте

html

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

Введение.

Типографика — это искусство рисования букв, слов, параграфов и их взаимодействие между собой. Многие дизайнеры и разработчики отождествляют типографику с выбором шрифтов, а другие просто забыли, что 95% веб-дизайна – это типографика. Очевидно, что если типографика на сайте – это 95% веб-дизайна, то она должна быть на переднем плане в сознании у каждого дизайнера и разработчика. Вот 6 способов улучшить свою веб типографику.

1. Понимание основ печатного дела (типографики).

Основы печатного дела важны для всех дизайнеров, будь они дизайнерами для веб или нет.

html

Ниже приведены некоторые типографические определения, которые каждый дизайнер/разработчик должен понимать, когда имеет дело с типографикой. Этот перечень отнюдь не является всеобъемлющим.

Ascender: любая часть строчной буквы, что возвышается над линией.

Baseline: линия, на которой лежит текст.

Cap Height: верхняя часть линии.

Descender: любая часть строчной буквы, что падает ниже базового уровня.

Kerning: ширина пространства между двумя заданными символы, используемая для достижения оптимального вида. Как правило, kerning происходит автоматически по заданному применению, но надо понимать, что Photoshop (или другое программного обеспечения для редактирования изображений) не всегда обеспечивают kerning так же, как и веб-браузер.

Leading: высота расстояние между любыми двумя линиями раздела. Оптимальная величина leading, как правило, в половину высоты размера шрифта.

Letter Spacing: по умолчанию — ширина пространства между любым заданным набором символов. Это также иногда называется «Tracking.»

Ligatures: специальные глифы, которые сочетают два отдельных символа в один. Ligatures зачастую создаются автоматически при проектировании в таких программах как Photoshop и InDesign, но, как правило, не оказывались в виде отдельных глифов в веб-браузерах.

Line Height: высота строки. Высота линии является наиболее эффективным способом контроля вертикального ритма печати. Например, если используется шрифт размером 12px с обычными текстовым телом, должно быть примерно 6px leading.

Measure: ширина данной строки. Оптимальное количество – 60 символов. Но это зависит еще и от применяемых шрифтов, у которых различные расстояния между буквами и словами.

Rendering: отображения шрифта различными браузерами. Различные браузеры одни и те же шрифты отображают по разному. В это Вы можете убедиться, открывая наш сайт различными браузерами, например Opera, IE, FireFox и т.д.

Weight: легкость шрифта. Учитывая отображения сайтов online различными браузерами, то лучше придерживаться двух типов: нормальный и полужирный.

Word Spacing: ширина пространства между двумя заданными словами.

X-Height: высота текста между baseline и meanline.

Типографический масштаб.

html

Чтобы создать эффективный масштаб, лучший метод, который я нашел — это использовать единицы измерения размера «EM». Метод устанавливает размер по отношению к базе того или иного документа. В примере, приведенном ниже, базовый размер шрифта 12 пикселей, который устанавливает стандартный размер шрифта для параграфа в 15 пикселей.

body {
font-size: 12px;
}

h1 {
font-size: 5.0em;
}

h2 {
font-size: 4.0em;
}

h3 {
font-size: 3.0em;
}

h4 {
font-size: 2.0em;
}

blockquote {
font-size: 1.5em;
}

p {
font-size: 1.25em;
}

input {
font-size: 1.0em;
}

small {
font-size: 0.75em;
}

Вертикальный размер.

Вертикальный размер межстрочного интервала обеспечивает оптимальное расстояния для восприимчивости глаз. Исходя из опыта вертикальный размер лучше всего устанавливать в районе 1.5em.

html

Ниже приведен стандартный вертикальный размер, который я часто использую в своих сайтах на основе 960 grid system. Для достижения вертикального размера надлежащим образом, каждый параграф должен иметь margin или padding ниже эквивалента стандарта сетки базовой высоты.

body {
font-size: 12px;
line-height: 15px;
}

p {
margin-bottom: 15px;
}

2. Дизайн в браузере.

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

html

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

html

For a Beautiful Web

Andy Clarke, популярный дизайнер/автор недавно рекомендовал на конференции в Бостоне делать разработку сайтов в браузере. Изображения выше взяты из его выступления.

Лучший способ заниматься дизайном сайтов в браузере – это использовать сетку. Я включил в исходные файлы 2 разные сетки, каждая с 3 вариантами вертикальных размеров. CSS код ниже показывает простой способ развертывания одной из этих сеток тестирования путем замены фонового изображения или изображения в теле страницы HTML при помощи класса конкретной сетки, которую Вы выбираете. Просто добавьте указанный класс в тег body или в содержимое контейнера тега DIV, и Вы будете готовы проектировать в браузере.

.grid960base15 {
width: 960px;
line-height: 15px;
background: url(images/grid960base15.png) repeat-y;
}

.grid960base18 {
width: 960px;
line-height: 18px;
background: url(images/grid960base18.png) repeat-y;
}

.grid960base30 {
width: 960px;
line-height: 30px;
background: url(images/grid960base30.png) repeat-y;
}

.grid600base12 {
width: 600px;
line-height: 12px;
background: url(images/grid600base12.png) repeat-y;
}

.grid600base16 {
width: 600px;
line-height: 16px;
background: url(images/grid600base16.png) repeat-y;
}

.grid600base18 {
width: 600px;
line-height: 18px;
background: url(images/grid600base18.png) repeat-y;
}

Следует отметить, чтоб достичь хорошего вертикального размера, необходимо иметь четкий контроль над линией высоты. Кроме того, вы можете использовать эту сетку решений (ссылка: http://gridder.andreehansson.se/ ) для наложения любого веб-сайта с настроенной сеткой. Я считаю, это будет полезно, когда Вы не можете заменить фоновое изображение с одной из сетей.

3. Использование CSS Техники Замены Изображений.

Замена текста с картинками было стандартной практикой в веб-дизайне с 90-х. С принятием CSS в основных браузерах, начали появляться методы замены изображения, которые состоят не только в создании изображения и его размещении в местах текста. Из них первыми широко распространились Fahrner Image Replacement (FIR), но по мере того, как люди играли с заменой изображений CSS, они поняли, эта техника недоступна. Техника The Phark Image Replacement была первоначально задумана, как доступная замена классическим техникам FIR. Первый предложенный Mike Rundle of 9rules в 2003 году, Phark Image Replacement опирается на использование текстового отступа и фона изображения CSS-свойства для того, чтобы скрыть текст от пользователя, но оставить доступ для чтения экрана, и поисковые системы.

Для использования Phark Image Replacement, установите элемент контейнер (в данном случае, the DIVs) с определенной высотой и шириной. Затем установите фоновое изображение. Наконец, установите свойство текст-отступов -9999px. Это свойство сдвигает текст влево на 9999px, но это не приводит к увеличению прокручиваемой области, действительно заставляя текст исчезнуть.

html

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

4. Используйте технику «дополнительной» замены изображений.

Стандартная замена изображений идеально подходит для высоко декоративных ситуаций и меньшего количества текста. Что вы будете делать, когда хотите заменить текст для всего тела статьи? Что сказать о замене заголовка и сохранении этого текста? Ответом здесь является дополнительная техника замены изображений. Для всех целей существует три различных дополнительных техники замены изображений, доступных в это время (если вы знаете любые другие, пожалуйста, оставляйте их в комментариях): на основе Flash, Javascript, PHP.

Масштабируемая Inman Flash Replacement (sIFR)

Первым из методов дополнительной замены изображений, пришедших на смену, была масштабируемая Inman Flash Replacement (sIFR), первоначально разработанная Шоном Инманом как IFR, и впоследствии вышедшая дополнением к работе Майка Дэвидсона и Марка Вабена, которые в настоящее время поддерживают проект.

ЗА:

В основном четкий шрифт за счет сглаживания

Сохраняет оригинальный семантический и доступный текст

Изящно уменьшает первоначальный текст

Текст на выбор (частично)

Удобство сценария

ПРОТИВ:

Не подходит для крупных тел текста

Установка может быть сложной и запутанной

Требует Flash и Javascript

Временами загрузка может быть вялой

Печать будет проблематичной

Cufón

Наиболее популярным недавней передовой техникой замены изображений называется cufón, что означает чемодан или «обычай» и «Шрифт». Он «призван стать достойной альтернативой sIFR, который, несмотря на свои достоинства по-прежнему мучительно сложно установить и использовать» в соответствии с cufón вики.

ЗА:

Быстрейшая передовая техника замены изображения

Сохранили оригинальное смысловое содержание текста

Изящно уменьшает первоначальный текст

Не требует никаких плагинов (например, Flash)

Удобство сценария

Простая настройка

ПРОТИВ:

Текст не может быть скопирован и вставлен (текст не по выбору)

Шрифтовое лицензирование размыто в отношении cufón

Текстовое выравнивание и эффекты не работают

Состояние неопределенности имеет много причуд

Требует JavaScript

Если вы хотите узнать, как осуществлять и увидеть примеры cufón, NETTUTS + имеет большое скринкаст и учебник по использованию cufón или посетите официальный сайт cufón.

Замена изображения типа Facelift (FLIR)

Facelift Image Replacement (FLIR) техника отличается от двух ранее упомянутых в этом используется выполнение сценариев на стороне сервера с PHP и изображений библиотеки GD. Она была разработана Кори Mawhorter, чтобы обеспечить автоматические серверные техники замены шрифта.

ЗА:

Сохранили оригинальный смыслового содержания текста

Не требует никаких плагинов (например, Flash)

Шрифтовое лицензирование самое непроблемматичное

ПРОТИВ:

Текст не может быть скопирован и вставлен (текст не по выбору)

Рендеринг шрифтов не является регулярным по сравнению с другими альтернативами

Требуется веб-сервера с PHP и GD

Требуется больше ресурсов сервера

Может быть трудно установить

Если вы хотите узнать, как осуществлять и увидеть примеры FLIR, Divito дизайн имеется хороший учебник по использованию FLIR или посетите официальный сайт FLIR (ссылка: http://facelift.mawhorter.net/).

5. Использование CSS3′s @font-face Rule. Правило для встраивания Web Font.

CSS3 является относительно новым в ландшафте сети, и она еще не получила широкого применения. Одной из наиболее интересных черт CSS3 является @font-face Rule. Есть два больших препятствия для использования @font-face Rule. Во-первых, не так много литейных шрифтов и их поддержка @font-face Rule. Некоторые лицензии являются расплывчатыми, а некоторые прямо запрещают @font-face Rule. Чтобы получить список шрифтов, которые поддерживают @font-face Rule, можно на webfonts.info, где имеется большой список. Второе препятствие состоит в том, что не все браузеры поддерживают @font-face Rule, как показано в таблице поддержки браузера ниже.

html

@font-face Rule теперь позволяет внедрения шрифтов в IE6, IE7, IE8, Firefox 3.5 + (PC & Mac), а также Safari (Mac & PC) с поддержкой в опере 10 и Chrome в ближайшее время. Это означает, что в какой-либо форме моды, webfonts будут доступны для примерно 90% + пользователей.

Шаг первый: Сделайте шрифт @font-face описание (я)

В идеале, это первое @font-face описание должно быть частью CSS файлов, подается через условные комментарии для IE только в СРВ версию шрифта. Второе @font-face описание должно быть OTF или TTF файлом шрифта. Кроме того, из-за ограничений по безопасности браузера, источник URL для описания должен быть относительным (хотя некоторые браузеры поддерживают абсолютный URL).

@font-face {
font-family: "Anivers";
src: url("Anivers.eot");
}
@font-face {
font-family: "Anivers";
src: url("Anivers.otf");
}

Шаг второй: Использование шрифтов

Да. Вот и все, что нужно сделать.

body {
font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

В связи с предстоящей сдачей проектов @font-face, таких как Typekit и Typotheque ведется поиск в оказании значительной помощи в плане договора о Web Embedding лицензиях с большими литейными шрифтами. Кроме того, со всеми вопросами об аренде шрифтов для веб-вложений, может оказаться затруднительным получить некоторые (или все) из шрифтов, которые вы собираетесь использовать в веб-дизайне или вашем программном обеспечении для редактирования изображений.. Cуществует два решения этого: 1) разработка в браузере, как это было рекомендовано выше, или 2) использование аналогичных шрифтов для разработки дизайна статических страниц.

6. Найти вдохновение и никогда не останавливать обучения.

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

Он-лайн, изучите следующие статьи ведущих специалистов типографии, таких как «За прекрасный Web, я люблю Typography, TypeInspire или webfonts.info. Ниже вы найдете список рекомендуемых ссылок для чтения и получения дополнительной информации.

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

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

Автор:Michael Owens.

Источник: http://net.tutsplus.com

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: , , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. elena

    Уважаемые Виктор и Андрей! Честно говоря, я устала вас хвалить, тем более чем дальше в сайтостроение, тем меньше я понимаю, хотя написано все вроде бы доступно, но нужно время, чтобы все прочитать, а потом осмыслить, а потом набраться наглости и создать сайт, блог с рисунками и текстами. А вот это и есть самое сложное — придумать текст и картинки для моей работы. Так что пока учимся дальше… С огромным уважением, Елена

  2. Alex

    Вы написали: «Ниже показано, как 5 популярных браузеров отображают шрифты по-разному. »
    К сожалению, в приведенной таблице незаметны различия сходных шрифтов (100%, 75% и 50%) в разных колонках.

  3. Алексей

    Спасибо статья действительно очень большая и познавательная… Спасибо с уваженим Алексей

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree