Как правильно оптимизировать небольшие UI — элементы?

У меня еще относительно небольшой опыт в UI, вертке веб-страниц и их оптимизации под разные экраны и устройства. Сейчас столкнулась с таким вопросом.

Вот рисую я в Фотошопе макет веб-интерфейса. Административную панель, например. При рисовании отталкиваюсь от размера (разрешения) экрана монитора, за которым работаю. Далее, в соответствии с тем, какого размера элементы нарисованы на макете, я делаю верстку. Т. е., я обычно делаю так: кидаю изображение нарисованного макета в браузер, а в соседней вкладке у меня страница, которую верстаю. В работе все время переключаюсь между вкладками и сверяю размеры элементов, подгоняю так, чтобы они были одинаковыми. Получается один в один на моем экране. Затем, с помощью Google Chrome Inspector и Screenfly я прописываю медиа-запросы, чтобы подогнать интерфейс под другие размеры экрана и моб. устройства.

При верстке я использую обычно сетку Bootstrap, и мне примерно понятно, как оптимизировать блоки и изображения, например, чтобы на разных экранах они нормально смотрелись. Но что является лучшей практикой, чтобы оптимизировать под разные экраны и устройства текст (например, заголовки, ссылки, наименования кнопок) и такие небольшие элементы интерфейса как кнопки? Когда я анализирую какие-то веб-проекты и интерфейсы, готовые темы, то вижу, что размеры текста обычно пишут фиксированные (допустим, заголовку задают 16px) и не прописывают для разных экранов в медиа-запросах разные размеры текста. То же касается и кнопок и всяких небольших UI - элементов - фиксированные ширины-высоты или же паддинги для всех. При этом такие интерфейсы на разных экранах выглядят примерно одинаково, с адекватными размерами элементов.

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

В чем же здесь дело? Я подозреваю, что на этапах верстки и оптимизации делаю что-то не так. Подскажите, пожалуйста, как правильно? Какова была бы лучшая практика, чтобы оптимизировать тексты и маленькие UI - элементы под разные экраны? Что я делаю неправильно в своей рутине разработки?