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

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

Введение.

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

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

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

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

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

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

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

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

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

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

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

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

For a Beautiful Web

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

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

Следует отметить, чтоб достичь хорошего вертикального размера, необходимо иметь четкий контроль над линией высоты. Кроме того, вы можете использовать эту сетку решений (ссылка: //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, но это не приводит к увеличению прокручиваемой области, действительно заставляя текст исчезнуть.

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

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

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

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

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

ЗА:

ПРОТИВ:

Cufón

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

ЗА:

ПРОТИВ:

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

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

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

ЗА:

ПРОТИВ:

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

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, как показано в таблице поддержки браузера ниже.

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

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

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

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

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

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

Автор:Michael Owens.

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

E-mail:contact@webformyself.com

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

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

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