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

Question

[Olegarh1a]

Иногда встречается что как не бейся головой об стенку но не получится сделать PP с текстом.
Css очень скудный функционал преставляет для типографики (межбуквенный интервал, межстрочный, высота строки)

Как я не бился у меня так и не получилось. Такое ощущение что дизайнер задал разное расстояние между буквами.
Кто и как решает подобные ситуации ?
и допустимо если клиент требует пп, вроде получается но 3-4 словами совсем косяк

Comments

[Ярослав Иванов]

Никак. Забить. Браузер рендерит шрифты так как он хочет. К чему такой перфекционизм ?

Answer 1

[Aetae]

Вэб-дизайнер должен понимать как типографика работает в вэбе. Есди он что-то там нашаманил левого в своём фотошопе - это его косяк, пусть переделывает. Вот и всё, собственно.
Это если разница велика. Если разница полупиксельная - то это нормально, шрифты по разному рендерятся как в разных браузерах, так и в разных OS.

Answer 2

[Алекс Глебов]

Ну прилетит другой текст с админки или от пользователя в верстку, и все старания впустую.

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

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

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

Что касается типографики, переноси по параметрам. Figma, avacode выдают готовый css для типографики, его в 99% достаточно.

Answer 3

[Арсений Матыцин]

1. Смещение в пределах разумных допусков
2. Для межбуквенного — https://developer.mozilla.org/ru/docs/Web/CSS/lett..., да, я видел это в вопросе.
3. Если это макет без пользовательского ввода, можно вгонку и выгонку осуществлять вложенными span-ами и загонять разнообразные шпации, кастомные переносы и т.д.