@Olegarh1a

Pixel perfect VS Типографика?

Иногда встречается что как не бейся головой об стенку но не получится сделать PP с текстом.
Css очень скудный функционал преставляет для типографики (межбуквенный интервал, межстрочный, высота строки)
5ed42fddd44a0968613303.jpeg
Как я не бился у меня так и не получилось. Такое ощущение что дизайнер задал разное расстояние между буквами.
Кто и как решает подобные ситуации ?
и допустимо если клиент требует пп, вроде получается но 3-4 словами совсем косяк
  • Вопрос задан
  • 338 просмотров
Решения вопроса 3
Aetae
@Aetae
Тлен
Вэб-дизайнер должен понимать как типографика работает в вэбе. Есди он что-то там нашаманил левого в своём фотошопе - это его косяк, пусть переделывает. Вот и всё, собственно.
Это если разница велика. Если разница полупиксельная - то это нормально, шрифты по разному рендерятся как в разных браузерах, так и в разных OS.
Ответ написан
Комментировать
SkiperX
@SkiperX Куратор тега CSS
Ну прилетит другой текст с админки или от пользователя в верстку, и все старания впустую.

Используй этот подход вместо Pixel perfect
https://designpub.ru/%D0%BE%D1%82%D1%81%D1%82%D1%8...

Верстка это не плакат, и мыслить нужно не пикселями, а другими абстракциями. Система отступов, сетка, компоненты и тд. Дизайнер должен быть машиной, чтобы все это предусмотреть. И руки у него не должны трестись.

PP хорошо для обучения, на реальных проектах договаривайся о точности +- 30 px.

Что касается типографики, переноси по параметрам. Figma, avacode выдают готовый css для типографики, его в 99% достаточно.
Ответ написан
Комментировать
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
1. Смещение в пределах разумных допусков
2. Для межбуквенного — https://developer.mozilla.org/ru/docs/Web/CSS/lett..., да, я видел это в вопросе.
3. Если это макет без пользовательского ввода, можно вгонку и выгонку осуществлять вложенными span-ами и загонять разнообразные шпации, кастомные переносы и т.д.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы