Symbol Design. Typography.

Guide contents:

1. Getting Started—How to install Symbol.
2. Color Scheme— Learn how to add and change color pallete.
3. Typography (You are here) — Adding and replacing fonts.
4. Elements — Explore the core of Symbol Design.
5. Components — Adding new base components.
6. Collection — Set of components which ready-to-use in your project.
7. Plugins — List of helpful plugins for use with Symbol Design.
8. Summary — Create your first web-site.

Overview

Символ использует в своей работе Shared Text Styles. По стандарту используется бесплатный гугл шрифт Nunito Sans. Вы с легкостью можете изменить его на любой шрифт установленный в системе полностью или частично.

Мы создали 9 стилей для разных задач:

• Hero используется для call to action заголовков в хедерах
• Title и Header использутся для заголовков внутри параграфов.
• Lead создан для придания акента абзацу
• Paragraph и Article стили нужны для основного текста
• Description и Label используются для технической информации
• Personal мы оставили свободным. Вы можете задать ему любой стиль под ваши задачи.

Так же мы предусмотрели возжность выравнивания текста по трем сторанам: Left, Middle and Right. Все три выравнивания находятся друг под другом, поэтому их можно выделить и изменить шрифт всем трем стилям разом.

Мы приготовили 11 цветов для каждого текстового стиля: Primary, Custom, Success, Danger, Warning, Black, Grey, White and Transparent.

В итоге вся типографика построена на следующей структуре: Color / Type / Alignment

Cusomize Typography

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

Мы используем shared text styles (кроме Personal) в основе всех компонентов Символа, поэтому после того как вы подготовите шрифты их необходимо оцентровать относительно артбордов в которых они находятся. Не уходя со страницы Elements найдите блок Typography Symbols, затем убедитесь что, текст Value оцентрован по горизонтали внутри артборда.

Change typography colors

Что бы изменить цвет вам нужно выделить все стили одного цвета (одну колонку). Затем измените цвет всем стилям и нажмите на иконку обновить рядом с фразой Multiple Text Styles. Готово, цвет шрифта поменяется во всех макетах и страницах.

Adding new typography style

Используйте для своих целей

Для этого установите плагин Sketch Style Master. Выберите Rename Text Style, в поле поиска введите название скопированного стиля (в нашем случае Personal) и придумайте новое название и введите его в поле Replace, а затем нажмите кнопку Apply.