Что это за шрифты такие?

Как дела у Мой МТС с этим?

Как система изменяет размер шрифта?

Что нужно сделать?

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

2. Каждый раз с помощью комментария в макете или личного напоминания на синке команды указывать разработчикам на то, чтобы они уделили этому моменту внимание. Пример комментария:

   <aside> 📌 ВНИМАНИЕ РАЗРАБОТЧИК!

   На этом экране используются масштабируемые системой шрифты. Не запрещай системе изменять размер этого текстового поля.

   Имей ввиду, что в макете показан ПРИМЕР ПОВЕДЕНИЯ ИНТЕРФЕЙСА. Это НЕ НОВЫЕ ТЕКСТОВЫЕ СТИЛИ, не новые кастомные размеры шрифтов и добавлять их в проект НЕ НУЖНО.

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

   Если будут вопросы, адресуй их своему лиду.

   </aside>

Базовые правила масштабирования

1. Мы договорились, что масштабируются все шрифтовые стили за исключением H1 и выше. Это значит что все стили от кегля 32 и выше не нуждаются в масштабировании.
2. Слова в смаштабированных текстовых блоках либо переносятся на новую строку, либо обрезаются за многоточием "…". Это нужно указать в макете.
3. Если необходимо, можно ограничить количество строк в блоке. Это нужно указать в макете.

Как нарисовать это в макете?

Мы не можем нарисовать 12 макетов под все настройки в iOS и 4 под Android, поэтому было решено ограничиться несколькими примерами. Берем за основу Small, Normal, Large, Huge и Extreme для Android и Medium, xLarge, xxLarge и AX5 для iOS. При этом для iOS немного пренебрежем правилами из гайдов Apple для простоты. Подробнее тут.

1. Установите плагин.

   Text Resizer - Accessibility Checker

2. Выделите нужный экран, фрейм, группу, компонент или просто текстовое поле, а затем запустите плагин.

3. Укажите в параметрах:

   1. 14\12 для отображения интерфейса с настройкой Android Small и iOS Medium,

   2. 14\16 для отображения интерфейса с настройкой Android Large и iOS xLarge,

   3. 14\18 для отображения интерфейса настройкой Android Huge и iOS xxLarge,

   4. 14\20 для отображения интерфейса настройкой Android Extreme и iOS AX5.

      

4. Нажмите “Apply to Selection”.

5. Проверьте, что макет выглядит корректно.

   <aside> 📌 Лайфхак: избегайте фиксированную высоту и ширину у блоков, карточек, текстовых полей. Вместо этого используйте Hug\Fill Content и корректно выставляйте Constraints. Тогда все встанет на свои места.

   </aside>

6. Положите макет в секцию “Доступность” с пометками и комментарием для разработчика (если команда делает подобный функционал впервые).

   

7. На дизайн-ревью проверьте, корректно ли работает масштабирование шрифтов.

   Как делать дизайн-ревью?