Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

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

Случалось, что вы работали с текстовым слоем в Sketch и не понимали, что происходит? Мы провел исследование и выяснили, как редактор отображает текст.

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

Вы видели ее в 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 отображает высоту текстовых слоев, основываясь на высоте строки, которая в свою очередь зависит от указанных выше метрик.

Типографский шрифт GFDL, CC-BY-SA-3.0 или CC BY 2.5. Фото Уилли Гейдельбах, Wikimedia Commons.

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

Теперь, когда вы понимаете, как Sketch отображает высоту текстового слоя, вы можете спросить себя: «А что, если в текстовом слое есть субпиксели?». Чтобы ваш текст не выглядел размытым, 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) и уберите все галочки напротив опций.
Панель управления настройками OpenType в macOS.

Интерлиньяж

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

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

Заметьте, если вы настраиваете высоту строки, линия шрифта остается в том же месте кегельной.

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

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

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

Абзацный и строчный интервалы.

Вывод

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

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

Курс «Sketch для веб-дизайнера»
Полное руководство по векторному редактору для дизайнеров: навыки быстрой работы с высоким качеством. На протяжении курса вы с нуля создадите проект, при создании которого задействуете все возможности Sketch, множество плагинов и новых функций.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Источник: Yummygum Journal

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox