Шрифт для интерфейса государственных систем. Начало процесса
Расскажу про начало текущего проекта, чтобы ответить на заданные и потенциальные вопросы.
Речь идёт о разработке интерфейсного шрифта по заказу AIC и Лаборатории Артёма Геллера, для проекта «Дизайн государственных систем» (http://gov.design/, в ФБ можно почитать тут: https://www.facebook.com/gov.design/).
Возможно, многие знают, что шрифт для конкретной практической задачи, как правило, обладает определёнными параметрами. В их число входят, например, горизонтальные и вертикальные пропорции, контраст, длина выносных элементов, апертура, насыщенность и т.п. Поэтому, когда речь идёт об интерфейсном шрифте, в голове дизайнера сразу всплывает конструкция:
- Высокие прописные;
- Очень крупные строчные;
- Большая ёмкость, т.е. знаки скорее узкие, чем широкие;
- Просторные межбуквенные расстояния с расчётом на экран не слишком высокого разрешения;
- Короткие выносные элементы, чтобы экономить место на служебных панелях и кнопках;
- Скорее гротеск, чем антиква;
- Скорее открытый или полуоткрытый;
- Технически подготовленный для работы на экране.
Эти параметры, в общем, не имеют отношения к характеру шрифта, но в рамках жанра должны выдерживаться. Можно привести примеры интерфейсных шрифтов: Lucida Grande, Segoe UI, Roboto, San Francisco UI и т.д.
Поэтому, когда Артём и Антон пришли в Паратайп, чтобы обсудить возможную работу над шрифтом для сайтов/интерфейсов, то первым, что я предложила, было сделать чисто функциональный шрифт на основе некоей усреднённой картины распространённых сейчас гротесков:
(здесь пять шрифтов, наложенных один на другой)
и с нужными пропорциями.
Лирическое отступление: вопрос нейтральности и не-нейтральности шрифта, особенно текстового, я считаю очень важным; свои соображения на эту тему рассказывала на прошлом Серебре набора:
Однако идея с усреднённым вариантом не получила продолжения, наоборот, к задаче добавился сложный и интересный пункт: шрифт должен иметь выраженный характер и быть узнаваемым, не теряя при этом различимости и рабочих качеств.
Оставалось только определиться с характером.
Мне кажется, что в проектах такого рода мнение заказчика не просто важно, а первостепенно, т.к. серьёзный дизайнер (команда дизайнеров) системы или интерфейса лучше любых сторонних специалистов понимает свои задачи. Поэтому моим делом было бы обеспечить соответствие будущего шрифта специфике жанра и соответствующим параметрам, но право решать, каким именно шрифт должен быть по характеру, должно принадлежать разработчикам системы в целом, а не шрифтовому дизайнеру.
И разработчики, посовещавшись, решили, что по характеру шрифт должен быть открытым и дружелюбным.
Сочетание понятий «дизайн государственных систем» и «открытый и дружелюбный» практически неизбежно приводит к ассоциации со шрифтом голландского правительства:
Так оказалось, что мы делаем голландский гротеск.
То есть:
- мы делаем шрифт с пропорциями и всеми характеристиками интерфейсного шрифта;
- это голландский гуманистический гротеск (развивать эту тему можно долго, но в книге Геррита Ноордзея «Штрих. Теория письма» она раскрыта гораздо лучше, чем в любой возможной статье в жж);
- основная сфера применения - интерфейс, однако шрифт должен нормально работать в сплошном тексте на сайтах и в принципе быть пригодным для всего;
- и всё это должно укладываться в одно начертание, чтобы не было шансов перепутать, какое куда.
«Восхитительно»,- подумала я.
И начала делать выводы...
Пункт 1. Гуманистический гротеск хорош (для наших целей) тем, что у него очень открытые формы. То есть открываю знаки, насколько это возможно. Срезы штрихов делаю не перпендикулярными скелету, а горизонтальными или вертикальными, чтобы проще было потом с экранным отображением.
Пункт 2. Голландский шрифт хорош тем, что можно сделать практически перпендикулярные примыкания штрихов (см. шрифты Герарда Унгера). Они будут поддерживать верх и низ строки и стилистически соответствовать очень открытым знакам типа е или с.
Отступление 2. Из «традиционных» печатных шрифтов к экранно-интерфейсным наиболее близки шрифты для мелкого кегля в условиях плохой бумаги (=низкое разрешение) и экономии места, плюс это скорее выборочное чтение, чем сплошное. То есть учитываем опыт шрифтов для телефонных справочников.
Картинки знаменитого Bell Centennial Мэтью Картера найти довольно легко, поэтому покажу два других шрифта того же времени и для тех же целей. Это Colorado и Galfra французского дизайнера Ладислава Манделя (прошу прощения за качество, это фотографии с экрана, фото Жана-Франсуа Поршеза из архива и доклад Alice Savoie и Dorine Sauzet на текущей конференции АТипИ):
Рисунок знаков очень характерный, именно потому, что в мелком размере шрифты должны работать определённым образом. Стыки штрихов максимально облегчаются, а окончания - утяжеляются; на скриншоте Typofonderie ещё заметно, что верхний горизонтальный штрих толще нижнего - чтобы сконцентрировать внимание на верхней половине слова, которая, особенно в латинице, важнее для чтения.
Итак, с учётом опыта мелкокегельных шрифтов:
Пункт 3. Делаю соединительный штрих в месте примыкания к основному как можно тоньше, чтобы облегчить стыки и избежать тёмных пятен в месте стыка штрихов в мелком кегле.
Пункт 4. В буквах с тремя горизонтальными штрихами (особенно строчных) максимально облегчаю среднюю горизонталь, чтобы увеличить количество белого внутри знака, но сделать это не за счёт непропорционального расширения.
Пункт 5. Окончания штрихов (всех, кроме прямых) с утолщениями, чтобы они не пропадали.
Пункт 6. Детали шрифта делаю с таким расчётом, чтобы в мелком кегле после хинтовки (т.е. технической обработки для нормального отображения на экране) шрифт выглядел «обычным» открытым гротеском, но при увеличении бы его ни с чем нельзя было спутать.
Посмотреть текст на экране мы пока не можем, т.к. хинтовка - завершающая часть процесса, а шрифт ещё находится на стадии дизайна (но в квалификации коллег из технического отдела сомневаться не приходится, наша команда шрифтовых технологов - одна из самых сильных в мире). Поэтому пока что для тестирования используются распечатки:
(это, кажется, не самая свежая версия шрифта, но похожа на нынешнее состояние)
Однако если кому-то придёт в голову шрифт увеличить, то он увидит несколько другую картину:
Или даже так:
То есть чем сильнее мы увеличиваем шрифт, тем более резким и характерным он становится.
Заметит ли это пользователь сайта?
При использовании шрифта по назначению - маловероятно: в наборе детали, особенно на экране, усреднятся, а прогибы диагоналей (например) будут незаметны. Но минимальные изменения в структуре набора будут, причём в нужную (облегчающую процесс чтения) сторону.
Технический момент: пропорции в сравнении с интерфейсными шрифтами:
И ещё технический момент: я теперь работаю в Fontlab VI :)
(а ноль с точкой уйдёт в альтернативы)
Речь идёт о разработке интерфейсного шрифта по заказу AIC и Лаборатории Артёма Геллера, для проекта «Дизайн государственных систем» (http://gov.design/, в ФБ можно почитать тут: https://www.facebook.com/gov.design/).
Возможно, многие знают, что шрифт для конкретной практической задачи, как правило, обладает определёнными параметрами. В их число входят, например, горизонтальные и вертикальные пропорции, контраст, длина выносных элементов, апертура, насыщенность и т.п. Поэтому, когда речь идёт об интерфейсном шрифте, в голове дизайнера сразу всплывает конструкция:
- Высокие прописные;
- Очень крупные строчные;
- Большая ёмкость, т.е. знаки скорее узкие, чем широкие;
- Просторные межбуквенные расстояния с расчётом на экран не слишком высокого разрешения;
- Короткие выносные элементы, чтобы экономить место на служебных панелях и кнопках;
- Скорее гротеск, чем антиква;
- Скорее открытый или полуоткрытый;
- Технически подготовленный для работы на экране.
Эти параметры, в общем, не имеют отношения к характеру шрифта, но в рамках жанра должны выдерживаться. Можно привести примеры интерфейсных шрифтов: Lucida Grande, Segoe UI, Roboto, San Francisco UI и т.д.
Поэтому, когда Артём и Антон пришли в Паратайп, чтобы обсудить возможную работу над шрифтом для сайтов/интерфейсов, то первым, что я предложила, было сделать чисто функциональный шрифт на основе некоей усреднённой картины распространённых сейчас гротесков:
(здесь пять шрифтов, наложенных один на другой)
и с нужными пропорциями.
Лирическое отступление: вопрос нейтральности и не-нейтральности шрифта, особенно текстового, я считаю очень важным; свои соображения на эту тему рассказывала на прошлом Серебре набора:
Click to viewОднако идея с усреднённым вариантом не получила продолжения, наоборот, к задаче добавился сложный и интересный пункт: шрифт должен иметь выраженный характер и быть узнаваемым, не теряя при этом различимости и рабочих качеств.
Оставалось только определиться с характером.
Мне кажется, что в проектах такого рода мнение заказчика не просто важно, а первостепенно, т.к. серьёзный дизайнер (команда дизайнеров) системы или интерфейса лучше любых сторонних специалистов понимает свои задачи. Поэтому моим делом было бы обеспечить соответствие будущего шрифта специфике жанра и соответствующим параметрам, но право решать, каким именно шрифт должен быть по характеру, должно принадлежать разработчикам системы в целом, а не шрифтовому дизайнеру.
И разработчики, посовещавшись, решили, что по характеру шрифт должен быть открытым и дружелюбным.
Сочетание понятий «дизайн государственных систем» и «открытый и дружелюбный» практически неизбежно приводит к ассоциации со шрифтом голландского правительства:
Так оказалось, что мы делаем голландский гротеск.
То есть:
- мы делаем шрифт с пропорциями и всеми характеристиками интерфейсного шрифта;
- это голландский гуманистический гротеск (развивать эту тему можно долго, но в книге Геррита Ноордзея «Штрих. Теория письма» она раскрыта гораздо лучше, чем в любой возможной статье в жж);
- основная сфера применения - интерфейс, однако шрифт должен нормально работать в сплошном тексте на сайтах и в принципе быть пригодным для всего;
- и всё это должно укладываться в одно начертание, чтобы не было шансов перепутать, какое куда.
«Восхитительно»,- подумала я.
И начала делать выводы...
Пункт 1. Гуманистический гротеск хорош (для наших целей) тем, что у него очень открытые формы. То есть открываю знаки, насколько это возможно. Срезы штрихов делаю не перпендикулярными скелету, а горизонтальными или вертикальными, чтобы проще было потом с экранным отображением.
Пункт 2. Голландский шрифт хорош тем, что можно сделать практически перпендикулярные примыкания штрихов (см. шрифты Герарда Унгера). Они будут поддерживать верх и низ строки и стилистически соответствовать очень открытым знакам типа е или с.
Отступление 2. Из «традиционных» печатных шрифтов к экранно-интерфейсным наиболее близки шрифты для мелкого кегля в условиях плохой бумаги (=низкое разрешение) и экономии места, плюс это скорее выборочное чтение, чем сплошное. То есть учитываем опыт шрифтов для телефонных справочников.
Картинки знаменитого Bell Centennial Мэтью Картера найти довольно легко, поэтому покажу два других шрифта того же времени и для тех же целей. Это Colorado и Galfra французского дизайнера Ладислава Манделя (прошу прощения за качество, это фотографии с экрана, фото Жана-Франсуа Поршеза из архива и доклад Alice Savoie и Dorine Sauzet на текущей конференции АТипИ):
Рисунок знаков очень характерный, именно потому, что в мелком размере шрифты должны работать определённым образом. Стыки штрихов максимально облегчаются, а окончания - утяжеляются; на скриншоте Typofonderie ещё заметно, что верхний горизонтальный штрих толще нижнего - чтобы сконцентрировать внимание на верхней половине слова, которая, особенно в латинице, важнее для чтения.
Итак, с учётом опыта мелкокегельных шрифтов:
Пункт 3. Делаю соединительный штрих в месте примыкания к основному как можно тоньше, чтобы облегчить стыки и избежать тёмных пятен в месте стыка штрихов в мелком кегле.
Пункт 4. В буквах с тремя горизонтальными штрихами (особенно строчных) максимально облегчаю среднюю горизонталь, чтобы увеличить количество белого внутри знака, но сделать это не за счёт непропорционального расширения.
Пункт 5. Окончания штрихов (всех, кроме прямых) с утолщениями, чтобы они не пропадали.
Пункт 6. Детали шрифта делаю с таким расчётом, чтобы в мелком кегле после хинтовки (т.е. технической обработки для нормального отображения на экране) шрифт выглядел «обычным» открытым гротеском, но при увеличении бы его ни с чем нельзя было спутать.
Посмотреть текст на экране мы пока не можем, т.к. хинтовка - завершающая часть процесса, а шрифт ещё находится на стадии дизайна (но в квалификации коллег из технического отдела сомневаться не приходится, наша команда шрифтовых технологов - одна из самых сильных в мире). Поэтому пока что для тестирования используются распечатки:
(это, кажется, не самая свежая версия шрифта, но похожа на нынешнее состояние)
Однако если кому-то придёт в голову шрифт увеличить, то он увидит несколько другую картину:
Или даже так:
То есть чем сильнее мы увеличиваем шрифт, тем более резким и характерным он становится.
Заметит ли это пользователь сайта?
При использовании шрифта по назначению - маловероятно: в наборе детали, особенно на экране, усреднятся, а прогибы диагоналей (например) будут незаметны. Но минимальные изменения в структуре набора будут, причём в нужную (облегчающую процесс чтения) сторону.
Технический момент: пропорции в сравнении с интерфейсными шрифтами:
И ещё технический момент: я теперь работаю в Fontlab VI :)
(а ноль с точкой уйдёт в альтернативы)