Я знаю, что это очень распространенная проблема, но мне еще предстоит найти каноническое решение для нее.
У меня есть дизайн, созданный в Sketch, и когда я использую точный шрифт, размер шрифта и высоту строки в css браузер отображает текст по-разному.
Пример:
Вот как текст отображается в Sketch: 
Видите, как текст красиво выровнен со значком?
Теперь я отображаю ту же самую вещь в браузере. Я использую flex's align-items: center для вертикального выравнивания текста со значком. Но так как текст не выровнен по вертикали внутри ограничительной рамки, выравнивание отключено.
Я знаю, что система проектирования Braid обрабатывает это путем обрезки пробелов вокруг текстовых узлов. Хотя это выглядит как очень хороший подход, он также чувствует себя немного излишним для проблемы, которая кажется такой простой c.
Итак, мой вопрос: есть ли решение для совмещения двух? Либо сделайте CSS визуализировать текст как эскиз, либо сделайте эскиз как текст CSS?
Спасибо всем, кто нашел время, чтобы прочитать это!