4 заметки с тегом

дизайн-вопрос

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

Пишите: mike.ozornin@gmail.com.

Дизайн-вопрос: как выбрать шрифт

У меня на главной странице давно висит такой текст:

Веду рубрику «Дизайн-вопрос». Отвечаю на вопросы о дизайне и смежных областях. Не халтурю, не пишу отписки и отвечаю на совесть: частенько для ответа приходится найти, прочитать и изучить исследования, рекомендации, набрать и подобрать иллюстрации или примеры. Вопросы пишите на mike.ozornin@gmail.com.

Я не думал, что кто-то его вообще видит, но на днях получил неожиданный вопрос. Что ж. Назвался груздем — полезай в кузов.

Матвей Правосудов спрашивает:

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

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

Вопрос:
Расскажи, пожалуйста, как научиться осознано подходить к выбору гарнитуры и уметь доказывать, что именно она нужна?

Матвей!

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

Системный шрифт

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

Системный — разный везде

Первый — системный шрифт означает разный внешний вид на разных платформах.

Для получения некоего «системного шрифта» недостаточно просто вписать Ариал. Ариала нет на маке, компьютерах с линуксом и мобильных. Если на этих платформах есть целевые пользователи, то кроме Ариала для них понадобится другой шрифт: Робото для андроида, Сан-Франциско для макос и айос, какой-нибудь sans-serif для линуксов (Опенсанс, Либерейшен или какой-нибудь Дежавю).

По своей идее на «системный шрифт» похож native font stack. По сути это самый родной шрифт на каждой из платформ. Вот как это выглядит в виде CSS-кода:

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

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

Сегой и Робото

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

Каждая поддерживаемая платформа это дополнительный системный шрифт, который нужно перепроверить и при необходимости адаптировать. Лишний код на адаптацию: компенсация пиксельных отступов, размеров глифов, — это лишнее визуальное тестирование. Можно обойтись и без тестирования, но тогда будет выглядеть «как получится». Общий шрифт снимает бо́льшую часть этих вопросов. Такие аргументы особенно понятны разработчикам и инженерам по качеству. Им бы вообще лишь бы что-то везде сделать одинаковым, чтобы не ломалось в будущем :—)

Системный — без своего «Я»

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

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

Конкретно Ариал — не очень

Третий минус конкретно у ариала. Он не очень хороший (но это мало кто заметит) и у него может быть не хватить начертаний. Если вы захотите тонкое начертание, то ариал вам не помощник.

Вместо вывода

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

Как выбрать свой шрифт

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

1. Формулирую требования

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

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

Функция

  1. Начертания
    Минимум: Обычное, полужирное, тонкое (все с курсивом), хорошо если больше.
  1. Набор цифр
    Есть маюскульные цифры, минускульные опциональны. Есть пропорциональные и моноширинные цифры (скорей всего это есть у всех), моноширинные дефолт.
  1. Хорошая читаемость
    Лучше открытый или полуоткрытый шрифт с высоким x-height. Хорошо бы иметь форму 6 и 9 как в Авенире и Лато, а не как в Гельветике (иногда доступны Opentype-фичей Straight-sided six and nine). Должен хорошо читаться даже на плохих экранах с TN-матрицей.
  1. Универсальный
    Было бы хорошо, чтобы он хорошо работал и в печатной продукции (руководства, отчеты, маркетинговые материалы). Вдруг мы сможем использовать его и там.
  1. Высокая емкость
    В наших продуктах много данных, поэтому хорошо бы, чтобы шрифт не был слишком широким.

Эстетика

  1. Чистый.
  1. Простой, но не упрощенный.
  1. Выглядит технологично.
    Создаёт ощущение технологий и хай-тека, а не теплой ламповости или стимпанка (как Текстбук, Гилл или 20 копеек).
  1. Нормальная кириллица.
  1. Не должен казаться очень чужеродным, создавать из-за непривычности ощущение халтуры.

Доступность

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

У вас требования могут быть другие.

У кого-то будет другая эстетика: не строгая технологичность, а детская няшность, ощущение швейцарии или теплая ламповость.

У кого-то будут другие требования к функции: кто-то предпочтет узнаваемость и уникальность в угоду считываемости. У кого-то будут очень строгие требования к емкости шрифта. Именно из-за особых требований к емкости шрифта родились шрифты PT Astra.

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

  1. Шрифт должен иметь своё лицо, отличаться от конкурентов.
  2. И в то же время быть спокойным, нейтральным, не слишком характерным.
  3. Выражающим наши ценности:
    открытый,
    современный,
    умный,
    нейтральный,
    локальный,
    технологичный, но с человеческим лицом.
  4. Сделанным в первую очередь для кириллического набора.
  5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах.
  6. Совпадающим по основным метрикам и пропорциям с Ариалом.
  7. Имеющим несколько степеней насыщенности.

Отсюда: https://medium.com/@k00/шрифт-яндекса-yandex-sans-1c2ab7dfd537

Или вот требования от которых отталкивались при разработке шрифта для интерфейса государственных систем России (ещё не вышел):

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

  • Высокие прописные;
  • Очень крупные строчные;
  • Большая ёмкость, т. е. знаки скорее узкие, чем широкие;
  • Просторные межбуквенные расстояния с расчётом на экран не слишком высокого разрешения;
  • Короткие выносные элементы, чтобы экономить место на служебных панелях и кнопках;
  • Скорее гротеск, чем антиква;
  • Скорее открытый или полуоткрытый;
  • Технически подготовленный для работы на экране.

Эти параметры, в общем, не имеют отношения к характеру шрифта, но в рамках жанра должны выдерживаться. Можно привести примеры интерфейсных шрифтов: Lucida Grande, Segoe UI, Roboto, San Francisco UI и т. д.

Отсюда: https://leksandra.livejournal.com/120045.html

Один из авторов шрифта Yandex Sans Кристиан Шварц в своей лекции про шрифты рассказывает как они искали форму шрифтов для разных компаний. Показателен пример ДойчеБана (немецких железных дорог). Кристиан с командой долго не могли ничего придумать. В какой-то момент решили начать с расписания, ключевой вещи. И они сделали цифры, которые в этом расписании хорошо различаются. И конкретна эта различимость букв стала основной будущего шрифта:

Лекция Кристиана Шварца (начало дойчебана с 16:25).
001. Making something out of something: Typefaces, history, culture, and meaning

2. Собираю таблицу

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

Таблица выглядит как-то так:

Шрифт Плюсы Минусы Цена Какие-то комментарии
График
Лато
Робото
Фира

Шрифты с Гугл.Фонтс нужно я дополнительно проверяю:

3. Смотрю в деле

Скачиваю и устанавливаю шрифты (для бесплатных), платные беру в аренду или ищу в библиотеке. После установки проверяю их в деле: меняю в макете, плакате, брошюре или интерфейсе. Для веб-интерфейсов я пишу юзерстиль (userstyle) в браузере, где меняю шрифт на новый. После этого начинаю пользоваться продуктом как обычно.

Через некоторое время понятно, как он: ок или нет, какие плюсы и какие минусы. Иногда после использования какого-то шрифта я уточняю требования и отсеиваю шрифты.

Вот некоторые советы Ани Даниловой на сайте бюро:

4. Выбираю доступные

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

Как убедить команду в выбранном шрифте

Алгоритма как убедить у меня нет. Мне не приходилось много спорить о шрифтах с недизайнерами. Мои собеседники соглашались с результатом (картинкой), или мне верили заранее, или мои объяснения (все 4 шага), помогали.

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

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

Надеюсь чем-нибудь помог. Пишите, если остались вопросы.

В заключение оставлю разные шрифтовые доклады, которые мне кажутся подходящими к теме поста:

11 декабря   дизайн-вопрос
Подписаться на блог…

Дизайн-вопрос: зачем в мире столько шрифтов

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

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

Носитель и технология

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

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

Известный всем шрифт «Таймс Нью Роман» был создан специально для газеты Таймс. В отличие от других газет у Таймс была хорошая бумага и шрифт мог использовать это преимущество. Процитирую сайт Паратайпа:
Новый ри­сунок оп­равдал ожи­дания Мо­рисо­на, ко­торый хотел соз­дать прив­ле­катель­ный текс­то­вой шрифт с вы­сокой удо­бочи­та­емостью и од­новре­мен­но по­вышен­ной ём­костью для печати на хо­рошей бумаге. Именно такой рес­пекта­бель­ный шрифт мог и удов­летво­рить тре­бова­ния ру­ководс­тва газеты «Таймс», и со­от­ветс­тво­вать ус­ло­ви­ям про­из­водс­тва газеты, а также предс­тав­ле­ни­ям ее чи­тате­лей.
http://www.paratype.ru/arts/TimesNewRoman

Мода и исторические периоды

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

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

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

Функция: какую задачу шрифт решает

Акцидентный привлекает внимание и создает атмосферу, текстовый создаёт как можно более равномерную полосу (она называется «серебро набора»), не отвлекает от чтения и всячески ему помогает. Экранный хорошо виден на плохом старом мониторе с низким разрешением, Вердана хорошо смотрится на плохом экране в мелком. Тонкие начертания снижают шум на картах, диаграммах и помогают создать информационные слои. Навигационные обычно имеют небольшие прописные и хорошо различимые строчные. Шрифт для автомобильных номеров затрудняет их подделку: из „о“ нельзя сделать „р“ или „q“, пририсовав сбоку палочку. Есть даже шрифты для дислексиков.

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

Что будет, если ошибиться с типом шрифта:

Эстетическая: насколько шрифт красив сам по себе

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

Частая ошибка начинающих шрифтовых дизайнеров, особенно нерусскоязычных: если нет буквы „И“, то можно отразить букву „N“. Эта халтура всегда будет видна по толщине штриха. У „N“ наклонная черта — основной штрих, он будет толстым, у „И“ основные вертикальные, а наклонный — соединительный, поэтому он будет тонким.

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

Разные ссылки

2016   дизайн-вопрос   шрифт
Подписаться на блог…

Дизайн-вопрос: темная и светлая темы

Андрей Чулков спрашивает:

Какое сочетание более благоприятно для глаз с точки зрения чтения или работы с текстами — темные буквы на светлом фоне или наоборот светлые буквы на темном фоне?

Чаще говорят, что текст вывороткой (светлым на черном или темном цветном фоне) трудно читать. Правило не жесткое, так нужно не всегда, Лебедев приводит его как пример того, что в дизайне правил нет (http://www.artlebedev.ru/kovodstvo/sections/99 ).

Мне удалось найти несколько исследований.

Темный на светлом лучше, если вокруг светло

http://www.tandfonline.com/doi/abs/10.1080/00140139.2013.790485
Темные сиволы на светлом фоне лучше читаются и именно такой вариант рекомендуется для читателей всех возрастов. (здесь и далее перевод мой)

https://www.quora.com/Usability-Are-there-any-studies-regarding-readability-of-inverted-light-on-dark-schemes-in-software-design
Томас Финни из Фонтлаба: при хорошем освещении черный цвет на белом фоне предпочтительней. Однако в темноте другие решения могут быть удачней.

Там же: на типографической конференции Тайпо Берлин в мае 2016 года Данин At Typo Berlin in May 2016, Nadine Шахин из Монотайпа рассказала о результатах исследования. Если коротко, лучше черный на белом. Но ночью для водителей белый слишком яркий, поэтому лучше использовать инверсную схему. Исследование продолжается.

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

https://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis
Темный цвет на светлом фоне читается на 26% процентов лучше, чем светлый на темном.
Джейсон Харрисон (Jason Harrison) из университета Бритиш Коламбиа объясняет эти 26% так: людям с астигматизмом (примерно 50% всех людей) трудней читать светлое на темном, такая комбинация вызывает у них затуманивание шрифта.

Наверное, есть ещё исследования про усталость от экрана, но я их не встречал.

Синий мешает спать

https://justgetflux.com/research.html
На сайте флюкса собраны исследования о том, что вечером переизбыток синего освещения мешает засыпать. Флюкс подкрашивает экран в желто-красные оттенки после заката и делает нахождение за компьютером комфортней. Проверил на себе, рекомендую.

Хотя бы минимально контрастно

Консорциум в3ц занимается в том числе вопросами доступности сайтов. Их рекомендация — контраст не менее 4.5:1 для обычного текста и 3:1 для крупного.

Мой опыт

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

Выворотный шрифт кажется немного тоньше аналогичного на светлом, поэтому ещё надо делать чуть жирнее (хорошо, если в шрифте есть достаточно начертаний). На картинке ниже у светлого на черном + шаг толщины (medium против regular).

Выводы

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

Дизайн-вопрос: рубленый шрифт

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

Первый — про рубленые шрифты в книгах. Андрей Чулков спрашивает:

Прочитал что для книг нужен рубленый шрифт, это так?

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

Традиция для книг — с засечками

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

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

Специфические книги

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

Иногда книги печатаются рубленым шрифтом из-за стилистических требований или требований моды. Например, «Новая типографика» (http://www.artlebedev.ru/izdal/novaya-tipografika-2016/) неспроста набрана именно так. Во время написания книги (1920-е годы) гротеск сам по себе олицетворял современность и эту самую новую типографику. Было бы странно набирать её «старомодным» шрифтом.

Влияние личных предпочтений

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

Для закрепления

  1. Тот, кто заявил «для книг нужен рубленый шрифт» не шарит и слишком категоричен.
  2. Книги обычно набираются шрифтом с засечками, так сложилось исторически.
  3. Значимой разницы в технических параметрах: скорости считывания, различимости, числе ошибок между шрифтами с и без засечек не выявлено.
  4. Выбор шрифта — это не всегда вопросы считывания, это ещё вопросы ощущения, стиля, настроения, передачи эпохи.

Ссылки

Вот пример исследования: http://www.sciencedirect.com/science/article/pii/S0042698905003007
Вот ещё обзор исследований: http://digilinux.ru/2013/05/13/sans-serif-legibility/

2016   дизайн-вопрос   шрифт
Подписаться на блог…