Дизайнтюа и Фронтендюэль

2/2

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

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

font-optical-sizing: none;

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

Второй способ — искусственное микроотклонение от дефолта. Быстрый костыль для тестирования и отладки.

font-variation-settings: "opsz" 14.001;

Конечно, у каждого шрифта будет своё значение.

1/2

Нашёл в Safari баг с вариативными шрифтами.

Если при font-optical-sizing: auto; явно указать для оси opsz её значение по умолчанию — оно будет проигнорировано, и применится фактический (computed) размер шрифта. Любые другие значения работают нормально.

/* вместо этого */
font-optical-sizing: auto;
font-variation-settings: "opsz" 14;

/* будет нечто такое (ПСЕВДОКОД) */
font-optical-sizing: auto !important;
font-variation-settings: "opsz" clamp(--opsz-min, 1em, --opsz-max);

На скринах видно, как начертание шрифта по всей шкале меняется плавно, но строго в единственной точке ломается и сбрасывается в auto. Математики в таких случаях говорят, что точка на графике выколота.

Хотел зарепортить в баг-трекер, но оказалось, что ошибка известна с 2021 года — уже чинилась, но потом мутировала и возвращалась. Дальнейшие перспективы пока неясны, в 27 версии актуально.
https://bugs.webkit.org/show_bug.cgi?id=227353
https://bugs.webkit.org/show_bug.cgi?id=258944

#браузеры
#вариативные_шрифты

7/7

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

https://developer.apple.com/design/human-interface-guidelines/toggles#Checkboxes

Use a checkbox instead of a switch if you need to present a hierarchy of settings. The visual style of checkboxes helps them align well and communicate grouping. By using alignment — generally along the leading edge of the checkboxes — and indentation, you can show dependencies, such as when the state of a checkbox governs the state of subordinate checkboxes.
[...]
Accurately reflect a checkbox’s state in its appearance. A checkbox’s state can be on, off, or mixed. If you use a checkbox to globally turn on and off multiple subordinate checkboxes, show a mixed state when the subordinate checkboxes have different states.

Умельцы из Quasar прикрутили третье состояние и к свитчу тоже:
https://quasar.dev/vue-components/toggle#indeterminate-state

Не повторяйте за ними, пусть это останется на их совести.

#вопрос_на_понимание

6/7

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

Множественный выбор из массива связанных по смыслу вариантов.
Чекбоксы компактнее и эффективнее группируются в плотные списки.

https://m3.material.io/components/checkbox/guidelines

Checkboxes should be used instead of switches if multiple, related options can be selected from a list. Checkboxes visually group similar items effectively and take up less space than switches.

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

Но всегда помним, что свитчи с отложенной активацией запрещены.

#вопрос_на_понимание

5/7

Вообще, это интересный пример стихийно-разумной эволюции.

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

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

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

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

Картинка из Windows 10 как иллюстрация, что свитчи пролезли на десктоп уже давно.

#вопрос_на_понимание

4/7

Это не мои домыслы, всё прописано в гайдлайнах.

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

Material Design 3

https://m3.material.io/components/switch/guidelines

The effects of a switch should start immediately, without needing to save.
[...]
Avoid using a switch to select multiple options that require people to save. Switches should be immediate. Use checkboxes instead.

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

Microsoft Learn

https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/toggles

Use a toggle switch for binary settings when changes become effective immediately after the user changes them.

https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/checkbox

You can delay committing a check box interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction.

NN/Group

https://www.nngroup.com/articles/toggle-switch-guidelines/

Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state.

Ещё есть пост в блоге WebKit, где разницу в семантике определили так: switch — on/off, checkbox — selected/not selected. Формально это верно, но слишком расплывчато. Такие абстракции дают чрезмерный простор для инерпретаций и потому бесполезны на практике.
https://webkit.org/blog/15054/an-html-switch-control/

#вопрос_на_понимание

3/7

На самом деле ключевое различие чекбокса и свитча вот:

Switch подразумевает, что переключение вступает в силу немедленно. Если пользователь что-то включил — оно сразу должно заработать.

Checkbox может применяться отложенно. Любые дополнительные действия вроде Submit, Save, Update, Apply, Continue и пр.

Например, тумблер Bluetooth самодостаточен и должен быть свитчем. А вот галка «Запомнить меня» при логине — только чекбокс.

Не знаю, можно ли это назвать стандартом. Скорее настоятельная рекомендация, которую к тому же не все знают.

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

Откройте системные настройки актуальных версий Windows, MacOS, Chrome, Firefox или Ozon — там будет много свитчей без кнопок подтверждения. Ну потому что объективно, когда у тебя 25 экранов настроек, ручное сохранение превращается в издевательство.

#вопрос_на_понимание

2/7

В целом новость хорошая, давно пора.

Но меня заинтересовало сопутствующее обсуждение.

В подкасте Веб-стандарты №540 Вадим с Никитой разбирают, зачем вообще понадобилось тащить мобильный контрол на десктоп?
https://www.youtube.com/watch?v=CUCdI5KjMuE&t=679s
https://web-standards.ru/podcast/540/#00:01:30

Ведущие выглядели озадаченно, разговор получился сумбурноватый, и к какому-то определённому выводу не пришли.

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

Это было длинное вступление, теперь к сути.

#вопрос_на_понимание

1/7

Прошла новость, что Chrome вслед за Safari имплементирует в HTML переключатели, как на мобильных платформах. Они же свитчи (switch) или тогглеры (toggle).
https://bsky.app/profile/did:plc:vcrxgrk7qttaunjut34oe5oq/post/3msvco4wsfs2h

Это будет не отдельный тип контрола, а вариация чекбокса:

<input type="checkbox" switch>

Подробное описание работы есть в канале Алексея Назаренко:
https://t.me/alexnozer_dev/398

#браузеры
#вопрос_на_понимание

Занесло недавно в больницу. Там есть грузовой лифт для перевозки лежачих, а внутри — климатическая система в лице китайского вентилятора с кнопками, как на картинке.

Пока ехали, лифтерша просит:
— Нажмите, пожалуйста, вторую кнопку... где единичка.

Это же буквально классика!

There are only two hard problems in computer science:
0. Cache invalidation
1. Naming things
2. Off-by-one errors

Абстракции протекают в реальный мир.

5/5

Базово эти принципы работали и до компьютеров.

Все видели на маркетплейсах такую структуру:

Версия смартфона  . . . Global
Диагональ экрана  . . . 6.3"
Разрешение экрана . . . 2622×1206
Число ядер процессора . 6
Оперативная память  . . 8 ГБ
Встроенная память . . . 256 ГБ
Цвет  . . . . . . . . . Sage Green

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

Заметьте, это не классическая таблица со столбцами однотипных данных, которые можно сравнивать и сортировать. Это перечисление слабо связанных характеристик, которому придали табличный вид.

Такая квазитаблица не несёт аналитической функции, но зато разделяет информационные слои и выстраивает визуальные якоря так, чтобы к ним было удобно привязывать робо-паттерны.

Теоретически, такой список можно переписать ближе к нормальной речи:

— Глобальная версия
— Диагональ экрана 6.3"
— Разрешение 2622×1206
— 6-ядерный процессор
— 8 ГБ оперативной памяти
— 256 ГБ вcтроенной памяти
— Цвет Sage Green

Приемлемо для статьи, которую читают более-менее линейно.

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

В конце концов, почему юзеры ненавидят редизайны? Потому что ломаются привычки, рефлексы и траектории.

Как учил Стив Круг — не заставляйте меня думать.

Но это не должно быть универсальным оправданием любых плохих текстов. Нарушайте правила аккуратно и обдуманно.

4/5

С годами я сформулировал такую теорию.

1. Поведенческая граница между человеком и машиной на самом деле размыта.

Роботы разгадывают капчу и имитируют человеческое общение — это в эпоху LLM знают все.

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

2. Человеческий и машинный интерфейс требуют разных форматов данных.

Машине наиболее удобны бинарные форматы.
Человеку — естественные языки + DSL вроде математической нотации.
А между ними существует большой спектр компромиссных вариантов типа JSON.

3. Смещение ментальной/поведенческой модели меняет и предпочтительный формат данных.

Это ключевой момент: человеку в робо-режиме становятся удобны отчасти роботизированные данные — формализованные, упорядоченые и предсказуемые.

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

В идеале человек-робот хотел бы вообще пропустить лексический и синтаксический разбор вашей страницы и сразу получить голую суть.

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

3/5

Профессиональные пользователи в дикой природе.

2/5

У меня есть история буквально про один из бирмановских антипримеров — склеивание предложений через двоеточие.

В конце нулевых я работал в компании, которая делала свой продукт — метапоисковую систему. И там были именно такие заголовки:

Найдено результатов: 125

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

Найдено 125 результатов

Не будем отвлекаться на разговор о склонениях, это в истории не главное. Тогда у нас была логика в PHP-шаблоне, сейчас есть Intl.PluralRules в браузере и ещё куча способов.

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

Результат неожиданный и ставит под сомнение всю доктрину. Как такое может быть?

Дело в том, что интерфейсы — не худлит; мы не читаем их последовательно, мы их сканируем. А при постоянном использовании (например, в профсистемах) чтение вообще сводится к минимуму. Мы запоминаем геометрические и поведенческие паттерны — куда нажимать и в какое место экрана смотреть.

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

Образно говоря, Array.pop() оказался быстрее, чем Array.find(). Или ещё более образно: заголовок показывает число на вытянутых руках, как Рафики младенца Симбу.

1/5

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

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

Лекция Ильи Бирмана «Язык роботов»
Трейлер 2019 (1 минута):
https://www.youtube.com/watch?v=IM5uwu2qxfM
Трейлер 2025 (3 минуты):
https://vk.com/video-113157690_456240146
↑ Примеры в этих видео дают понимание, о чём вообще речь.

Ководство Лебедева, 2003 год.
§98. Здравствуйте, с вами говорит робот
https://www.artlebedev.ru/kovodstvo/sections/98/

«Пиши, сокращай» Максима Ильяхова и так далее.

Все убеждают писать «человеческие» тексты.

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

#не_все_так_просто
#вкалывают_роботы_а_не_человек

Значимые посты 2025 года

Почему аутлайновые иконки практичнее иконок с заливкой
Консистентность, узнаваемость, активные состояния, перегрузка шкалы яркости, модификаторы, расширяемость.
(тред 10 постов)

Не надо делать transition: all
Желеобразные интерфейсы и грязь от встречных анимаций.

Результат Буквального челленджа — шрифт Euleron Modern
Очень-очень черновой шрифт с кучей недостатков. Потихоньку допиливаю его, но это чрезвычайно медленный процесс.

Чистый чёрный в интерфейсах
Кто-то говорит, что это моветон, а на самом деле есть одно конкретное техническое ограничение.
(тред 7 постов)

Перевёрстка заявки на ремонт очков
Главный вывод: любой интерфейс, который пользователь увидит первый раз, должен быть простым, как топор.
(тред 3 поста)

Антисхлопывающая min-width
Ширина кнопок/беджей/чипсов не должна быть меньше их высоты.

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

#дайджест

21/21

Попытка прогноза

Моё личное отношение к ВШ менялось по классической кривой хайпа, только перевёрнутой кверху ногами:
https://en.wikipedia.org/wiki/Gartner_hype_cycle

Начало — я отнёсся к ВШ скептически, посчитал баловством:
— я знал историю с фейлом Multiple Master;
— IE11 ещё существовал, Edge ещё не перешёл на Chromium;
— в веб-стандартах была куча более насущных проблем.

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

Сейчас — частичный откат обратно.
Технологии стабилизировались, но уже вполне очевидно, что гейм-чейнджером ВШ не стали. С другой стороны, подвижки всё-таки происходят.

Предположу, что всё прояснится в ближайшие ~3 года. Либо выход на плато продуктивности и более-менее заметная популярность. Либо стагнация и MM v2.0. Пока верю в первый вариант.

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

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

Подытоживая:
— Можно ли тащить ВШ в реальные проекты?
— Да, если есть понимание зачем.
— Стоит ли их использовать везде?
— Точно нет.
— Но рассматривать как базовый выбор?
— Тоже нет.
— Это прорыв или провал?
— Просто одна из возможностей.

Спасибо всем, кто дочитал.

↑ В начало ↑

20/21

Цены

Ценообразование у всех сильно отличается, но средний по больнице ориентир — в 3–5 раз дороже одиночного начертания.

Выше я писал, что обычно использую в интерфейсе до 3–5 шрифтов одной гарнитуры. Вряд ли это случайное совпадение, вот что пишет Паратайп:

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

Конечно, влияет и количество осей (которые нельзя самостоятельно вырезать, хе-хе), и популярность, и новизна:

Paratype
— Pragmatica Next VF (жирность + ширина) ×7.5 прямые и ×7.5 италики
— Fact VF (жирность) ×2.6 и ×2.0 соответственно

TypeType
— Hoves Variable (жирность + ширина + наклон) ×11.4 единый файл
— Neoris Variable (жирность + наклон) ×5.0 единый файл

Но, повторюсь, бывает очень по-разному. Например, студия Typotheque вообще не продает ВШ отдельно, а прикладывает их бонусом при покупке полного семейства.

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

Неопытные люди видят что-то типа $50 за начертание / $500 за семейство, думают ну окей, а потом разочаровываются, как в мемной сцене.