Основы Типографики. Для веба в том числе.

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

Я начинал заниматься шрифтами на реальных материалах, а не на компьютере. Первое знакомство с компьютерными шрифтами на windows 95 меня повергло в ужас: округлые буквы по высоте были такие же, как остальные, кернинг одинаковый, и прочие нюансы результата работы людей, которые не понимают основ шрифтового дела. Мне, как человеку, который с 14 лет знает как работать с нормографами, это казалось ужасным. Поэтому в данной статье я постараюсь раскрыть основы удобочитаемости и основные технические моменты.

Точка отсчёта для начала создания или выбора шрифта это его удобочитаемость, именно шрифт является основным и самым важным средство оформления публикации. Но достаточно важен и сам текст, который требуется сверстать. Его логическая структура, объём текста, ритм — всё влияет на конечную компоновку текста и, как следствие, его восприятие пользователем. Конечная цель это удобочитаемый текст. Философия символов, которой нужно руководствоваться при работе со шрифтами: «Любая диспропорция выглядит привлекательной, любая аномалия вызывает опасность».

Есть две основных группы шрифтов: антиква и гротеск. Антиква — шрифт с засечками, гротеск — без засечек. Гротески бывают рукописные, моноширинные, символьные и акцидентные. Для большого текста лучше использовать шрифт с засечками (антиквы), например Garamond. Для коротких текстов рекомендуется выбирать гротески, такие как Verdana, Tahoma и Segoe UI для Windows и Helvetica для MacOS.

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

 

Определения и базовые знания:

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

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

Интерлиньяж — расстояние между строками. Очень важный параметр для удобочитаемости текста. Разные формы шрифтов требуют для себя разного интерлиньяжа, поэтому универсальных значений здесь нет, как, в принципе, почти во всей типографике. Но кое-какие правила есть, например, если интерлиньяж больше кегля, то можно чуть увеличить кернинг для улучшения читабельности. Интерлиньяж всегда равен красной строке. Занятный факт: правильное название для вычисления расстояния между строками это «leading», он же интерлиньяж. Иногда путают, и называют «интерлиньяжем» высоту виртуальной области по Венсану. Хотя сам Венсан в своих статьях использовал англоязычный термин «leading».

Ещё есть шпация, которая формируется из кернинга и трекинга:
Апрош — расстояние между соседними шрифтовыми знаками.

Кернинг — расстояние между буквами, в котором всё осложняется тем, что кернинг между одной парой букв и другой может различаться, и автоматика эту проблему решить не может. Служит для выравнивания Апрошей. Если вы работаете с готовым шрифтом, то лучше этот параметр особо не трогать без 146% понимания работы кернинга. При работе с цифрами и кириллическими символами надо обращать особое внимание на кернинг. В принципе, это правило актуально для любых символов, имеющих вертикальные штрихи. Трекинг же это расстояние между буквами, которые часто употребляются вместе (например, приставки «роз/раз», «пре/при» и т.п.). 5%/ -2% / 5% это эталонные значения для индизайна под трекинг.

Лигатура — на одной кегельной площадке расположена два/три знака для избежание ситуаций, когда кернинг бессилен. Используется для сложных пар букв, распространенное явление в английском языке.

Кегль — размер высоты буквы, с учётом нижних и верхних выносных элементов, измеряется в типографских пунктах (фундаментальная относительная единица – кегельная шпация (em) (круглая)). Тут нужен небольшой исторический экскурс: в давние времена полоса набора текста складывалась из отдельных литер (металлические бруски с зеркальными формами текстовых символов), и именно высота литеры называлась кеглем. То есть, получается, что кегль — это вся высота буквы. Также, стандартные размеры кегля шрифта 6, 8, 10, 12, 16, 20, 24, 28, 36 и 46 тоже унаследованы от старой техники отливания в кеглях. В XVIII в. Француз Фирмен Дидо довёл до ума основы типометрической системы, которые в XIX в. приняли в слегка изменённом виде в Англии и Америке.
Но, что было то прошло, в наш век всеобщей компьютеризации все размеры задаются относительно абстрактного кегля. Допустим, что в контуре буквы «ч» габариты будут являться 0,45 x 0,41 em. При выводе этой буквы на устройство вывода все размеры будут масштабироваться пропорционально кеглю. Если буква «ч» выводится кеглем в 18 пунктов, то её габариты будут 18*0,45 и 18*0,41 = 8,1 и 7,38. Конечно, есть некая стандартизация: в большинстве компьютерных шрифтов, как и металлических, высота строчных букв варьируется примерно от 0,40 до 0,55 кегля, а рост прописных — от 0,65 до 0,72 кегля. Сейчас используются две системы типографский измерений, отличающихся размером пункта: система Дидо (1 пункт = 0,375 mm) и англо-американская (1 пункт = 0,352 mm). В России используется система Дидо, в Европе, к счастью для российских дизайнеров тоже. Но, к несчастью, в компьютерном наборе доминирует англо-американская система. Для простоты во многих программа вёрстки пункт определяется как 1/72 дюйма (0,3528 мм) 352,777 773 956 019 микрон. И да, спасибо Adobe за то, что приняли 1/72 дюйма как стандарт в своём программном обеспечении, а то бы мы до сих пор мучились с разными значениями пунктов Фурньё, Дидо, и ещё некоторыми.

Абзацный отступ — пробел в начале первой строки абзаца, призван перевести взгляд читателя к следующей группе текста в книге.
Здесь все очень догматично: абзацный отступ делается в одну кегельную (то есть при 12 кегле — 12 пунктов).
Лишь одна ситуация не подразумевает использование абзацного отступа: под расположенным по центру заголовком. Первый абзац всегда начинается без отступа. Но под заголовком, выключенным влево, абзацный отступ необходим.

Важно помнить и про оптические иллюзии: буквы, имеющие острые и овальные вершины «а»,«о»,«з» и прочие кажутся меньше, чем прямоугольные «ы»,«ш»,«п». Чтобы это компенсировать, необходимо кругло/остроугольные буквы располагать слегка выше остальных.

У шрифтов имеется фундаментальная относительная единица измерения — кегельная (круглая) шпация (em). Она ведёт своё начало от шпаций (брусков различной толщины для пробелов при ручном наборе текста), и шпация шириной в кегль назывался круглой/кегельной, а в половину кегельной назывался полукегельной/полукруглой. Отсюда следует, что в зависимости от кегля шрифта размер круглой шпации может иметь различную ширину в пунктах. За точку отсчёта при незнании, как поступить, можно взять число 1⁄3 круглой.

Система описания шрифтов Panose (и не упомянешь вслух при несведущих людях ведь). Тип TrueType. Шрифты описываются по 10 параметрам: тип шрифта (Family), форма засечек (Serif), насыщенность (Weight), пропорции (Proportion), контраст (Contrast), форма штрихов (Stroke), форма окончаний штрихов (Arm), общая форма знаков (Letterform), средняя линия (Midline), соответствие роста строчных и прописных знаков (x-height). Например, вот описание шрифта Verdana: 1:2 11 6 4 3 5 4 4 2 4.

 

Электронное отображение:

В интернете на отображение и сглаживание шрифта влияют три фактора: браузер, монитор, и, собственно, сам шрифт. Если на браузер и монитор разработчики сайтов повлиять никак не могут, то вот подбор параметров шрифта 100% обязанность авторов сайта.
Не нужно привязываться к какому-то значению в пикселях для шрифта, эталона нет. Лично я использую в зависимости от ситуации от 12-16 em, но всегда держу в уме, что у vk.com и facebook использовался 11px Tahoma, и никто не жаловался. Обычно текст набирают кеглем 12-14 пунктов, а расстояние между строк должно равняться 1-1,5 кегля. Абзацы нужны для структурирования текста, и отступ для абзаца рекомендуется оставлять в пределах 3-5 круглых шпации. Важнее понимание, какое dpi монитора будет у целевой аудитории сайта. dpi это количество точек на линейный дюйм. А ppi—количество пикселей на линейный дюйм. В 80-х годах dpi мониторов был равен 70-74. В те времена наиболее правильный подход был у Apple, которые сделали значение равным типографскому 1/72 дюйма. Спустя какое то время они сделали это занчение как у Microsoft, 1in = 96px. Но и 72, и 96 слишком маленькое количество точек для того, чтобы избавиться от зубчатости при отображении шрифта. Поэтому применяется субпиксельное сглаживание. На сайте не рекомендуется задавать размер шрифта в пикселях, зафиксированный размер для современного веба—неоправданное зло. Верстальщик или дизайнер должны подобрать такое значение в em, чтобы шрифт при стандартной настройке выглядел так, как задумывалось при создании макета. И шрифт обязательно должен уметь truetype hinting.

Единицы измерения в вебе бывают абсолютные и относительные. К абсолютным относятся: дюймы (in), сантиметры (cm), миллиметры (mm), пункты (pt), пики (pc) и еще 12 редко используемых. Запоминаем цифры 1pt = 1/72in, а 1pc = 12pt. Эти цифры годятся больше для печати, для мониторов нужны относительные единицы измерения: %(проценты), em (кегли), x-height (ex), px (пиксельки ^^). И да, так как вы уже слегка запутались, развею сомнения – 12 пунктов и 12 пикселей в программах Adobe это одно и тоже. В адобовских продуктах используется виртуальное разрешение 72 точки/пикселя/ на дюйм. А в дюйме как раз 72 округленных адобовских пункта. Есть эталонное количество символов на строчку для комфортного чтения, 66 знаков вместе с пробелами, пунктуацией. Если вы зададите ширину в единице измерения ch, то все отработает.

Не обязательно изобретать велосипед при выборе шрифта, просто обратим внимание на безопасные web шрифты: Arial, Arial Black, Comic Sans MS, Courier New, Georgia (очень хорош), Impact, Times New Roman, Trebuchet MS, Verdana. Они все очень хорошие и есть у подавляющего большинства пользователей Windows, Max и Linux. Если вкратце, то:

Arial — наиболее популярный шрифт в ру-сегменте. Виновник того, что во многих шрифтах буква Л в кириллице похожа на П. Шрифт не так плох, есть пара недочётов в нескольких русскоязычных буквах, которые 99,9% населения планеты не заметит даже под дулом пистолета. На данный момент заменен Segoe UI.

Verdana — разработан в далёком 1996 году художником Мэттью Картером. Verdana был создан изначально для вывода на маленьких мониторах, так что данный шрифт обладает наилучшей читабельностью при маленьком размере кегля. Рекомендуемые значения кегля/интерлиньяжа 11/14, 12/16, 13/18.

Times New Roman — хороший шрифт, который создали ещё аж в 1931 году. Тут дизайнеру нужно быть осторожным (особенно полиграфистам). При очень маленьком или большом размере шрифта он становится трудно читаемым. В средних кеглях всё вполне неплохо смотрится. Поэтому грамотно использовать этот шрифт обычно получается только у арт-директоров. В 2004 году США приняли этот шрифт как стандарт для оформления своих документов.

Georgia — удачная замена Times New Roman. Хорошо подойдет для создания настроения старых деловых изданий. Удобен для чтения на выворотке, что для веба весьма редкое явление. Также является хорошим примером антиквы. Хорошей альтернативой является шрифт Garamond.  Пользователям MacOS нужны другие антиквы, вроде Iowan Old Style, Charter или PT Serif.

Comic Sans MS — декоративный шрифт. Прикольный комиксовый шрифт, который вполне подойдет для заголовков на сайте для школьников или прочих специфичных групп пользователей.

Impact — ещё один декоративный шрифт, на этот раз гротеск. Шрифт весьма жирный, соответственно, при маленьких размерах смотрится негоже. Данный шрифт есть не на всех MacOS.

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

Шрифты живут в себе, поэтому обсудим пару вопросов кода для шрифтов. CSS: font-variant-numeric позволит чуть разнообразить вашу типографику в вебе. И нельзя забывать про text-overflow: clip | ellipsis. Text-align только left. Для висячих элементов рано или поздно станет доступен hanging-punctuation. Во многих шрифтах можно встретить версии Display и Text. Разница между ними следующая: Display используется для заголовок больше 20 пикселей, а Text для обычного текста меньшего размера (легко отличить по увеличенному межбуквенному интервалу). Очень надеюсь, что разницу между TrueType, OpenType и PostScript шрифтами вы знаете. Если не знаете, то основное что важно знать: при использовании в работе TrueType шрифтов их корректное воспроизведение на печатных устройствах не гарантируется, и типография за это ответственности не несет.

Если вы решились отрисовать шрифт, то формула 3/5 — 5/6 высоты буквы поможет вам найти её ширину, а оптимальная толщина основных штрихов для строчных букв 10 кегля равна 0,30 – 0,35 мм, оптимальная ширина очка (исходя из буквы «н») 4/5 его высоты. Как видите, не всё в шрифтах так уж условно.
Контрастность шрифта необходима, по крайней мере, если вы хотите добиться удобочитаемости. Наличие коротких засечек также повышает удобочитаемость. Труднее всего читать текст, который набрал заглавными буквами. Одинаковая высота, объем, ширина букв затрудняют чтение. Антиквы и гротэски читать сложнее. Известная идея про «Чем проще форма букв, тем легче читать текст» неверна, так как мы читаем слова, а не буквы. И чем сильнее буквы отличаются между собой, тем проще читать.

Далеко не всегда нужно активно играться жирностью шрифта, так как жирные буквы слишком выделяются, а серые проваливаются. Контрастный шрифт — это соотношение толщины основных штрихов к толщине соединительных. Насыщенность шрифта — отношение толщины штрихов к высоте прямого знака, толщина основного штриха может варьироваться в широких пределах, толщина основного штриха в начертании нормальной насыщенности составляет примерно 1/7 строчного знака. Именно этот параметр ответственен за классификацию шрифтов по признаку Extra Light/Thin, Light, Book/Regular, Demi Bold/Semi Bold, Bold, Extra Bold/Heavy/Black/Ultra. Но все эти степени полноты гарнитуры были созданы не просто по извращённому желанию дизайнера/заказчика (как это делается сейчас T_T), а для решения конкретной задачи, это всегда надо иметь ввиду. Красивым и удобочитаемым шрифт делают грамотный рисунок знаков, гармоничные пропорции и однородная насыщенность.

 

Короткое тире (–) 8211(шириной с букву N) уместно между цифрами.
Длинное тире (—) 0151 используется в прямой речи и не отбивается пробелами («Виталька — лопух со школьной скамьи!»).
Дефис (-) ставится в сложных словах типа красно-синий. Зачастую приходится использовать и знак дефиса, и минуса как единый символ.

Сетка

«Дизайн без сетки это манная каша, которую не мешали».
Единство текста очень важный параметр, ничуть не менее важный, чем выбор качественного шрифта. Задача верстальщика состоит в том, чтобы сделать всё возможное для создания вёрстки, располагающей к спокойному, сосредоточенному чтению. Соответственно, читатель и не должен замечать оформления. Для создания хорошего оформления уже очень давно существуют модульные сетки. Модульная сетка это основа, по которой создаётся типовая схема вёрстки, которая соответствует особенностям помещаемого на той или другой полосе материала. Это огромная тема, в рамках одной стать и даже одного учебника её раскрыть невозможно. важно понимать, что сетка это не просто выравнивание элементов по левой границе сетки.

Есть такое понятие как «коридор»: совпадение пробелов между словами по вертикали. Это — серьёзный косяк. Особенно часто он появляется в узких колонках, в частности благодаря переносам слов, поэтому при работе с узкими колонками надо особенно следить за появлением «коридоров».

В строке не должно быть более 65 символов, и желательно уместить их в длину 70-120 мм. На странице должно быть не более 40 строк. В многострочных заголовках каждая строка должна иметь смысл. Между заголовком и следующим за ним абзацем не должно быть пустых строк. Между абзацами должна быть одна пустая строка. Желательно добиваться совпадения базовой линии шрифта на всех страницах работы (приводность вёрстки). Между предложениями должен быть одинаковый пробел.

Самые распространенные шрифты для многостраничного набора в России: Charter, Swift, Franklin Gothic, Minion, Helios. Они достаточно красивы, чтобы хорошо вписаться в формат листингов и объяснялок.

Бытует мнение, что латиница красивее и современнее, чем кириллица. Это правда, латиница более гармонична. Она естественно развивалась из рукописного шрифта, лантинский алфавит старше и более глобален, благодаря чему лучше сбалансирован. Кириллица возникла искусственно 300 лет назад, когда Петр I заказал у голландцев алфавит в 1708 году. Основной плюс латиницы в эстетике написания букв. Просто сравните G | Ж. D | Д. Множество дуг позволяют приятно сочетаться рядом стоящим символам.

Поверх этого накладывается эффект «буба—кики». Человеческий разум устанавливает ассоциации между звуковой оболочкой слова и геометрической формой объекта. У латиницы весьма хорошо проработана синестезия звука и формы. В итоге, латинские шрифты и азбука выверены так, что с ними чего ни сделай—все хорошо, а в кириллице чего ни сделай—все плохо. Но тем не менее, работать с кириллицей нужно, и работать хорошо, с любовью. Сделать хорошо можно все что угодно, в конце концов, шрифт это набор вертикальных палочек, диагональных палочек, круглых элементов, точнее, инструментов повествования. За хорошими примерами можно обратиться к творчеству Франтишека Шторма, который делает отличные кириллические шрифты.

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

16 комментариев

  1. DuxPass

    Как эти правила использовать для начертания капитель, в каких случаях её принято использовать?

    • your-scorpion (Author)

      Капитель (Small Caps) это отдельное начертание в гарнитуре шрифта.
      Отличается тем, что строчные символы похожи на уменьшенные прописные буквы, а по высоте идентичны строчным.

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

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

      До 19 века везде использовалась антиква (шрифт с засечками), в начале 19 века появился первый шрифт без засечек, это гротеск.

  2. Александра

    Можете подробнее рассказать про трекинг и кернинг в фотошопе? никак не могу понять, как оно устроено, буквы слипаются.

    • your-scorpion (Author)

      Кернинг это расстояние между парами символов. Трекинг это расстояние между буквами во всем блоке текста. В идеале, трекинг и ручной кернинг нужно использовать вместе.
      Кернинг и трекинг пропорциональны текущему размеру шрифта. Для шрифта размером 8 пунктов 1 em равен 8 пунктам. Для шрифта размером 16 пунктов 1 em равен 16 пунктам.
      Формула для расчета в em: X / 1000 = Y. X это значение интервала в Photoshop, а Y то же значение, выраженное в em.
      Формула для расчета в px: X * S / 1000 = P. X это значение интервала в Photoshop, S это размер шрифта в пикселах на экране в 72 dpi, и P это нужное нам значение.

      Так, -50 в фотошопе будет равно -0,05em. По аналогии: 10 это 0,001em, 50 это 0,05em, 500 это 0,5 em.

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

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

      Но опять же, смотрите на платформы, под которые вы делаете макеты. На том же Android Lollipop изменить трекинг трудно. И задается не пикселями, а % от ширины буквы m. Вот выдержка из документации: «The value is in ‘EM’ units. Typical values for slight expansion will be around 0.05. Negative values tighten text.»

  3. Дима Пелевин

    Часто встречаю в шрифтам прыгающие буквы? Что это, зачем они нужны?

    • your-scorpion (Author)

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

  4. Cherrysh

    Какие машинописные шрифты можете порекомендовать? Желательно, чтобы подошли для текста на микросхемах.

    • your-scorpion (Author)

      Из моноширинных (машинописных) мне нравится OCR-A, я бы рекомендовал его. Можно посмотреть в сторону Courier и Iosevka Slab.
      Еще совершенно не зазорно использовать San Francisco от Apple, в нем есть моноширинная версия для табличек. Если для вас не критичны Ё и Ъ в кириллице, конечно.

  5. dixiernet

    Спасибо! а такие шрифты тоже относятся к машинописным? Или это отдельный тип шрифтов, как он называется?

  6. Игорь Степанов

    Порекомендуйте хорошие узкие шрифты. Спасибо!

    • your-scorpion (Author)

      С кириллицей? Посмотрите в сторону Impact, хороший зауженный шрифт. Легендарный Din, который почти всегда выбирается арт-директорами. Посмотрите Gotham, Reforma, мой любимый Bebas, Rufo. Из бесплатных Open Sans Condensed.

      • Денис Бондарцов

        Можете подсказать хорошие бесплатные кириллические шрифты?

        • your-scorpion (Author)

          В первую очередь, Roboto и Open Sans. Во вторую PT Sans, PT Mono и PT Serif.

          Если же хочется экзотики, то многие платные шрифты имеют бесплатное начертание, но некоторые бесплатные начертания имеют ограничения по коммерческому использованию.
          Из прочих, можно посмотреть на Pobeda, Alice, Marmelad, и многие другие.

  7. Nkt

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

    • your-scorpion (Author)

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

      Для сплошных текстов лучше использовать бесплатные шрифты (но не из Windows, они далеко не свободны по лицензии), такие как PtSans. Ведь большой документ с шрифтами полностью переведенными в вектор будет весить слишком много даже по современным меркам, либо ставить атрибут preview & print вместо editable embedding. Могут возникнуть проблемы, например, OpenType часто ужимается в Adobe Compact Font Format. При этом выбрасываются незадействованные символы и сжимается адресация символов до ANSI, перемещая кириллические символы на несвойственные им позиции. Бесплатные шрифты хороши еще тем, что для них уже подобраны пары.

      Перепечатывать все, что есть в гугле, я не буду. Если Вам интересно, то ознакомьтесь тут и тут.

«Нажимая на кнопку Submit Comment, я даю согласие на обработку персональных данных»