В Figma мы пытаемся найти баланс между историческими принципами дизайна, выработанными веками, и новыми практиками. Сегодняшний день знаменует собой еще один шаг в этом путешествии: мы меняем способ обработки текста. Теперь Figma будет распределять дополнительную высоту строки над и под буквами и будет измерять высоту строки более современным способом. Это необязательное изменение – ни один из ваших существующих файлов никоим образом не изменится, и вы сможете выбрать, обновлять ли ранее написанный текст.
Эффективная работа с типографикой в Figma
Эти модификации могут показаться простыми, но, чтобы найти правильное решение для наших пользователей, мы погрузились в удивительно сложный мир шрифта и вертикального выравнивания. Мы изучали, как развивалось размещение текста со времен Гутенберга, и как компьютеры – сначала графические пользовательские интерфейсы, а затем Интернет – еще больше усложняют эти проблемы.
Этот исторический багаж – и тот факт, что Figma используется в самых разных целях – затрудняли поиск одного идеального решения. Мы провели много исследований и испытаний, и рады представить вам результат.
Если вы хотите перейти непосредственно к деталям, вы можете прочитать их в этом посте или в справке. Или вы можете остаться и прочитать эту статью об истории и современном положении шрифтов. Мы будем общаться с создателями CSS, прольем слезу по OS/2 и, надеюсь, лучше поймем все изменения, происходящие с Figma сегодня.
Первые века вёрстки
В дни, когда шрифт был сделан из металла, все было проще. Существовали две основные специальности – дизайнер-шрифтовик и наборщик – и их работа была ограничена правилами физического мира.
К концу 1800-х годов сформировалось большинство основ индустрии шрифтов. Жизнь шрифта начиналась на бумаге, когда дизайнер-шрифтовик тратил недели или месяцы на наброски всех необходимых букв. После того, как они были сделаны, рисунки шрифта превращались в шрифт – физические свинцовые блоки.
Вам нужно было купить один или несколько таких блоков для каждой буквы. Вам также нужно было купить дополнительные металлические блоки для текста разного размера. Но размер шрифта не определялся размером букв – это была высота металлического блока, содержащего их, выраженная в единице, известной как точка (каждая точка была 1/72 дюйма, или около 0,4 мм). Высота блока была известна, но внутри него дизайнер-шрифтовик мог делать все, что хотел: шрифты одного размера могли быть больше или меньше, их базовая линия (линия, на которой «сидит» каждая буква) размещалась выше или ниже и т. д.
Четыре металлических шрифта с одинаковым размером шрифта 16pt. Обратите внимание, что некоторые шрифты занимают больше места, чем другие, и базовые линии везде разные
Когда гарнитура была закончена и шрифты сделаны, шрифтолитейный цех, на котором работал дизайнер, продавал их типографиям. Те, в свою очередь, использовали наборщиков, чья работа заключалась в том, чтобы раскладывать металлические блоки словами, затем предложениями, затем абзацами, а потом страницами.
Наборщики могут размещать строки блоков сразу один за другим, в результате получаются сплошные неразрывные блоки свинца. Однако обычно, они вставляли очень узкие полоски металла, чтобы дать тексту «дышать» и облегчить глазам читателя переход от одной строки к другой
Добавление лидинга, чтобы увеличить пространство между строками текста
Поскольку разделительные полоски были сделаны из свинца, практика добавления этого пространства получила название лидинг (от англ. Lead – свинец). Вот пример шрифта 16-pt с лидингом 4-pt, который в результате дает нам текст с комбинированной высотой строки 20pt.
Найти правильное значение лидинга было искусством. Он должен был отличаться в зависимости от размеров шрифта и длины строк. Даже работа с одинаковым размером шрифта и одинаковым количеством символов может сделать один шрифт тесным, а другой – плавающим в пространстве.
Слева один литейный завод хвастается, что их базовые линии наконец-то согласованы. Справа – анонс новой идеи: размеры шрифтов, выражены цифрами, а не произвольным набором имен. Одна из этих проблем остается нерешенной
Это была относительно простая система с четко определенными ролями и правилами. Шрифт приходил от литейного цеха в виде монолитного неизменяемого блока, а высоту строки можно было только добавить, но не уменьшить. Да, вы могли заказать встроенный шрифт с нестандартной высотой строки, но это было необычно. (Любой такой шрифт получал обескураживающее название – «шрифт-бастард», ориг. – bastard type). Ваша работа заключалась в том, чтобы сложить блоки и разместить их так, как вам хочется.
С пикселями пришли проблемы
С появлением компьютеров данный порядок был нарушен. Когда мы перешли от бумаги и металла к экранам и программному обеспечению, типографика унаследовала все, что могут предложить компьютеры, включая баги, несовместимости и обновления.
Шрифты больше не были сплошными свинцовыми блоками; вместо этого они принесли с собой наборы чисел, упакованных в файлы. Дизайнер-шрифтовик или литейщик шрифтов также должны были подготовить свои шрифты в различных форматах файлов в соответствии с требованиями ранних графических платформ – Windows, Macintosh и забытой в настоящее время OS/2. (К тому же, рендеринг шрифтов на определенной платформе иногда был странным или глючным, и шрифтолитейные цеха тоже должны были к этому приспособиться).
Конечно, не все было так ужасно. Компьютеры дали дизайнерам шрифтов, и наборщикам беспрецедентную свободу. Пиксели подвергались нескольким ограничениям металлической вселенной – слова могут перекрываться или выходить за пределы своих некогда жестких полей. Наборщик может добавить столько лидинга, сколько нужно. Кроме того, вы можете вообще убрать лидинг.
Добавление и удаление лидинга
В физическом мире текстовое поле должно иметь фактические минимальные размеры, поскольку лидинг может быть только добавлен. Но с цифровым шрифтом высота строки шрифта по умолчанию может быть установлена на совершенно произвольное число. И часто она становится выше размера шрифта и более удобна для чтения (в отличие от сплошной компоновки, которая обычно кажется слишком тесной).
Четыре цифровых шрифта с размером шрифта 16pt и высотой строки 100% (по умолчанию)
Но, чтобы привыкнуть к вновь обретенным свободам потребовалось некоторое время. Ранние графические программы, такие как Photoshop или QuarkXPress, все еще использовались для проектирования бумажных проектов, где вы имели абсолютный контроль над шрифтами и могли с высокой точностью все измерять и позиционировать. В результате они руководствовались теми же принципами и тем же словарем, что и печатная типографика. Например, дизайнер, использующий Photoshop, по-прежнему должен указать шрифт 16pt, а затем добавить 4 точки для лидинга.
Окно настроек шрифта из ранних версий Photoshop и QuarkXPress. Самые внимательные могут заметить, что значения лидинга не совпадают с легендами, намекая на проблемы с выравниванием в интерфейсе в ближайшем будущем
Другие программы делали это немного по-другому. Иногда вместо лидинга они спрашивают вас о высоте линии (в данном случае 20 точек). Или вместо этого вы можете сказать: «Я хочу, чтобы высота линии составляла 100%», и это означало бы высоту линии шрифта по умолчанию, указанную дизайнером цифровых шрифтов, которая может составлять 16 точек, 20 точек или любое другое значение.
Лидинг в дизайн-программе
С распространением компьютерных экранов они стали местом назначения типографики. Вместе с этим возникли разные потребности. В частности, в дизайне пользовательского интерфейса стало гораздо важнее аккуратно центрировать текст вертикально рядом с иконкой или аватаром – проблема, которая не была столь важной в мире печати.
В то же время некоторые старые традиции исчезли. Шрифты и высота строк стали чаще выражаться в пикселях, а не точках. После исчезновения свинца слово «лидинг» постепенно заменялось более абстрактным термином «межстрочный интервал». (К счастью, никто не додумался до «пикселинга» или «электронинга»).
Все конкурирующие стандарты шрифтов тоже сошлись в одной точке. Индустрия изобрела OpenType, – единый тип шрифта, который может работать везде. Хотя это было иллюзией – внутри файла шрифта все равно будет три разных набора значений, и разные платформы и программы будут выбирать только один из этих наборов.
Шрифт P22 Johnston Underground с тремя разными наборами встроенных метрик, в зависимости от платформы
Эра интернета
Затем в 1989 году появился Интернет – и проблемы усугубились.
Люди, собирающие строительные блоки раннего Интернета, приняли два решения, которые изменили природу высоты строки. Во-первых, они распределили дополнительное пространство, которое когда-то было полосой свинца, над и под каждой строкой. Они назвали новую систему «half-leading».
Лидинг на экранах (слева) и half-leading в Интернете (справа)
Я обратился к создателям CSS, чтобы понять причину этих изменений. Они объяснили мне, что, хотя ранние предложения по созданию таблиц веб-стилей соответствовали миру печати, у них были веские причины для того, чтобы принять решение создать half-leading. А именно, у текстовых полей в Интеренете было больше обязанностей.
В мире печати или ранних программ, текстовое поле должно было содержать внутри себя только текст. Интернет просил большего. «Я знал, что half-leading не был традиционным концептом типографики», – отметил Берт Бос, работавший над CSS1 в 1995 и 1996 годах. «Но у меня возникла проблема с добавлением лидинга только под строкой, когда вы помещаете фон позади нее или границу вокруг нее».
Если бы лидинг появлялся только в нижней части такого текстового поля, он был бы слишком тяжелым и требовал дополнительной работы, по улучшению внешнего вида. Half-leading стал решением этой новой проблемы.
Другое изменение, добавленное CSS? Высота строки 100% была переопределена, как «100% размера шрифта». Ранее дизайнер шрифтов мог назначить 16-пиксельному шрифту высоту строки по умолчанию, равную 20 пикселям. Но в Интернете 100% -ая высота строки 16-пиксельного шрифта составит ровно 16 пикселей, независимо от того, что предписывал оригинальный дизайнер.
Причина этого изменения была проста: знание высоты строки шрифта по умолчанию требовало загрузки этого шрифта, что могло быть очень медленным на заре Интернета. Умножение высоты строки на размер шрифта, с другой стороны, может быть сделано немедленно. «Мы хотели сделать как можно больше вычислений, не загружая шрифт», – отметил Хокон Виум Ли, один из создателей CSS. Высота строки больше не понимала шрифт внутри. К счастью, шрифты не должны вписываться в физические рамки, так что это не было большой проблемой.
Посмотрите на разнообразие в четырех цифровых шрифтах с размером шрифта 16pt и высотой строки 100% в Интернете
Тот же шрифт, что и раньше, имел бы размер 16 пикселей, но высота строки 20 пикселей теперь будет выражаться как 125% или 1,25, поскольку 16 × 1,25 дает ровно 20. (Традиционные 100% сохранились в одном конкретном случае, как line-height: normal).
(Half-)leading может быть выражен в CSS тремя способами
Интернет также забрал часть контроля у наборщиков. То, что в эпоху печати было абсолютными правилами, теперь стало рекомендациями. Позиционировать текстовое поле именно там, где вы хотели не только стало сложнее, это также часто не поощрялось. В конце концов, веб-браузеры можно найти на совершенно разных компьютерах, каждый из которых имеет свой экран и свой набор установленных шрифтов.
Браузеры, как и платформы до них, теперь должны были взять на себя часть ответственности за рендеринг и набор шрифтов, но, как вы можете себе представить, они также имели свои собственные баги и особенности. Каждый работал немного по-своему: будь то выравнивание, округление пикселей вверх или вниз, или интерпретация различных заклинаний CSS.
Историю веб-дизайна можно рассматривать как ряд напряженных отношений между дизайнерами, которые хотят, чтобы все было расположено с максимальной точностью, и Интернетом, частично отвергающим подобный контроль. Одной из неожиданных жертв этого стала высота строки. Ранний Интернет не позволял легко вертикально центрировать текст. Буквально десятилетия шуток о том, что выравнивание текста по иконке рядом с ним было самой сложной проблемой в информатике, но высота строки обеспечивала быстрый обходной путь для ситуации, гораздо более распространенной в дизайне интерфейсов, чем в мире печати.
За несколько коротких десятилетий изобретение Тима Бернерса-Ли вышло за пределы чьего-либо воображения. Но сеть не захватила весь мир. Настольные приложения превратились в нативные приложения для iOS и Android – и они продолжали смотреть на шрифты с точки зрения печати.
Теперь на каждом компьютере были приложения и веб-сайты, и они смотрели на шрифты немного по-разному. Трудно было сказать, какой подход был более правильным, но было легко заметить, что они несовместимы.
Еще молодая цифровая типографика быстро накопила свои причуды и проблемы. В мире клавиатур есть шутка: «Почему эта клавиша расположена в таком странном месте на клавиатуре? Потому что так было на клавиатуре до этого». То же самое относится и к типографике.
Платформы и браузеры начали добавлять хаки и исключения, чтобы все выглядело так, как они делали на предыдущих популярных платформах и в браузерах, а дизайнеры шрифтов компенсировали причуды рендеринга, перемещая элементы. Самое главное: у людей формировались разные ожидания в зависимости от того, где они впервые начали взаимодействовать с типографикой.
Конечный результат? Больше не было единого восприятия шрифтов.
Изменения в Figma
Этот мир, со всеми особенностями и проблемами высоты строки, вероятно, не тот, который мы бы выбрали для наследования при запуске Figma ;). Однако, у нас не было выбора. И, вдобавок ко всем ранее упомянутым проблемам, у Figma были свои уникальные особенности:
- люди используют Figma для проектирования на разных платформах
- люди используют Figma для проектирования для разных платформ
- люди делают все это, работая вместе (используя мультиплеер)
- Figma существует в более обширной экосистеме и должна понимать и уважать ее
Больше нет единого восприятия шрифтов ... и все же Figma должна думать о шрифтах единым способом. Мы не можем по-разному рендерить шрифты на разных платформах, потому что это может создать проблемы для людей, совместно работающих над одним файлом. Мы хотели поддержать проектирование для iOS устройств в веб-браузере Chromebook или приложений Android на Mac, но нам не хотелось делать набор переключателей для интерфейса Figma под разные платформы. Нам нужно было создать удобный, функциональный интерфейс, но мы также понимали, что часто конечный результат работы в Figma находится в другом месте, например, в CSS или исходном коде.
Чтобы достичь всех своих целей, Figma должна взять на себя ответственность за все пространство – интерпретировать файлы шрифтов, принимать решения, ранее зарезервированные для платформ и браузеров, и сужать пространство дизайн-решений
Изначально Figma заимствовала правила из мира печати: межстрочный интервал добавлялся ниже, а «100%» означало «высоту строки шрифта по умолчанию». Однако со временем стало очевидно, что люди все меньше и меньше думают о шрифте или используют его подобным образом. Вместо этого большинство ожидает, что шрифты будут вести себя, как в Интернете. Наш подход к шрифтам вызывал проблемы при передаче проектов разработчикам и даже во время проектирования.
Мы слышали от многих пользователей, что подход Figma к тексту сбивает с толку, поэтому мы внимательнее к нему присмотрелись. Мы наблюдали, как люди использовали Figma для проектирования визуальных элементов и интерфейсов для всех видов платформ. Мы создали инструменты, которые помогают нам понять, как разные платформы используют текст. Мы погрузились в историю, чтобы разобраться откуда взялись различные высоты строк и интерпретации типографики.
Мы создали специальный инструмент для исследования высоты строки на разных платформах. Вы тоже можете его попробовать
И мы прошли через множество мрачных переулков типографики, мест, которые я бы не хотел, чтобы вы когда-либо посещали: жульнические шрифты, смехотворно высокие текстовые курсоры, выделения, которые накладывались или не работали.
Мастер-файл Figma со всеми нашими исследованиями по высоте строки
После всех исследований и обсуждений мы остановились на определенном наборе изменений обработки высоты строки в Figma. Это решение, которое, мы надеемся, удовлетворит ваши потребности и варианты использования, но при этом не вызовет проблем с менее популярными вариантами.
1. Распределение по высоте строки
Теперь Figma будет распределять высоту строки в текстовых полях, как в Интернете. Это должно помочь многим пользователям в решении большинства задач, а не только при проектировании для Интернета.
2. Обработка последующих строк
Тем не менее, каждая последующая строка будет добавлять лидинг сверху. Это отличается от CSS, где лидинг добавляется сверху и снизу, и отличается от предыдущего поведения Figma, когда лидинг размещается снизу. Мы полагаем, что легче контролировать текст, если дополнительный лидинг будет в одном месте, так как люди часто используют высоту строк, чтобы разделить строки текста.
3. Процент размера шрифта
Высота строки 100% теперь означает «100% размера шрифта», а не «100% высоты строки шрифта по умолчанию». Это должно упростить вычисления и соответствовать тому, как большинство людей думают об этом значении.
Текстовые поля также начинаются с автоматической высоты строки. Когда вы переключаетесь между шрифтами, мы настраиваем высоту строки в соответствии с высотой строки шрифта по умолчанию. Это облегчит изучение различных шрифтов и сделает текст в любом случае великолепным. Конечно, мы не будем этого делать, если вы укажете высоту строки в пикселях или процентах.
4. Высота строки в пикселях
Кстати, о пикселях... отныне, когда вы скажете: «Я хочу, чтобы высота строки была 20 пикселей», мы будем более настойчиво соблюдать это – даже когда Интернет не будет этого делать (высота строки в CSS на самом деле минимальная высота строки). Мы наблюдали, как люди используют определенные значения высоты строки для выравнивания, и мы хотим это учитывать.
- ?❤️✏️
Мы также наблюдали, как люди (и мы сами) раздражаемся, когда, вставляя эмодзи, растягиваем высоту строки и нарушаем ритм текста. Теперь, если вы разбавите текст эмодзи, мы больше не будем расширять строку.
Взаимодействия между эмодзи и текстом заслуживают отдельной книги!
6. Измерение шрифта
Ранее мы интерпретировали файлы шрифтов по одному методу. Мы узнали, что этот метод приводил к тому, что некоторые шрифты отрисовывались немного выше, чем ожидали люди. Сейчас это исправлено.
7. Межбуквенный интервал
Последняя буква в строке имеет дополнительный межбуквенный интервал, Figma теперь будет игнорировать это. Это отличается от Интернета / CSS, но это должно упростить центрирование текста.
Нет единственно верного восприятия шрифтов, но мы считаем - что это лучший способ. Он должен решить больше актуальных проблем, чем наш предыдущий подход, и, насколько нам известно, не должен ничего усложнять. Теперь на панели «Код» мы выводим больше информации, которая должна помочь в переходе от проектирования к разработке.
Есть некоторые вопросы, которые мы не можем решить. Например, дизайнер-шрифтовик может решить поместить шрифт очень высоко в текстовом поле, и мы должны уважать его пожелания. Нет единого мнения, что такое на самом деле вертикальное выравнивание текста. Мир шрифтов – это мир, в котором вещи часто кажутся правильными, даже если измерения не совсем совпадают. Любой из приведенных ниже примеров можно считать выровненным по вертикали – и принимать решение должен дизайнер, а не Figma.
Как показывают эти примеры, вертикальное выравнивание может означать много разных вещей
Но в целом мы надеемся, что Figma будет делать правильные вещи чаще, чем раньше, и позволит дизайнерам быстрее принимать решения (а разработчикам лучше понимать эти решения). Я не думаю, что люди должны знать о семи нюансах, которые я только что перечислил. Цель состоит в том, чтобы рендеринг шрифта в Figma просто работал.
Мы также хотим проявлять уважение ко многим проектам, которые вы, возможно, уже создали в Figma. Вы получите только одно из вышеуказанных обновлений рендеринга текста, если создадите новое текстовое поле, но мы не будем автоматически обновлять ни одно из ваших ранее созданных текстовых полей, потому что это может изменить положение объектов в дизайне.
Вы можете обновить ранее созданные текстовые поля по желанию (либо одно за другим, либо выбрав все элементы на холсте и применив пакетное действие), и любые изменения будут обратимы.
Все ведет к этому
Недавно я присоединился к команде дизайнеров Figma, чтобы заняться вопросами верстки, и это был один из проектов, с которого я начал. Я многое узнал о размещении текста, и я почти уверен, что едва исследовал вершину айсберга.
В урбанистическом дизайне есть поговорка: «Если вы понимаете город, этот город мёртв». Жизнь вносит свои коррективы и города развиваются непредсказуемо. Можно смотреть на это, как на нечто запутанное или раздражающее, но можно также считать это красивым и очень человечным. Я часто смотрю на типографику, как на предмет бесконечной сложности, с богатой историей и смыслом. Я в восторге от всего этого, и для меня честь стать частью этого путешествия.
Мы будем продолжать работать над шрифтами Figma и улучшать их, и я надеюсь, что вы продолжите помогать нам в этом. Пишите нам в Twitter или на почту type@figma.com.
Скоро будут еще более интересные новости о шрифтах. Жду не дождусь, чтобы поделиться ими.
Перевод статьи Marcin Wichary
Топ коментарі (0)