Размер кнопок в web интерфейсе
Всем привет, на связи рубрика «Простой дизайн». В прошлый раз мы разбирали правильное скругление внутренних углов фигур, а сегодня я дам совет, как в начале своего пути дизайнером рисовать правильные кнопки для web интерфейсов, какие должны быть размеры, пропорции и какой размер шрифта лучше использовать в кнопке.
Не согласен, это устаревшая модель проектирования кнопки.
Досточно смотреть на высоту текстового блока, если мы в лоб центрируем текстовый блок по центру прямоугольника, то текстовый блок центрируется математически верно, но не визуально из-за заглавной буквы текстового блока. Буква в зависимости от шрифта забирает 1-4 px высоты и если в лоб центрировать её, то текстовый блок просто будет расположен низко.
Решение достаточно тривиально: Сделать padding сверху на 1-4 px меньше и компенсировать его снизу. Этот вариант настолько сильно выигрывает при чтении текстового блока в сравнение с вашим вариантом, что грех юзать такую вещь.
Про визуально верное выравнивание вопрос спорный. Лично у меня выравнивание по X-height вызывает диссонанс, будто блок текста слишком высоко относительно формы кнопули.
Но описанный приём с паддингами точно поможет в случае, когда у шрифта съехавшая базовая линия — этим грешат шрифты от Type Type (до бесплатной кастомизации), многие шрифты с MyFonts (привет, Gordita) и от Студии Лебедева. Помню, как до редизайна сайта Sketch у них в текстах и на кнопках были разные шрифты именно из-за этой проблемы.
Хотя верстать это смерть, конечно.
согласен, но это больше как подсказка для junior как спроектировать кнопку