Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Руководство по веб-типографике (Основы)

Веб-типографика прошла долгий путь с тех пор, как Тим Бернерс-Ли перевернул нажал на выключатель в 1991 году. Еще во времена IE 1.0 хорошая веб-типографика была чем-то вроде оксюморона. Сегодня все по-другому. У нас есть не только браузеры, поддерживающие изображения, но и возможность сделать веб-страницы более живыми благодаря разнообразию поддерживаемых шрифтов.

Во-первых, стоит отметить, что Typography (Типографика) - это не просто выбор шрифта, или даже отличие одно шрифта от другого. В последних экспериментах обученные обезьяны смогли правильно идентифицировать Helvetica в 90% случаев.

шрифты

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

Контраст

Бледно-розовый текст на бледно-синем фоне, может хорошо смотреться на футболке, но он просто читается с экарана. А текст существует именно для чтения; Убедитесь, что он достаточно контрастирует с фоном для этого. Если вы не уверены в достаточной контрастности, сделайте снимок страницы, откройте ее в редакторе изображений и переведите его в оттенки серого. И вы быстро увидите, достаточно ли у вас контраста. Robert Bringhurst, непревзойденный типограф пишет, типографика существует, чтобы почтить содержание. Уважительно ли мы отеосимся к содержанию, если проектируем наши страницы таким образом, что текст трудно прочесть?

шрифт

Лично мне не нравится читать длинные отрезки реверсивного текста (т.е. светлый текст на темном фоне); Как часто мы видим книги с таким набором текста? Это может быть уместно для более коротких фрагментов текста на экране, но я считаю очень утомительным читать их в течение какого-то продолжительного времени.

Размер

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

шрифт

Не устанавливайте основной текст меньше 10 или 12 пикселей и, если возможно, увеличивайте его. Помните, что можно разглядеть на 65-дюймовом плазменном мониторе высокой четкости, возможно, не так четко видется на 15-дюймовом MacBook. Если есть сомнения, сделайте его лучше побольше.

Иерархия

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

шрифт

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

Пространство

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

белое пространство

Помните, что это не правила, а рекомендации. Однако следуйте им - контраст, размер, иерархия и пространство - и ваша типографика типография будет расти как суфле Гордона Рамзи.

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

Статья переведена автором сайта и при цитировании её на русском языке ссылка на сайта обязательна. Автор ilovetypography.com. Оригинал статьи на английском

Другие статьи о дизайне>>