Роман Шамин написал о дробном кегле — одной из важнейших составляющих дизайн-системы Evil Martians.

— Проблема в том, что указанный размер шрифта (если взять, например, 16 px) не совпадает с видимым размером символа в реальных пикселях;
— Из-за этого текст слегка размывается. Эффект заметен даже на экранах с высокой плотностью пикселей;
— Чтобы проверить это в Фигме: View → Pixel Grid; View → Pixel Preview; и зум побольше;
— Дробный кегль помогает сделать текст чётче и поправить внутренние отступы;
— Например, если для Inter вместо 16 px установить кегль 16,5 px, строчная x займёт ровно 9 px, а прописная T — 12 px. Они идеально встанут в пиксельную сетку;
— Также ровным станет отступ от текста до, например, краёв кнопки, что упростит его позиционирование по вертикали;
— Потом легко один шрифт поменять на другой, если подогнать его размеры под те же пиксели;
— Как подобрать размер? 6400% зум и увеличивать и уменьшать кегль с шагом в 0.1 px, а потом с шагом в 0.01px, пока текст не станет попадать в пиксели.

UX Notes

Роман Шамин написал о дробном кегле — одной из важнейших составляющих дизайн-системы Evil Martians.

— Проблема в том, что указанный размер шрифта (если взять, например, 16 px) не совпадает с видимым размером символа в реальных пикселях;
— Из-за этого текст слегка размывается. Эффект заметен даже на экранах с высокой плотностью пикселей;
— Чтобы проверить это в Фигме: View → Pixel Grid; View → Pixel Preview; и зум побольше;
— Дробный кегль помогает сделать текст чётче и поправить внутренние отступы;
— Например, если для Inter вместо 16 px установить кегль 16,5 px, строчная x займёт ровно 9 px, а прописная T — 12 px. Они идеально встанут в пиксельную сетку;
— Также ровным станет отступ от текста до, например, краёв кнопки, что упростит его позиционирование по вертикали;
— Потом легко один шрифт поменять на другой, если подогнать его размеры под те же пиксели;
— Как подобрать размер? 6400% зум и увеличивать и уменьшать кегль с шагом в 0.1 px, а потом с шагом в 0.01px, пока текст не станет попадать в пиксели.

🤯22❤15🌚14👍6🗿6😁3

hottg.com/uxnotes/1551

7.13K viewsАнтон Григорьев, Jan 17 at 16:25