10 февраля в 19:00
Цена: 500 руб.
Место: Кабинет графического дизайна
ул. Ломоносова, 1
Телефон: (812) 943-33-68
olga@projector-studio.ru.

Лекция будет проходить в лофт-проекте Этажи (галерея Формула) 19 января, в 20:00.
Стоимость: 200 руб.
Телефон галереи: (812) 458-50-05

Для правильной организации содержания необходимо внимательно относиться к выбору стилей заголовков и подзаголовков необходимо, поэтому старайтесь, чтобы все выглядело согласованно. То, что HTML предлагает шесть уровней заголовков, не означает, что Вы должны всегда использовать все шесть уровней на одной странице. Например, в данной статье использовалось только два заголовка: Н2 и жирный шрифт для подзаголовков

Работа с текстовыми блоками
Текст с экрана утомительно читать не только из-за того что информация передается пользователю посредством излучения монитора (а не в отраженном свете, как при чтении книг), но и потому, что организация большинства веб-страниц нарушает одно из основных правил книжной и журнальной типографики: строки в тексте на большинстве страниц слишком длинные для того, чтобы их можно было легко прочесть. Колонки в журналах и книгах делают узкими по физиологическим причинам: на обычном расстоянии для чтения диапазон движения глаза составляет лишь около 8 см, поэтому дизайнеры стараются вместить информативные фрагменты текста в колонки не шире, чем удобный диапазон для глаза читателя. Более широкие строки текста требуют, чтобы читатели двигали свои головы медленно или напрягали мышцы глаз, чтобы следить за длинными строками текста. К сожалению, большинство веб-страниц почти вдвое шире охвата глаза читателя, поэтому необходимо дополнительное усилие для сканирования таких длинных строк. Если вы хотите, подтолкнуть пользователей своего веб-сайта на самом деле прочесть документ онлайн (вместо того, чтобы его напечатать для последующего прочтения), рассмотрите возможность использования HTML-тегов “BLOCKQUOTE ” или “PRE”, чтобы сократить длину строки текстовых блоков примерно до половины нормальной ширины веб-страницы.

Литература
White, J. V. 1988. Graphic design for the electronic age. New York: Watson-Guptil.
Wilson, A. 1974. The design of books. Salt Lake City: Peregrine Smith, Inc.

Хорошая типографика во многом зависит от визуального контраста между шрифтами, и контраста между текстовыми блоками и окружающим пустым пространством. Ничего так не привлекает внимания глаз и сознания человека, как сильный контраст и разнородные изображения, однако подобные приемы стоит использовать весьма осторожно при создании дизайна или верстки страниц. Если сделать все жирным, то ничего не будет выделяться и создастся впечатление, что вы решили вынести мозг пользователю. Если вы набьете каждую страницу плотным текстом, читатели увидят серую стену и их сознание инстинктивно воспротивится отсутствию визуального контраста. Не принесет результата и попытка сделать все одинаково крупным. Даже жирные шрифты надоедают очень быстро, так как если весь текст жирный, ничего нельзя сделать выделить “жирнее”.

Для выделения заголовков в вебе используйте заголовочные html-тэги (H1, H2, etc.), но делайте это внимательно. Чтобы контролировать их внешний вид (размер шрифта, жирность, наклон) – использование стили css.

Визуальныя логика vs. стуртурная логика

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

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

Шрифт and “разборчивость”
Мы читаем, в первую очередь, путем распознавания общей формы слов, а не рассматриваем каждую букву в отдельности, а затем складываем их в известные слова:

Избегайте использования всех заглавных букв в заголовках – это гораздо труднее для чтения, потому что слова образованные из прописных букв однообразные прямоугольники, которые предлагают очень мало разнообразных форм, за которые может зацепиться глаз читателя:

Читабильность зависит от верхней части слов
Ваше решение использовать строчные или прописные буквы имеет большое значение для читабильности. В основном, использование “нижнего” стиля (когда заглавная – только первая буква первого слова в предложении или для имен собственных) подразумевается только у заголовков и подзаголовков. Такой стиль более разборчивый, потому что при чтении мы прежде всего сканируем вершины слов:

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

Если вы используете заглавные буквы во всех словах заголовка, вы прерываете процесс “сканирования” читателем формы слов:

Литература

Bringhurst, R. 1992. The elements of typographic style. Washington: Hartley and Marks.
Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books.
Spiekermann, E., and E. M. Ginger. 1993. Stop stealing sheep & find out how type works. Mountain View, CA: Adobe Press.
typoGRAPHIC A concise, elegant essay on typography and letterforms from razorfish/bluedot.