Поправил старую статью о типографике, тем, кто не видел - будет полезно для ознакомления

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

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

Гарнитуры против шрифтов - в чём разница?

Многие люди используют слова «гарнитура» и «шрифт» как синонимы. На самом деле это не одно и тоже, сейчас я объясню, почему.

Гарнитура - это набор стилистически похожих символов, которые можно писать/печатать. Это цифры, буквы, символы. Шрифт - это более узкое понятие, котрое определяется несколькими факторами, например, размером и стилем. Вобщем, Arial - это гарнитура, а Arial Bold - это шрифт.

Классификация

Шрифты можно разделить на несколько групп - с засечками (serif), без засечек (sans-serif), рукописные (script), акцидентные (display). Впрочем, есть и другие виды классификации.

Шрифты с засечками, Антиква (Serif)

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

У шрифтов с засечками довольно много подтипов - например, Old Style («Старый стиль» - так же их называют humanist, гуманистическая антиква ) - самые первые шрифты этой классификации, они использовались аж в далёких 1400-х гг. Их отличительная черта - что та часть символа, которая расположена под наклоном, делается тонкой. Примеры шрифтов - Adobe Jenson, Centaur, и Goudy Old Style.

Transitional serifs (Переходная антиква) - использовались в 1700-х годах. Сюда входят такие шрифты, как Times New Roman и Baskerville, а так же Caslon, Georgia, и Bookman. У них разница между толстыми и тонкими частями букв более заметна, чем у Old Style, но менее заметна, чем у Modern.

Modern serifs (Антиква нового стиля) - используются уже после 1700-х годов, и имеют сильный контраст между толстыми и тонкими частями символов. Сюда входят такие шрифты, как Didot и Bodoni

И, наконец, Slab serifs (Брусковые шрифты) - вообще имеют одинаковую толщину всех линий, и крупные засечки на концах

Рубленые шрифты, Гротески (Sans Serif)

Рубленые шрифты называются так потому, что у них нет засечек). Они выглядят более современно, к тому же их начали использовать в 18-м веке.

Вот 4 основных вида рубленых шрифтов: Grotesque (Старый гротеск), Neo-grotesque (Новый гротеск), Humanist (Гуманистический), и Geometric (Геометрический).
Старые гротески - самые первые, они похожи на шрифты с засечками, но без засечек.
Например, Franklin Gothic и Akzidenze

Новые гротески имеют упрощённый, по сравнению со старыми гротесками, вид. Очень многие из самых популярных ныне шрифтов это новые гротески, например, MS Sans Serif, Arial, Helvetica и Univers.

Гуманисты - более каллиграфичны, чем все остальные рубленые шрифты (то есть у них изменяется толщина линий). К ним относятся, например, Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande - их часто используют в наполнении тела сайта.

Геометрические основаны на правильных фигурах, например, «О» - это круг, и т.п.; считаются наиболее современными рубленными шрифтами. Примеры - ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Рукописные (Script)

Рукописные шрифты базируются на почерке. Существует две разновидности таких шрифтов - формальные (formal) и кежл (casual). Формальные как будто написаны от руки, они происходят из 17-18 вв. Некоторые шрифты основаны на почерках известных мастеров, таких, как George Snell и George Bickham. Как пример современного шрифты можно взять Kuenstler Script. Красив и элегантен, он не подходит для основного текста страницы.

Кежл-шрифты - это более современный вариант, зародился он в 20в. Он менее формальный, часто с жирной обводкой и с эффектом мазков кисти. К таким шрифтам относятся Mistral и Brush Script.

Акцидентные шрифты (Display)

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

Неалфавитные шрифты (Dingbats)

Неалфавитные шрифты - это те шрифты, которые вообще не содержат букв, но содержат символы и орнаменты.

Пропорциональные против моноширинных

В пропорциональных шрифтах символ занимает столько места, сколько требует его естественное написание. Например, Times New Roman является пропорциональным шрифтом. А вот у моноширинных шрифтов все символы одной ширины. К таким шрифтам относится, например, Courier New

Настроение

Настроение шрифта очень влияет на то, уместно ли его будет использовать в той или иной ситуации. Довольно часто используются и контрасты - деловой стиль сочетается с неформальным, светлый с драматичным. К примеру, Times New Roman - строгий шрифт, и именно он так часто используется для деловой переписки. А вот, например, Helvetica вообще меняет своё настроение в зависимости от окружающих шрифтов.

Толщина и стиль

По толщине бывают шрифты: light, thin, regular, medium, bold, heavy, или black.

Есть три стиля шрифтов - italic, oblique, и small caps. Small caps обычно используются для заголовков.

Italic и oblique - взаимозаменяемы, хотя это различные стили. Оblique - наклонный вариант обычных шрифтов. Чтобы получить его, достаточно воспользоваться функцией Free Transform-distort в Photoshop. А вот Italic - это уже отдельный набор символов, который отвечает за наклонный вариант написания шрифта.

Структура шрифта

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

Линия шрифта (baseline) - воображаемая линия, на которой расположен текст. Иногда закруглённые шрифты немного отступают от линии шрифта.

Линия строчных (meanline) обозначает высоту большинства строчных букв, обычно определяется по высоте буквы «х». Отсюда же происходит и понятие x-height.

Верхняя линия прописных (Cap) - высота заглавной буквы «А».

На рисунке выше показано три общие части всех букв.

Основной штрих, Штамб (Stem) - основная вертикаль каждого символа, в том числе и наклонная.

Перекладина (Bar) - горизонтальная часть шрифта

Овал (Bowl) - закруглённая часть шрифта.

Верхний выносной (Ascender) - торчащая вверх часть таких букв, как «d», «h», и «б».

Нижний выносной элемент (Descender) - торчащая вниз часть таких букв, как «p», «q» и «ф»

Засечки - отличительная черта шрифтов с засечками). У одних шрифтов они более ярко выражены, а у других - менее ярко.

Апертура (Aperture) - обозначает зазор у открытх символов, таких, как “A”, “с” или “m”

Ухо (Ear) это декоративное дополнение символа, как, например в букве “g” на примере выше.

Соединительный штрих (Hairline) это тончайшая часть шрифта с засечками.

Перекладина (Crossbar) - горизонтальная линия, как, например, в символах “A” и “H”.

Капля (Terminal) - круглое или овальное (каплевидное) окончание штриха в рисунке некоторых знаков шрифта.

Петля (Loop) бывает только на некоторых буквах “g” нижнего регистра, и может быть целиком закрыта или частично закрыта.

Шип (Spur) - крошечная зазубринка на некоторых буквах, например, на “G”.

Присоединение (Link) соединяет верхнюю и нижнюю часть буквы “g”.

Спина (Spine) - центральная кривая, которая есть у буквы “s”.

Хвост буквы (Tail) - декоративная линия, например, на букве “R” или “Q”.

Концевой элемент (Terminal, Finial) - окончание штриха без засечки

Заплечико (Shoulder) - закруглённая линия, которая отходит от основного штриха. (честно говоря, на многих российских сайтах дают совсем другое определение этого понятия, )

С появлением персональных компьютеров и первых настольных издательских систем в типографике произошел тектонический сдвиг, последствия которого становятся заметными только сейчас. Это далеко не первое глобальное изменение в типографике, были и другие. Достаточно вспомнить время, когда машины индустриального мира одержали победу над ремесленниками. Массовое производство и прибыль стали важнее красоты шрифтов. Количество значило больше чем качество.

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

Однако победа индустриализма вовсе не означала, что великие мастера исчезли с появлением печатных станков. Эти два мира продолжали существовать независимо друг от друга – печатники признавали талант ремесленников, а те в свою очередь, понимали, что прогресс не остановить. Это было второе изменение в типографике, в результате которого оно лишилось части своей «души» или, если так можно выразиться, человечности. Но чтобы понять, что произошло совсем недавно, придется переместиться во времени на 500 лет назад и узнать, с чего все началось.

ПЕРВЫЙ ПЕРЕХОД

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

До этого все книги создавались исключительно вручную. Фолианты прошлого были написаны от руки и украшены затейливыми рисунками и орнаментами. Процесс копирования был очень долгим, но в результате любая книга, даже копия, была произведением искусства.

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

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

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

ЦИФРОВОЙ ВЕК

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

_______________________

«В нашем насквозь компьютеризированном мире распространение шрифтов и их разнообразных вариаций представляет собой новый уровень визуального загрязнения, напрямую угрожающего нашей культуре, – говорит дизайнер Массимо Вигнелли . – Из тысяч шрифтов нам нужны лишь несколько основных, потому что все остальное – это просто мусор».
_______________________

В чем-то он прав. Типографика – это не просто шрифты. Это не только красивые буквы, это нечто другое, что-то, что заставляет нас чувствовать. По сути, типографика это послание. По мнению известного русского типографа Лазаря Лисицкого , типографика оптически должна донести до читателя ту же идею, которую оратор озвучивает голосом».

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

Самое грустное во всем этом, что люди потеряли часть самих себя в погоне за совершенством. Мастерство каллиграфии сегодня практически никому не нужно. Это долго, это требует внимательности и усидчивости. Сегодня в этом нет никакого смысла – ведь есть гарнитуры на любой вкус. Мы выбираем шрифты словно зомби: название, размер, начертание… Послание? Сообщение? За компьютерными шрифтами нет никакого послания, нет никакой истории, ничего.

НОСТАЛЬГИЯ ПО ПРОШЛОМУ

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

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

ВИНТАЖНАЯ ГРАНДЖ-ТИПОГРАФИКА

Одна из самых часто встречающихся бед дизайна - это проблема с .

В этой статье мы расскажем о нескольких принципах правильной типографике и посоветуем, как вам избежать многих распространенных ошибок.

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

Правило 1. Чем меньше шрифтов, тем лучше

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

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

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

Правило 2. Следите за разрядкой

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

Правило 3. Правильное выравнивание

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

Правило 4. Поменьше декоративных шрифтов

У вас есть красивые декоративные шрифты? Замечательно! Но это совсем не означает, что необходимо использовать их для текста абзацев. За декоративными шрифтами, чаще всего стоит, история или они применяются в конкретном случае, например, для заголовка или названия. Часто, чем проще, тем лучше, поэтому такие шрифты как Helvetica так популярны.

Правило 5. Размер имеет значение

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

Правило 6. Следите за читабельностью

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

Правило 7. Правильно подбирайте цвета

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

Правило 8. Подходящая группировка

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

Правило 9. Достаточный интерлиньяж

Это расстояние между строками текста. Очень важно правильно подобрать этот интервал. Гораздо более приятно читать, когда есть место для отдыха глаз между строками. Как правило, стараются использовать интерлиньяж, по крайней мере, на 2 пункта больше, чем размер шрифта. Например: для максимального удобства чтения при 10pt для шрифта должны задать хотя бы 12pt.

Правило 10. Следите за кернингом

Кернинг – интервал между отдельными символами слова. Тут важно иметь опыт в определении плохого кернинга, так как часто программы, например, такие как Фотошоп, ошибаются в его расстановке. Это надо будет отрегулировать вручную, но главное не перестараться. Если вам не нравится межсимвольное расстояние, но вы не знаете, как это улучшить, выберите другой шрифт.

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