Радость дизайнера — боль верстальщика. Межбуквенные отступы — кернинг и трекинг. Как рассчитать их значения для css?

Question

[Korsia]

Здравствуйте.

Уже не первый раз верстаю по макетам от дизайнеров, в связи с этим назрел больной вопрос. Как рассчитывать кернинг и трекинг для css?

Вот так эти параметры выглядят для фотошопа:


С трекингом я еще более менее разобралась, это аналог letter-spacing, в интернете есть формула по расчётам. А вот кернинг...

В этот раз мне "повезло" и попался кернинг Optical для всех шрифтов на страницу. Сижу, высчитываю. Знаю, что есть св-во font-kerning в css, но оно плохо поддерживается. Нашла советы заменять его обычным letter-spacing, для каждого размера шрифта значение получается разным. Из-за этого верстка растягивается по времени, хочется сделать хоть приблизительный pixelperfect. Если не учитывать параметр, то шрифты раздуваются, переносятся и выходят за условные границы по вертикали. Честно, не верю, что верстальщики копают такой геморрой, должен быть способ проще.

Хотелось бы услышать советы опытных людей, кто как справляется с этим. Вообще, это нормальная практика для дизайнеров - разжижать шрифты направо и налево?

Comments

[alex]

>должен быть способ проще

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

[Korsia]

Alex, знаете, во фрилансе много такого. Человек хотел сэкономить, макет ему сделали подешевле, он передал верстальщику (то есть мне), я плююсь. Я уже не первый раз на такое попадаю, так как оцениваю макеты по jpg, где многие параметры я просто не вижу, исходники в psd до заключения сделки мне не дают. И тут палка двух концов. Ударить в грудь я конечно могу, но не уверена, что от этого будет толк. Заказчику нужен сайт вот тут и сейчас за 3-4 дня, а передача назад дизайнеру означает затягивание проекта и потенциальные доплаты ему же. Ему проще отказать мне и передать другому, чем выяснять отношения с дизайнером. Поэтому я пока выкручиваюсь. Если бы я работала на фирму или в паре с дизайнером, тогда я бы несомненно ругалась. Пока я ругаюсь про себя, но делаю. Вопрос самоуважения, конечно.

Answer 1

[HamSter]

body {
font-family: 'PT Sans Caption', sans-serif;
font-size: 11px;
line-height: 120%;
font-weight: normal;
text-decoration: underline;
letter-spacing: 0px;
font-style:normal;
}

Все остальное дизайнер пусть оставит себе.

Если же это какая-то единичная каллиграфия (1-2 слова), то возможен вариант вставки картинкой (пожалуй отдельная история).

Comments

[Korsia]

А как же пресловутый пиксельных перфект, который все так требуют? Многие заказчики чуть ли ни с пеной у рта смотрят наложение.
У меня с этим разжижением написан главный заголовок страницы, в глаза бросается разница. Даже не знаю, забить?

[HamSter]

Korsia, так объясните дизайнеру что все остальные настройки для шрифта не реализуемы в верстке! Плюс шрифты на разных устройствах могут немного иначе отображаться. И pixel perfect в данном случае может быть с погрешностью +-пару px.

[HamSter]

:K Yaha, или так! :))) Но что тогда задавать если font-kerning: auto | normal | none , normal?

[Korsia]

HamSter, я бы ему с удовольствием объяснила. Основательно так. Проблема в том, что мне скинули готовый макет, объяснять уже некому.

[HamSter]

Korsia, заказчику! Опытные дизайнеры знаю что такие настройки используются только для какого-нибудь "особенного шрифта", типа каллиграфия. Но как для контента, который вероятно будет меняться - это плохо и нельзя сверстать)

[Korsia]

:K Yaha, спасибо, посмотрю обязательно.

[Korsia]

HamSter, заказчику дела нет, он за макет заплатил, теперь отдал мне. А вообще спасибо, я думала это со мной проблемы, так как второй макет получаю с заданными межбуквенными интервалами в каждой строке. Теперь хоть смогу без зазрения совести пожаловаться, зная, что не во мне проблема.

[Moskus]

Korsia, pixel perfect с текстом невозможен, как минимум, из-за разницы рендеринга шрифтов на разных ОС и в разных browser-ах. Те, кто требует его - идиоты и не понимают принципов Web. Учитесь настаивать на своем, для верстальщика это - принципиальное умение.

[Korsia]

Moskus, спасибо. Отличный совет.

[CityCat4]

Учитесь настаивать на своем, для верстальщика это - принципиальное умение.

И не только для верстальщика...

[Decadal]

CityCat4, а вот остальным надо быть осторожными. Где начинается настаивание на своем там заканчивается гибкость и обучаемость. Нужно много знать чтобы настаивать

[HamSter]

Decadal, тут нужно знать грань и она заключается в возможностях. В данном случае возможности верстальщика ограничены и это нужно объяснить заказчику или дизайнеру! А вот молчание может привести к тому что верстальщика могут счесть некомпетентным, а если еще и время будет убивать на такую глупость.
В данном случае речь не о принципах, гибкости или знаниях.

[Decadal]

HamSter, а вы прочли кому я написал свой ответ?) там человек сказал, что "многим стоит настаивать на своём" и я отреагировал на это. Про верстальщика речь уже не шла. Да, вы абсолютно правы, в данном случае верстальщику настоять правильно и все такое.
но потом верстальщики вырастают в фронтенд или фулстак и начинают свое не всегда обоснованное мнение везде проталкивать просто по привычке, и от этого мир становится хуже.

Answer 2

[Adamos]

Проблема кроется в том, что дизайнер, делавший макет - полиграфист.
Они привыкли делать красиво, используя всю мощь пакета от Adobe, многие фишки которого в вебе реализуются только серьезным утяжелением страниц и труда верстальщика.
Либо такой полиграфист не разбирается в веб-технологиях и делает, как привык, либо - что более вероятно - заказчик просто заказывал одному человеку весь фирменный дизайн - и буклеты с визитками, и сайт заодно.
Вот вы и получили то, что он пересобачил из "бумажной" верстки. Никакой трагедии, просто разъяснить с заказчиком момент насчет того, что пиксельную красоту на каждой странице сайта не наводит никто и никогда, она в вебе используется разве что в имиджевой рекламе, где можно хоть весь текст вектором заменить.

Answer 3

[lukoie]

Делайте так:
0 заливаете псд файл в авокод2скетч
1 заливаете полученный скетч в фигму
2 смотрите свойства текста там

Вообще, когда дизайнер шрифта разрабатывает шрифт, он учитывает гармонику и ритм, потому искуственно искривлять дизайн шрифта негоже. Либо раз дизайнер выбрал такое решение, он неправильно подобрал шрифт и его начертание - вполне возможно у шрифта уже имеется монотайп или конденсед версия.
Если текст имеет одинаковы показатели межстрочного и межбуквенного интервала на всей странице, тогда либо ставите для боди указанные параметры, либо подбираете более подходящий шрифт, потому что шрифты для того и бывают всяко-разные, чтобы не плющить их и кукожить стилями. Ведь дизайнер, скорей всего, рисовал их на большом мониторе, может даже ретине. А смотреть сайт будут на нетбуках, планшетах и телефонах. И если будет плохой результат, кого будут винить(и требовать пофиксить), дизайнера, у которого на жейпеге всё красиво, или Вас, кто сверстал это?
Если это единичные элементы, которые действительно требовали таких манипуляций, Вы можете найти плагин для своего ИДЕ(у меня в ВС коде есть), который как переводит пиксели в ремы при наборе, и делайте просто визуально подходящим. Или Вас будут проверять на пиксель перфект?
Смотрите, много лет работая с полиграфией я встречаю подобные приколы от дизайнеров, которые присылают макеты на печать, и там намного чаще используется кернинг и трекинг, из за специфики. Но для вебдизайна это избыточно, и даже наверное укажет на недостаточный профессионализм в вебдизайне.
Вообще, если есть возможность, просите чтобы дизайны Вам давали уже утвержденными в специализированных программах для прототипирования, типа фигмы или зеплина. В т.ч. для согласования шрифтового решения.

Answer 4

[McBernar]

Ох, лол.

«Скажите дизайнеру, что так нельзя», «Так задумано дизайнером шрифта», «Бебебе бебебе».
Что же вы, дорогие мои, не пишете на ванильном JS свои большие проекты, а используете Lodash и всякие Реакты, облегчающие работу. Зачем все эти «подпорки»?

Интервал в PS * Размер шрифта в PS / 1000 = letter-spacing. Но надо смотреть, чтобы результат попадал сюда. Если что — надо потвикать немного.

И да, немного теории.
line-height — очень важный параметр текста. Лайн-хайт невероятно сильно влияет на читаемость большого объема текста и очень сильно зависит от ширины текстовой колонки. Чем шире колонка — тем больший лайн-хайт нужно вкрутить. Иначе все начинает слипаться, глаза прыгают на соседние строки и чтение превращается в боль. С узкими колонками ровно наоборот — большой лайн-хайт создает бессмысленную разваливающуюся колбасу.

letter-spacing — обязательный атрибут, если в дизайне есть надписи набранные капителью или просто прописными. Без вариантов, нужно кернить. Другой момент — экран телефона. Любой шрифт, пусть даже такой крутой как Roboto или SF гораздо лучше читается при слегка увеличенном спейсинге. Любой интерфейс становится на голову приятнее банальным увеличением межбуквенного расстояния с 0 до 0.3. Да, в больших текстах это может не иметь смысла, так как в хороших шрифтах все шрифтовые пары откернены авторами, но в интерфейсах это очень важно. Многие дизайнеры используют этот трюк, только вот он частенько разбивается о лень товарищей, подобных тем, что выше в комментах.

Будьте профессионалами, друзья мои.

Answer 5

[d-stream]

Вообще все что описано - это исходное и заложено в шрифтах и их отображении на конкретных устройствах. По крайней мере исходно шрифты именно так и задумывались. То что требуется вмешательство в виде таких "подпорок" означает что авторы шрифта - накосячили... и скорее всего подпорки для одного dpi дадут антиэффект при другом. Аналогично - при масштабировании.

ps более явно это уже испытано в бумажной полиграфии с давних времен.

Comments

[Korsia]

Не думаю, что проблема именно в авторах шрифтов. Меня больше смущает дизайнер, который поленился поискать подходящий шрифт, а разжижал-сжимал первый попавшийся, проверяя, как эффектней будет смотреться.
Или Вы имеете ввиду то, что необходимость сжимать шрифт возникает из-за его изначальной недоработки, со-нно большого изначального расстояния между буквами?

[d-stream]

Просто в самих шрифтах заложено неискажение гармонии шрифта. В том числе при разных условиях (10 кегль на мониторе или он же в хорошей полиграфии). Очень наглядно - поисследовать например какой-нибудь из классических шрифтов (таймс, бодони) особенно в классической латинице: прогнать от 6 до 160pt на экране и в печати длинный текст, потом произвести те же манипуляции с каким-нибудь новоделом... Особенно отчетливо это будет видно на лигатурах при включении разрядки...
В общем если вдруг рука тянется что-то подправить - это или говенный шрифт или сильная альтернативность восприятия)

[Korsia]

d-stream, у Вас явно философская натура)) Ну или Вы специалист по шрифтам. Мне бы в голову не пришло так глубоко копать.

[d-stream]

Korsia, это базовые понятия ординарной верстки под бумагу

Answer 6

[freeman0204]

В авокоде откройте, там все свойства уже сразу эти написаны.

Comments

[Korsia]

Через авокод и работаю. Ничего там не отображается.

Answer 7

[dom1n1k]

Вы сами себе придумали проблемы на ровном месте.

Трекинг у Adobe указывается в тысячных долях em. Указываете letter-spacing и всё. Проще всего в em, но можно и в px пересчитать. В чём проблема?

Кернинг который Optical, вручную никогда не делается, используется то самое свойство font-kerning - и всё, дальше браузер разбирается сам. Несколько процентов браузеров его не поддерживает - ничего страшного, это не влияет на функциональность, поэтому graceful degradation.
В крайне редких случаях (почти никогда) может использоваться ручной кернинг, например, для создания какого-то специального декоративного эффекта. Для этого есть js-библиотеки, которые помогают манипулировать буквами. Опять-таки особой проблемы тут нет, потому что никто не применяет это к большим объемам текста, только к очень крупным заголовкам.

То что текст может переноситься на другую строку не совсем так, как было в макете - это совершенно нормально и это всегда нужно учитывать. Если верстка ломается от непредсказуемого переноса, то это глючная верстка.
Pixel perfect для текста невозможен по определению, разные системы рендерят его по-разному (но вполне возможен на уровне блоков).

Я понимаю, приятно побухтеть в кулуарах на тему вот мы дартаньяны, а они нет :) Но в данном случае ничего такого особенного дизайнер не сделал, абсолютно рабочие параметры.