Задать вопрос
@FilimonovnaAnna
html

Как в вебе считать отступы в типографике?

Как все-таки правильно дизайнер должен ориентироваться на отступы при работе с типографикой?
Всегда придерживалась подхода, при котором отступ считается от базовой линии шрифта. Но когда перешла в другую компанию, frontend-разработчики здесь просят представлять текст в виде прямоугольника, высота которого равна: интерлиньяж - размер шрифта + высота текстовой строки от верхнего выносного до нижнего выносного элементов. Такой подход более профессионален, или все же при верстке это не столь значимо?
5b3d03d4e8828176657137.jpeg
  • Вопрос задан
  • 1187 просмотров
Комментировать
Подписаться 4 Простой Комментировать
Решения вопроса 2
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Оба примера на скриншоте в вопросе неверны. Отступы нужно считать от одной базовой лини и до другой базовой линии. Курим https://material.io/design/typography/understandin...

Для этого расставляем baseline grid - регулярную сетку (квадратную или строчную) - и укладываем все тексты в нее - чтобы базовые линии были строго на горизонтальных направляющих сетки.

Остальное сделает программа (рекомендую фигму). Текстбокс вполне может не вписываться в baseline grid, главное сам текст, оптически. Верстальщики уже будут отталкиваться от периметров текстбоксов.
Ответ написан
2 комментария
2 комментария
SkiperX
@SkiperX Куратор тега HTML
Разработчики говорят так, как задается отступ в css.
На скрине синим текстовый блок, зеленым - его отступ

открыть
5b3d2e131293a637959063.jpeg

Т.е в таком виде им и нужны от вас параметры текста
В первом варианте отступы придется на глаз подбирать.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Shadowman69
Верстать или не верстать - вот в чем вопрос?
Лайк за "бдиректора") Второй подход более правилен, но морочится дольше. Если придерживаться первого способа, то Ваши блоки будут на 30-40 пикс. больше, чем нужно по макету, за счет неучета line-height и за счет разной отрысовки элементов в разных браузерах. Это я с точки зрения верстальщиков сужу, хотя так сложнее верстать, бо нужно считать отступы вручную. Но если есть текст в несколько строчек и важен line-height, то этот второй способ правилен, так как с этим свойством стоит считаться.
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Парсер-бот на Python для ТГ-каналов
25 апр. 2024, в 17:35
4000 руб./за проект
Доработать сайт на CS-Cart (статусы товаров и цены)
25 апр. 2024, в 16:56
5000 руб./за проект
Внесение правок в мобильное приложение (Android)
25 апр. 2024, в 16:54
3000 руб./за проект
Ещё заказы