Как правильно измерять расстояния между текстовыми блоками в вебе?


Просматривая различные курсы по веб-дизайну, часто вижу, как преподаватели отмеряют расстояния между текстовыми блоками или от текста до изображений и наоборот непосредственно от самих букв. Рисуют прямоугольники для точного определения расстояния, выравнивают изображением, например, а затем двигают текст вниз и ровно выравнивают по буквам. Для портфолио это возможно и пойдет, однако при верстке скорее всего это не будет соблюдаться так тщательно. Ведь у текста существует некое поле, пространство вокруг, от которого в той же Figma показывается расстояния через Alt. Да и если открыть режим разработчика в Chrome и выделять текстовые блоки, то видно что они имеют эту же зону. А соответственно, что бы не утомить верстальщика различными расстояниями (12, 19, 23, 31 и т.п.) между блоками, проще задать расстояния круглые, ну или любые другие, но которые будут повторяться, например 10, 15, 20, 30 и тп. и уже мерить текст ими по границам текстовых фреймов, а не выверять по пикселю от буквы до буквы.

Я понимаю, что дизайн должен быть выверенным и визуально гармоничным, но в вебе существует слишком много условностей, а так же факторов, которые влияют на финальный результат: качество текстового контента, которым будет заполнен сайт в последствие, качество верстки, ответственность верстальщика к дизайну, ведь далеко не каждый будет верстать пиксель перфект. А если есть простая система отступов, без пиксельдрочева, то появляется система, которая упрощает жизнь как самому дизайнеру, так и верстальщику.

Собственно вопрос в чем: как вы работаете с отступами в макете? Придумываете простую систему с несколькими отступами следуете ей, а расстояния между тестовыми блоками мерите от границ текстового фрейма, или выверяете расстояния непосредственно от букв, при этом создавая кучу различный значений отступов, но более выверенный по расстояниям дизайн. (хотя выверенность его на практике заметят разве что такие же любители выверять=] )

4 симпатии

Всегда вымеряю отступы от границ текстового фрейма. Так разраб сможет понять систему по которой я их выстраиваю и сделать отступы компонентами. А если отступы будут компонентами в финальном сайте/приложении и т.д. всё будет более консистентно и чистенько

4 симпатии

Юзаю альт и очень бесит, когда меряют квадратиками. Вы делаете в несколько раз больше действий, нежели нажать альт

1 симпатия

Тоже недавно задавался таким вопросом. Есть ещё те кто от базовой линии шрифта отмеряют по 10px. Сам юзаю альт

С точки зрения графического дизайна правилен только правый вариант. Человек видит не пустые фреймы, а конкретно текст. Невидимые фреймы это технические, не человеческие сущности. Но из-за технических ограничений использовать человеческие расстояния было затруднительно. Но недавно, чтобы исправить этот баг ввели leading-trim.

4 симпатии