Как работает рендеринг текста в Sketch

Что означает граница по краям текстового слоя?

Вы видели ее в Sketch, серую рамку вокруг текстового слоя на рабочей области. С ее помощью вы можете менять размер слоя. Но почему она именно такого размера? Почему размер не привязывается к границам пикселей, из которых состоят буквы? Что это за белое пространство вокруг букв?

Выясняется, что размеры текстового слоя основаны на специфике гарнитуры, которую вы используете. Внутри каждого шрифта есть встроенные шрифтовые метрики. Чтобы определить размер рамки, которая отображается вокруг текстового слоя на холсте, Sketch учитывает следующие величины:

• Высоту прописных (cap height).
• Высоту строчных (x-height) — расстояние от линии шрифта до вершины  строчной буквы x. Линия, проведенная на этой высоте, называется средней линией (mean line).
• Верхний выносной элемент (ascender) — элемент графемы, который выходит за среднюю линию, например строчные буквы б, д, й, ё в русском и b k, l — в английском.
• Нижний выносной элемент (descender): насколько некоторые буквы выходят за линию шрифта, например, строчные у, р, ц, щ в русском и p, j, y, q — в английском.

Эти стандартные величины определяются метрической системой шрифтов Adobe Font Metrics File Format Specification, на которой базируется большинство современных шрифтов.

Вместе эти метрики образуют то, что называют кегельной (круглой) шпацией, по-английски em. Вы можете видеть эти блоки на картинке выше. Они очень похожи на ручной набор (movable type) — типографскую установку, в которой используются металлические блоки с буквами, высеченными на них. Складывая эти буквы вместе плотно друг к другу, вы набираете предложения, которые можно напечатать на бумаге. Sketch отображает высоту текстовых слоев, основываясь на высоте строки, которая в свою очередь зависит от указанных выше метрик.

Как Sketch App обрабатывает текстовые слои с субпикселями?

Теперь, когда вы понимаете, как Sketch отображает высоту текстового слоя, вы можете спросить себя: «А что, если в текстовом слое есть субпиксели?». Чтобы ваш текст не выглядел размытым, Sketch всегда привязывает линию шрифта к ближайшему краю кегельной. Это работает, и когда вы используете высоту строки с десятичными значениями.

Интервалы

Привязка текстового слоя к линии шрифта — лишь один пункт из огромного количества вещей, которые можно настроить в Sketch. К счастью, для любителей типографики есть множество настроек внутри текстового поля.

Интервалы между знаками

С помощью межбуквенных интервалов, которые часто называют трекингом, вы можете настроить общее горизонтальное расстояние между отдельными буквами. Расстояние между знаками измеряется в пикселях. По умолчанию Sketch использует шаг в 0,1 пикселя, но вы можете зажать Shift, чтобы увеличить шаг до1 пикселя.

Использовать трекинг следует с одной оговоркой: он отключает кернинг.

Это тонкие настройки шрифта, которые предложил дизайнер, чтобы создать оптическое «идеальное» расстояние между символами: учел общий дизайн шрифта, чтобы буквы выглядели так, будто оптически между ними одинаковое расстояние.

Заметьте: даже если вы установили нулевой трекинг, кернинг по-прежнему будет отключен. Это аннулирует весь труд шрифтового дизайнера, который он проделал, чтобы исправить проблемы внутри шрифта. Чтобы кернинг снова заработал, удалите значение в поле ввода и подтвердите действие.

Значение трекинга сменится на автоматическое, а программа убедится, что вы используете кернинг, заданный разработчиком шрифта. Это спасет ваш дизайн от ошибок и плохой типографики.

Обратите внимание, что когда вы используете значение 0 вместо «авто», это захламляет ваш CSS: когда вы копируете его из Sketch, программа автоматически добавляет в код строчку letter-spacing: 0. В CSS это не приводит к таким же проблемам, как в Sketch, но  может конфликтовать с другими настройками, которые вы заложили в файл стилей.

Еще одна вещь, которую стоит держать в уме, когда вы используете большой интервал между графемами, — от этого страдают лигатуры.

Самая распространенная лигатура — fi, где пересекаются вершины f и i. Когда вы изменяете стандартный интервал между символами, лучше отключить лигатуры, чтобы сохранить ритм текста.

Использование лигатур с большим интервалом между буквами нарушает ритм текста. Отключить лигатуры в программе Sketch можно следующим образом:

1. Перейдите во вкладку Вид → Просмотреть шрифты (View → Show Fonts).
2. В окне Шрифты (Fonts) кликните на Типографику (Typography).
3. Перейдите в раздел Лигатуры (Ligatures) и уберите все галочки напротив опций.

Интерлиньяж

Вы можете не только устанавливать расстояние между отдельными буквами, но и настраивать интервал между двумя строками. В Sketch вы можете использовать стандартный интерлиньяж шрифта или задавать свое значение в пикселях.

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

Абзацный интервал

В Sketch существуют два типа переноса строки: абзацный и строчный. Если вы нажмете Return, начнется новый абзац (или Alt+Return для отмены). Если вы нажмете Shift+Return, курсор перенесется на новую строку (или Ctrl+Return для отмены).

Количество пикселей, которое вы установите для расстояния между абзацами, будет автоматически добавляться, когда вы станете создавать новый абзац. Это удобно, если составляете список предметов, каждый из которых начинается с новой строки.

Вывод

Как и во всем, что связано с типографикой, маленькие изменения не сильно влияют на дизайн, но вместе они действительно складываются в нечто большее. И хотя люди в основном не различают шрифты и не разбираются в типографике, — они чувствуют ее, когда читают текст.

Если вы хотите освоить Sketch на профессиональном уровне, проектировать в нем сайты, приложения и разрабатывать сложные интерфейсы, — приходите на курс «Sketch» в Skillbox. За восемь занятий вы узнаете особенности этого векторного редактора, научитесь использовать его возможности на 100%, сможете повысить вашу эффективность и начать  создавать дизайн в Sketch.

Источник: Yummygum Journal