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

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

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

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

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

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

Верхний вынос (Cap) — это расстояние между Meanline и высотой заглавной буквы «А».

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

Stem — основная вертикаль каждого символа, в том числе и наклонная.

Bar — горизонтальная часть шрифта

Bowl — закруглённая часть шрифта.

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

Descender - торчащая вниз часть таких букв, как «p», «q» и «g»

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

Аperture — обозначает зазор в нижней части символов, таких, как “A” или “m”

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

Hairlines — это тончайшая часть шрифта с засечками.

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

Terminal бывает только на шрифтах с засечками, это место окончания линии.

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

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

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

Spine — кривая, которая есть у буквы “s”.

Tail — декоративная линия, например, на букве “R”.

Finials — коническое окончание некоторых букв

Shoulders - закруглённая линия, которая отходит от stem’a

Организация текста и контраст в типографике

Контрастность (Contrast) — отношение толщины основных штрихов к толщине соединительных. Шрифт может быть неконтрастным (ITC Avant Garde Gothic), малоконтрастным (Clarendon), контрастным (Bodoni) и сверхконтрастным(ITC Fat Face).

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

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

1. Размер

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

Добиться контраста можно и путем комбинирования разных шрифтов. Для этого чаще всего используют так называемые «веб-безопасные» шрифты. Есть два основных типа таких шрифтов – serif (шрифт с засечками)иsans-serif (без засечек). Оба используются при создании контраста между текстовым блоком (sans-serif) и собственно заголовком (serif).

Цвет

Это традиционный путь, указующий на различия между заголовками и основным текстом и навигацией (в частности, ссылками).

 

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

Регистр

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

Для смены регистра используется CSS свойство – text-transform: uppercase.Если предложение длинное или (текст маленький), то использование одних только прописных букв значительно снизит читабельность текста.

Стиль

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

Не стоит злоупотреблять подчеркиванием любого текста, если он не является ссылкой. Лучше воспользуйтесь курсивом (italic) для контраста.

Начертание

Полужирный шрифт (bold) – еще один способ контрастно выделить значимые части текста.Но и здесь не стоит перебарщивать: некоторые дизайнеры выделяют целые строчки полужирным шрифтом. Как следствие – утрата контрастности фрагмента и снижение его важности.

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

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

Создать пространство можно несколькими приемами:
– разбивка на блоки (с использованием элементов margin или padding для создания отступов);
– разбивка на параграфы (путем создания промежутков между блоками текста);
– межбуквенные (letter-spacing) и межстрочные (line-height) интервалы;
– создание абзацев (при работе со списками и/или цитатами).

Шрифт и изображение.

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

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

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

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

Добиваясь возможно большего единства надписи и изображения, художники-конструктивисты в конце 1920-х годов пытались строить изображения из наборных, типографских материалов — различного рода скобок, знаков, линеек разной толщины, прямых или изогнутых. Обложки и плакаты, выполненные в этой своеобразной технике, в самом деле получались очень цельными. Изображение в них плотно лежит на бумаге, держит плоскость. Наборный шрифт очень естественно входит в эти жесткие, несколько схематичные, но не лишенные выразительности композиции.

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

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

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

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

Шрифт может быть слит воедино с изображением, если он помещен в пространство рисунка, подчинен законам перспективы.

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

Пример: "Прозрачный" шрифт, напоминает прозрачность воды, а ритмы линий шрифта, перекликаются с ритмами линий и форм, использованных в его оформлении.

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

Рекламный буклет пиццерии. Торонто. Широкий и массивный шрифт точно ассоциируется с заявленным в буклете широким по выбору предложением.

Фрагмент рекламного буклета. Торонто. Шрифт слова "FUN"
(веселье, развлечение) вызывает ассоциации с улыбкой и смехом, а контрастные цвета усливают такие ассоциации.