@Korsia
Верстальщик

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

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

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

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

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

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

Хотелось бы услышать советы опытных людей, кто как справляется с этим. Вообще, это нормальная практика для дизайнеров - разжижать шрифты направо и налево?
  • Вопрос задан
  • 2072 просмотра
Решения вопроса 1
HamSter007
@HamSter007
HTML/CSS верстальщик
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 слова), то возможен вариант вставки картинкой (пожалуй отдельная история).
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
Adamos
@Adamos
Проблема кроется в том, что дизайнер, делавший макет - полиграфист.
Они привыкли делать красиво, используя всю мощь пакета от Adobe, многие фишки которого в вебе реализуются только серьезным утяжелением страниц и труда верстальщика.
Либо такой полиграфист не разбирается в веб-технологиях и делает, как привык, либо - что более вероятно - заказчик просто заказывал одному человеку весь фирменный дизайн - и буклеты с визитками, и сайт заодно.
Вот вы и получили то, что он пересобачил из "бумажной" верстки. Никакой трагедии, просто разъяснить с заказчиком момент насчет того, что пиксельную красоту на каждой странице сайта не наводит никто и никогда, она в вебе используется разве что в имиджевой рекламе, где можно хоть весь текст вектором заменить.
Ответ написан
Комментировать
lukoie
@lukoie
Делайте так:
0 заливаете псд файл в авокод2скетч
1 заливаете полученный скетч в фигму
2 смотрите свойства текста там

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

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

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

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

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

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

ps более явно это уже испытано в бумажной полиграфии с давних времен.
Ответ написан
@freeman0204
В авокоде откройте, там все свойства уже сразу эти написаны.
Ответ написан
dom1n1k
@dom1n1k
Вы сами себе придумали проблемы на ровном месте.

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

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

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

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

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

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