Предположим, что в проекте будет использоваться сетка 8px, то есть принимаем за базу 16px и все расстояния и размеры (те, что фиксированные) при верстке указываем в rem:
- padding-top: 1rem
- margin-bottom: 0.5rem и т.д.
Однако встает вопрос, как в данном случае работать с текстом при дизайне:
- Считать верхним и нижним полем поля bounding box текста
- Считать верхним и нижним полем линию прописных (cap line) и базовую линию соответственно
При первом варианте сохраняются ровные расстояния при верстке, однако текст не лежит на базовой линии и расстояния непосредственно до самого текста будут больше (не желаемые 8px, а 11px например).
При этом позиция текста в сверстанном сайте будет совпадать с позицией текста в дизайне только в случае, если используются инструменты вроде sketch или figma, которые отрисовывают bounding box текста примерно так же, как и браузер, в Adobe Illustrator же, если не ошибаюсь, bounding box отрисовывается иначе.
При втором варианте текст лежит на базовой линии, расстояния задаются непосредственно до самого текста, однако верстка осложняется:
- Возможность указывать расстояния до текста в rem улетает в трубу (ну, если только не указывать значения вроде 0.6875rem , что как-то не очень) и необходимо для каждого случая указывать конкретное значение в пикселях
- Если хочется сохранить возможность указывать расстояния до текста в rem, то необходимо прибегать ко всяких хакам (если текст занимает несколько строк, с одной строкой, например, в кнопках, проблем нет, просто правится line-height), вроде задействования псевдоэлементов, которым назначаются негативные отступы, размер которых расчитывается на основании вводимых вручную метрик шрифта, чтобы верхнее и нижнее поле текста проходило ровно по линии прописных и базовой линии. Это, разумеется, весьма всё осложняет.
Понятно, что если речь идет об однострочных элементах, то используется второй вариант, но вот не могу решить, какой вариант лучше, если текст многострочный, как обычно решается данная проблема?
Простой
Простой
Простой
Простой
