Шрифт Lato: Sketch vs Android Studio



    Жизнь в Avito заставила перейти на Sketch и начать рисовать в mdpi (1x). Чтобы сразу поддержать телефоны и планшеты. Так как я работаю по адаптированному под себя принципу Atomic Design.

    Переход на Sketch я начал c переноса шрифтовых гайдов. Взял телефон с mdpi (1x), установил туда своё тестовое приложение с шрифтовой сеткой Avito. Начал обводить. Такое я уже делал для Photoshop. (Знать точные границы у текста мне надо, чтобы составлять точные спецификации дизайна для разработчиков)




    Как оказалось, косяков (особенностей работы :) ) с рендером шрифта у Android хватает. Приведу конкретный пример. Взял 2 одинаковых TextView (шрифт в одну строку, 14 Bold). Второму TextView назначил в дополнение атрибуты android:maxLines=«1» и android:ellipsize=«end» Это значит, что если текст длинный, то он покажется в одну строку с «...» на конце. В результате высота контейнера и базовая линия у второго TextView отрендерились со сдвигом в 1dp относительно первого. Были и другие странности, но не суть.

    Продолжил эксперимент. Тут вспомнил про недавнее видео от Lisa Wray про работу со шрифтом. Откопал скриншоты на рабочем столе про структуру шрифта с точки зрения Android.




    Подумал, погуглил. Наткнулся на атрибут android:includeFontPadding=«false». Как я понял, он убирает паддинг сверху от шрифта между top и ascent и снизу между descent и bottom (см. первый скриншот).

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



    В процессе обводки заметил, что границы текстового слоя в Sketch один в один совпадают с границей TextView в Android (Studio). Попробовал другие размеры — тоже совпадают. Круто!



    А что с межстрочными интервалами? Оказалось тоже всё хорошо. Для шрифта Lato Bold размером 16 параметр Line нового текстового слоя в Sketch по умолчанию равен 19. Атрибут android:lineSpacingExtra=«1sp» увеличивает межстрочный интервал на 1. Решил добавить 1 к параметру Line в Sketch. То есть стало 20. Заработало, контейнеры совпадают!



    Причём высота стала на 1 больше. Добавилось это пространство снизу. То есть можно играться точным выравниванием текста у кнопок.

    Вывод


    Для шрифта Lato, если рисовать макеты в mdpi (1x), рендеринг шрифта в Sketch совпадает с Android (Studio), если добавить TextView атрибут android:includeFontPadding=«false»

    Гипотеза


    Кажется, что такое поведение справедливо для любого шрифта. А не только Lato. Надо проверять.



    Кто любит читать в Facebook, добавляйтесь в мою группу про Качественный Android.
    • +10
    • 10,2k
    • 2
    Поделиться публикацией
    Комментарии 2
      0
      Спасибо за Atomic Design. Заинтересовало, буду перенимать.
        0
        Может кто-нибудь перевод сделает?

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое