Содержание
Как дизайнеры и разработчики, мы знаем, что отличная типографика - это больше, чем просто выбор приятного шрифта. Но какие практические приемы мы можем использовать, чтобы вывести наш текст на новый уровень? И как реализовать эти методы в таком средстве дизайна, как Sketch, или реализовать их на веб-сайте?
В этой статье я расскажу о трех методах, которые помогут улучшить вашу игру в типографике: текст на контуре, скрытые функции шрифтов OpenType и специальные символы. Эти методы интересны, потому что мало кто знает, как их использовать в Sketch, и они могут помочь сделать вашу работу более профессиональной. Я сопроводил эту статью специальной веб-страницей ресурсов и галереей красивых примеров, из которых вы можете почерпнуть вдохновение и код. Нужна отличная типографика? Ознакомьтесь с нашим обзором лучших бесплатных шрифтов.
Текст на пути
«Текст на пути» - это когда строка текста больше не располагается на плоской линии, а вместо этого оборачивается вокруг произвольной линии или фигуры. Это наиболее эффективно, когда путь представляет собой идеальный круг или очень тонкую дугу. Чем сложнее или изогнутее ваш путь, тем больше вероятность, что ваш текст будет выглядеть по-детски - с этой функцией легко переборщить!
В Sketch текст на контуре - это старая и немного привередливая функция, которую может сбить с толку, чтобы разобраться в ней самостоятельно. Ключ в том, чтобы понять, как векторные контуры работают под капотом, что применимо как к линиям, так и к замкнутым формам. Каждый векторный путь имеет начальную и конечную точки, а также направление для компьютера.
двигаться внутрь, рисуя этот путь.
Когда вы используете инструмент «Вектор» в Sketch (он же «Перо»), легко запомнить, где вы начали рисовать и в каком направлении нарисовали свой собственный путь. Но для таких фигур, как круг, которые кажутся непрерывным путем, нет очевидного способа узнать начальную точку или направление пути.
Войдите в режим редактирования, выбрав слой контура и нажав клавишу возврата. Sketch автоматически выбирает векторную точку вдоль пути, и это ваша начальная точка. Если вы нажмете клавишу табуляции, Sketch выберет следующую векторную точку, двигаясь вдоль (и, следовательно, показывая) направление пути.
Это важно для текста на контуре, потому что направление контура - это направление, в котором движется ваш текст. Если контур не перемещается слева направо, ваш текст будет отображаться вверх ногами. Чтобы изменить направление пути, выберите «Слой> Пути> Обратный порядок» в строке меню.
Теперь ваш путь готов, пора соединить его с вашим текстовым слоем. Текстовый слой должен находиться непосредственно над слоем контура в списке слоев, и я предлагаю сгруппировать два слоя, чтобы убедиться, что это не изменится. Выберите текстовый слой, затем перейдите в «Тип»> «Текст по контуру». Затем перетащите текстовый слой вокруг холста, чтобы текст располагался именно там, где вы хотите, вдоль контура.
Лучшие советы
Это может занять некоторое время, так как положение текстового слоя может иметь мало отношения к тому, где он появляется на пути. Кроме того, движок рендеринга Sketch может споткнуться при работе с текстом на контуре, обрезая текст в странных местах. Быстрое увеличение и уменьшение масштаба обычно исправляет эту ошибку рендеринга.
Последний совет по работе с текстом на контуре: я обнаружил, что эта функция работает лучше всего, когда контур открыт, как линия, а не замкнут и непрерывен, как круг. В этом вам поможет инструмент Sketch's Scissors, и я написала целую статью о том, как им пользоваться.
На своем веб-сайте вы можете разместить текст на пути с помощью элемента SVG. Sketch в настоящее время не поддерживает эту функцию в экспортированных SVG-файлах, но добавить элемент самостоятельно не может быть проще. На странице ресурсов вы найдете шаблон CodePen, который упростит эту задачу.
Необычные особенности шрифта
Когда вы выбираете шрифт и начинаете печатать, вы видите лишь малую часть того, на что способен шрифт. Заглавные буквы, произвольные лигатуры и альтернативные символы - часто называемые функциями OpenType - это лишь некоторые из скрытых возможностей.
Большинство людей не знают, что функции OpenType доступны в Sketch и даже в других приложениях для macOS, таких как iWork. Используя Sketch, войдите в режим редактирования на текстовом слое и выберите «Выбрать все». Затем откройте панель шрифтов macOS по умолчанию, выбрав «Просмотр»> «Показать шрифты». Панель инструментов на панели «Шрифты» содержит меню значка шестеренки слева с таинственным названием «Типографика ...». Вот где происходит волшебство!
Панель «Типографика» показывает, какие необычные шрифты доступны для выбранного текста. Например, вверху часто можно встретить флажок «Редкие лигатуры», который позволяет использовать больше комбинаций декоративных букв, таких как «Qu» или «ity».
В шрифт можно включить множество интересных типографских функций, но вот еще один из моих любимых: заглавные буквы. Заглавные буквы - это набор миниатюрных заглавных букв, которые обычно имеют ту же высоту, что и строчная буква «х». Используя панель «Типографика», вы можете преобразовать все строчные буквы в маленькие, которые отлично подходят для коротких подписей или первой строки статьи.
То, что нужно запомнить
Хотя эти функции шрифта доступны из Sketch, они могут быть немного привередливыми. Вот что вам нужно знать: во-первых, когда вы включаете и выключаете функции на панели «Типографика», вам может потребоваться немного подождать или навести курсор на выделенный текст, прежде чем изменения вступят в силу.
Во-вторых, если вы измените размер или толщину шрифта с помощью Sketch's Inspector, для всех необычных типографских функций будут восстановлены значения по умолчанию; Вместо этого я предлагаю настроить эти два атрибута на панели «Шрифты». Изменение других атрибутов, связанных со шрифтом (таких как цвет, расстояние между символами или высота строки) в Sketch's Inspector, не повлияет на ваши типографские функции.
Реализовать эти причудливые функции шрифтов на вашем веб-сайте так же просто, как добавить несколько свойств CSS, которые теперь поддерживаются всеми основными браузерами.
Специальные символы
В дополнение к необычным функциям, таким как лигатуры и маленькие заглавные буквы, многие шрифты содержат специальные символы, такие как дингбаты, расцветки и символы. На начальном изображении этой статьи бутылка, значок солнца и жест руки являются частью различных шрифтов.
При работе над дизайном есть два способа получить доступ к специальным символам, включенным в шрифт. Первый - использовать встроенное приложение Apple Font Book, которое позволяет просматривать «Репертуар» каждого шрифта (сетку букв и глифов), щелкая значок сетки на панели инструментов. По мере того, как вы прокручиваете наиболее распространенные символы (A – Z), вы начинаете видеть расширенный набор лигатур, заглавных букв, диакритических знаков (знаков ударения) и специальных символов, которые дизайнер шрифтов с любовью создал для таких ботаников, как мы.
При наведении курсора на символ вы увидите небольшую всплывающую подсказку с именем персонажа и значением Unicode. Лучше всего то, что вы можете перетащить этот символ из Font Book в любое другое приложение (например, Sketch), где вы редактируете текст. Просто убедитесь, что в Sketch ваш текстовый слой находится в режиме редактирования (обозначен мигающим текстовым курсором) перед перетаскиванием.
Панель персонажей
Книга шрифтов - не единственный способ получить доступ к этим специальным символам; большинство из них можно вставить через панель «Персонажи». Эта панель доступна в Sketch и в macOS в нижней части меню «Правка» в строке меню (теперь она называется «Emoji & Symbols»). Если панель «Персонажи» выглядит маленькой, щелкните маленький значок в правом верхнем углу, который выглядит как окно с символом «⌘» внутри - это позволяет переключаться между компактной и развернутой панелями.
Расширенная панель символов - это мощная функция, которая дает вам доступ к бесчисленным символам, знакам препинания и пиктограммам. Просто дважды щелкните один из этих символов, чтобы вставить его рядом с текстом. Мой личный фаворит - это число («Нет»), которое намного элегантнее, чем «#», и более компактно, чем написание «Число:».
Щелкните значок шестеренки в верхней части панели «Персонажи», чтобы настроить список категорий на боковой панели. Вы даже можете добавить в список Unicode, что позволит вам просматривать каждый из тысяч Unicode-совместимых символов. Другими словами, это дает вам доступ практически ко всем персонажам, которых вы только можете себе представить! Я также считаю полезным перетаскивать специальные символы, которые я часто использую, в список избранного, что избавляет от необходимости искать этот символ каждый раз, когда вы хотите его использовать.
Когда дело доходит до реализации вашего дизайна в Интернете, вставлять специальные символы очень просто. Любой символ Unicode можно использовать на веб-сайте, ссылаясь на соответствующее значение HTML символа или используя созданный CSS контент с шестнадцатеричным значением Unicode символа. На странице ресурсов я связался с отличным веб-сайтом для быстрого поиска этих значений для любого символа и другим веб-сайтом, объясняющим, как реализовать их в CSS.
Заключение
Как вы понимаете, эта статья лишь поверхностно рассматривает каждую тему. Вот почему я так много упомянул страницу ресурсов! Он включает в себя галерею красивых примеров, избранные бесплатные шрифты с функциями OpenType, которые можно попробовать, мои собственные файлы проекта Sketch, которые нужно разобрать, и множество других полезных веб-сайтов и шаблонов. Удачного набора!
Эта статья изначально была опубликована в сетевой журнал Выпуск 284. Купите здесь.
