Типографіка становить основу дизайну так само, як кольори та компоненти. Тому на ранніх етапах побудови дизайн-системи вам потрібно створити патерни для узгодженої, розбірливої типографіки. Це полегшить масштабування типографіки між кількома додатками та пристроями, не ускладнюючи процес передачі проєктів від дизайнерів до розробників.
У цій статті ми розглянемо, що ви маєте враховувати під час роботи зі шрифтами в Figma. Ми запропонуємо поліпшення робочого процесу, щоб зробити використання стилів тексту більш ефективним, як для дизайнерів, так і для розробників.
Основи стилю тексту
У Figma функціональність стилів тексту дозволяє легко застосовувати до текстових об'єктів набір властивостей (наприклад, інтерліньяж і розмір). Ви можете помістити ці стилі в бібліотеку, а потім легко ділитися ними зі своєю командою або компанією.
Стилі тексту вносять ясність у процес проектування. Якщо під час поліпшення або редизайну, один із текстових параметрів необхідно змінити, ви можете надіслати поновлення цих стилів у всі файли, де їх було використано (просто опублікувавши оновлення у вихідній бібліотеці Figma).
Перш ніж ми продовжимо, я коротко опишу, які властивості є частиною текстових стилів Figma, а які ні.
Властивості, що визначаються стилем тексту Figma:
- Сімейство шрифтів, вага, розмір
- Інтерліньяж
- Міжбуквений інтервал, інтерліньяж абзаців і структурування тексту
- Прикраса (закреслений і підкреслений текст)
- Перетворення (великі, малі літери та капіталізація)
- Інші функції Open Type (табличні дані, капітелі тощо)
Властивості, що не входять до стилю тексту Figma
- Колір
- Вимикання (вліво, вправо, по центру, або за форматом)
- Вирівнювання текстового поля (по верху, по центру або по низу)
- Зміна розміру текстового поля (горизонтально, вертикально або фіксовано)
Якщо ви звикли працювати в іншому інструменті дизайну, вам може здатися дивним, що в Figma стилі тексту не містять таких властивостей, як колір або вимикання. Хоча до цього потрібно звикнути, сподіваюся, переваги цього підходу швидко стануть очевидними.
Коли ви підтримуєте стилі у спрощеному форматі, це скорочує час, який ви витрачаєте на їхнє створення - вам більше не потрібно враховувати всі можливі комбінації тексту, кольору, вирівнювання тощо. Це також зменшує обсяг роботи, необхідної для їх обслуговування, оскільки, якщо щось зміниться у вашій системі, вам треба оновлювати менше стилів. Ви можете налаштувати вирівнювання тексту окремо від стилю.
Встановлення шрифтів, розмірів та найменування
Щоб стандартизувати шрифти у своїх проєктах, вам потрібно створити систему шрифтів із певними розмірами та інтерліньяжем. Ваші стандарти мають охоплювати все: від типографіки заголовків до основного тексту, з урахуванням різних екранів. Вам знадобиться достатньо різноманітності для підтримки всіх варіантів використання, але не так багато варіантів, коли дизайнери не знають, які стилі в яких випадках використовувати.
Специфікації шрифтів
Безліч факторів впливає на те, які шрифти використовувати у вашій системі. Ви повинні враховувати таке:
- Продуктивність додатка: чи є у вас бюджет продуктивності? Скільки шрифтів вам потрібно завантажити? Чи будете ви використовувати шрифти, які вже встановлені на різних платформах?
- Індивідуальність: Чи маєте ви фірмові шрифти, як частину візуальної ідентичності компанії, які має сенс використовувати?
Декілька систем: вирішіть, чи потрібна одна загальна система шрифтів або різні стратегії для різних варіантів використання: наприклад, продукт або маркетинговий веб-сайт (де індивідуальність бренду може мати більшу вагу).
Поєднання пар шрифтів: Чи можете ви отримати потрібний типографічний діапазон від одного сімейства шрифтів? Розглянемо поєднання пар шрифтів. Ви можете зарезервувати декоративні шрифти для тексту великого розміру, які ви використовуєте економно, а розбірливі шрифти залишити для основного тексту. Якщо ви використовуєте безкоштовні шрифти Google, ми також створили ресурс, який допоможе вам легко вивчити різноманітні можливості за допомогою цих палітр поєднання.
Масштабування
Крім вибору правильних шрифтів для вашої системи, вам також необхідно вказати для них правильний інтерліньяж. Наприклад, ви повинні використовувати інший підхід до налаштування інтерліньяжу основного тексту, ніж для заголовків. Нижче я докладніше розповім, що слід враховувати в цих двох випадках використання.
Основний текст
Щоб зробити типографіку основного тексту читабельною, ви можете дозволити собі трохи більше простору між рядками. Основний текст щільний, і іноді користувачі витрачають багато часу на його прочитання. Як відправну точку для визначення правильного інтерліньяжу, я рекомендую помножити розмір шрифту основного тексту на 1,5. Потім оцініть, чи достатньо розбірливий отриманий результат.
Оптичні ефекти
Під час визначення інтерліньяжу основного тексту ви також маєте враховувати колірну схему тексту та його фону. У вас у застосунку позитивний текст (темний текст на світлому тлі) чи негативний (світлий текст на темному тлі)? Стиль з однаковими властивостями може виглядати по-різному залежно від контексту та оптичних ефектів.
Наприклад, у власній дизайн-системі Figma у нас є окремі стилі тексту як для позитивного, так і для негативного тексту. Основна відмінність між цими стилями полягає в невеликій зміні відстані між буквами, збільшуючи простір між буквами для стилів, що використовуються на темному тлі.
Заголовки
Вам не знадобиться так багато місця між рядками або буквами шрифту, як для основного тексту. Таким чином, ви захочете зменшити міжрядковий інтервал для заголовків. Якщо використовуваний вами шрифт має певні варіанти для дисплеїв різних розмірів, розробник шрифту, найімовірніше, ущільнив інтервал, зробивши це частиною дизайну шрифту.
Під час вибору шрифту я рекомендую встановити подобу водоспаду, щоб організувати розмір тексту від більшого до меншого. Це дасть вам огляд усієї системи.
Типографічні шкали
Не існує магічного числа, що визначає, скільки стилів або розмірів вам знадобиться. Наприклад, у цій статті креативний директор Ден Молл докладно розповідає про свій досвід, отримання широкого діапазону на основі всього 7 розмірів. Це може стати чудовою відправною точкою для вас.
Не бракує теорії, як визначити, якими будуть ці розміри, але ось кілька загальних підходів (разом із відповідними посиланнями, щоб дізнатися більше про кожен із них):
Система сітки 8-pt з базовою лінією 4-pt
У системі сітки 8-pt усі інтервали та розміри кратні 8. Дизайнери часто використовують сітку 8-pt для визначення розмірів та інтервалів з базовою сіткою 4-pt для типографіки. Базові лінії шрифту лежатимуть на сітці 4-pt. Щоб домогтися цього, потрібно приділяти більше уваги інтерліньяжу, а не точним розмірам шрифтів.
Ціль цієї системи полягає в тому, щоб усі значення інтерліньяжу були кратні 4, щоб вони відповідали розміру сітки. Це полегшує регулювання вертикального ритму (верхній і нижній інтервал між елементами) і підтримує вертикальне вирівнювання тексту по стовпцях.
Плюси: Це один із моїх улюблених підходів визначення типографічної шкали. Проста математика шляхом додавання, віднімання, ділення та множення значень. Переміщення об'єктів по полотну під час процесу проєктування можна значно спростити, налаштувавши параметр "Big nudge" на 8px у Figma.
Порада: Хоча цей підхід може здатися недостатньо гнучким, я рекомендую використовувати 8-pt сітки як орієнтир у процесі проектування, але не обов'язково посилювати їх до n-ї ступені при перевірці якості ваших дизайнів під час розроблення. У коді немає базової сітки, до якої прив'язуються об'єкти. Це, у поєднанні з великою різноманітністю роздільних здатностей пристроїв (які не завжди діляться на 8), безсумнівно, порушить ваші вимірювання!
Модульна шкала
У цьому підході обирається базовий розмір шрифту (зазвичай розмір, який ви будете використовувати для основного тексту). Як відправну точку багато хто буде використовувати налаштування браузера за замовчуванням і починати з 16px (або 1 rem). Звідси розміри шрифту розраховуються на основі певного множника.
Мінуси: якщо вас дратує неприємний вигляд шрифтів із розмірами, що містять десяткові дроби, ця система вам не підійде ?.. Це мій найменш улюблений, але все ж таки гідний підхід.
Поради: під час використання модульної шкали з деякими множниками (наприклад, з використанням золотого правила, як показано нижче) ви отримаєте розміри шрифту та інтерліньяж, які не є цілими числами. Як ви з цим розберетеся, залежить від вас: один із варіантів - округлити до найближчого цілого числа. У Figma, якщо у вас увімкнено прив'язку до пікселів, висота текстових полів (на основі інтерліньяжу) буде округлена до найближчого цілого числа. Якщо ви не хочете цього, переконайтеся, що ви вимкнули прив'язку до пікселів.
Передача розробникам: у розробці ці нюанси не матимуть великого значення, однак, якщо всі розміри текстових полів у Figma не є цілими числами, це може стати серйозною проблемою для розробників, які перевіряють ваші дизайни (тому що вони не побачать цілих чисел під час вимірювання відстаней до текстових об'єктів і від них). Я рекомендую вивчити такі інструменти, як modular scale або type scale. Вони чудово підходять для швидкої візуалізації діапазону розмірів і можуть допомогти вам визначити, наскільки вони читабельні.
Увага: ви виявите, що зі збільшенням множника, особливо понад 1,4 або 1,5, великі розміри стануть справді великими, часто занадто великими! (як показано нижче). Інтерліньяж, розрахований інструментами, відповідатиме цьому прикладу, тому ви можете вибрати інше співвідношення розмірів екрана та інтерліньяжу окремо від менших розмірів шрифту.
Відсоткова система
За такого підходу розміри шрифту визначаються в пікселях, а інтерліньяж визначається у відсотках. Це працює за тим самим принципом, що й модульна шкала, але набагато простіше в реалізації (особливо якщо розміри шрифту і відсотки - круглі числа).
Плюси: з цим методом вам не потрібно явно встановлювати різні значення інтерліньяжу (для кожного розміру шрифту). Наприклад, ви можете встановити всі менші стилі на 150%, а фактичний інтерліньяж буде розраховуватися, як 150% від зазначеного розміру шрифту.
Обережно: хоча може бути спокусливо спростити завдання, використовуючи однакове відсоткове значення для всіх розмірів, під час переходу до більших розмірів шрифту це може призвести до непривабливих поєднань. Коли розмір шрифту стане більшим, збільште міжрядкову відстань, і ви зіткнетеся з такими проблемами, як заголовки, що займають два рядки.
Порада: у цьому випадку ви можете вирішити використовувати 2 (або навіть 3) різних відсотки для розмірів основного тексту і заголовків. Наведений нижче приклад було змодельовано після того, як досвідчений користувач Figma Jonathan Simcoe використовував відсотковий підхід, про який ви можете дізнатися докладніше тут. Ви побачите зсув у значенні інтерліньяжу зі 150% до 110% при великих розмірах тексту, які використовуються для заголовків і підзаголовків.
Я пропоную вам витратити час на вивчення цих трьох різних підходів. Коли ви зможете швидко порівняти варіанти поруч на полотні в Figma, ви отримаєте уявлення про те, який з них вам більше підходить. Я також рекомендую провести стрес-тест різних варіантів у реальних макетах екрана. Отримавши набір шрифтів і розмірів, ви можете почати створювати свої стилі шрифтів у Figma, а потім публікувати їх і ділитися ними з товаришами по команді.
Далі ми розглянемо деякі пропозиції щодо іменування та організації ваших стилів тексту.
Найменування та організація стилів тексту
Найменування стилів тексту
Правильна назва може допомогти дизайнерам зрозуміти, коли і де використовувати стиль тексту, а також допомогти розробникам визначити, чи є типографіка, яку вони застосовують, частиною дизайн-системи.
Пройдіть процес іменування ваших текстових стилів у тандемі з розробкою, щоб забезпечити узгоджену термінологію між вашими проєктами в Figma і робочим кодом. Імена текстових стилів відображатимуться в поданні режиму коду в Figma, як у вигляді коментаря в поданні CSS, так і у вигляді найменування в табличному поданні. Заздалегідь скоординувавши назви текстових стилів із командою розроблення, ви значно спростите процес передання проєкту розробникам.
Ви можете використовувати кілька різних підходів до іменування стилів тексту:
Система іменування на основі розмірів (XS, S, M, L, XL)
Система семантичних імен, що відповідає HTML-тегам у розробці (заголовок, абзац, h1, h2)
Описова або функціональна система іменування, яка пояснює передбачуване використання стилів (alert, modal-header, button-label)
Описовий підхід до іменування може допомогти вам зрозуміти, де ці стилі використовуються. Зрештою ви створите більше стилів із цим підходом (оскільки деякі стилі можуть мати одні й ті самі властивості), прихованих за більш описовим ім'ям, щоб допомогти визначити їхнє передбачуване використання.
Організація стилів тексту
Сила префіксів
Щоб полегшити перегляд своїх стилів, ви можете додати префікс, відокремлений від імені стилю слешем (префікс/ім'я-стилю), який згрупує стилі за підзаголовками в палітрі стилів.
Окремі бібліотеки
Що більше стилів тексту ви додасте, то довшим буде список вибору. Щоб спростити аналіз, ви можете розділити стилі тексту на окремі бібліотеки замість однієї централізованої. Це варто зробити, якщо дизайнери використовують різні стилі для різних проєктів, щоб їм не доводилося переглядати стилі, які їм не потрібні.
Наприклад, у вас є окремий набір стилів шрифтів для нативного мобільного застосунку та стилі тексту, орієнтовані на адаптивний веб-інтерфейс. Можливо, ви захочете зберігати ці стилі у двох різних бібліотеках, тож люди, які працюють над адаптивним веб-проектом, зможуть просто переглядати конкретну бібліотеку.
Поєднання стилів кольору та стилів тексту
Як я вже згадував раніше, у Figma колір не є частиною стилю тексту, але ви можете застосувати окремий стиль кольору до текстового об'єкта або навіть застосувати кілька стилів кольору до різних частин тексту (в одному і тому ж текстовому полі!). Хоча застосування колірного стилю є додатковим кроком, вашу систему буде набагато простіше підтримувати, якщо вам не доведеться створювати текстовий стиль для кожної можливої колірної комбінації.
У зв'язку зі зростаючою потребою дизайну в доступних кольорах, багато команд будуть ретельно добирати колірні поєднання для кольору тексту і фону. Однією зі стратегій створення таких пар є збереження колірних стилів спеціально для тексту; потім використання опису стилів, щоб вказати відповідний колір фону, для якого вони призначені.
Інший підхід до управління колірними поєднаннями полягає у створенні компонентів. Це особливо корисно, якщо у вас є узгоджені текстові схеми, які використовуються у всіх ваших проектах.
Наприклад, якщо у вас є конкретна схема тексту і кольору для цитат, ви можете застосувати всі необхідні стилі тексту і кольору до зразка цитати, і перетворити його в простий компонент для повторного використання. Навіть якщо у дизайнера виникне потреба від'єднати компонент для зміни фактичного тексту, усі стилі тексту, як і раніше, застосовуватимуться.
Зміна розміру текстового поля в Figma
Ви ще читаєте? Ми вже багато чого розглянули. Оскільки ваші текстові стилі готові, у мене є остання порада.
Під час створення текстових полів у Figma, до них можна застосувати три основні режими зміни розміру:
- Збільшення по горизонталі (за замовчуванням при натисканні один раз, щоб створити нове текстове поле)
- Збільшення по вертикалі
- Фіксована зміна розміру (за замовчуванням при натисканні та перетягуванні для створення нового текстового поля)
На ранніх стадіях вашого проєкту є ймовірність, що деякі з цих властивостей можуть змінитися. Наприклад, якщо у вас встановлено збільшення розміру текстового поля по горизонталі, зміна його розміру по вертикалі автоматично змінить режим на "Фіксоване". Це завжди траплятиметься на дослідницьких етапах проєктування, коли вас менше турбує точність.
У міру того, як ви наближаєтеся до розроблення і починаєте вимогливіше ставитися до дизайну, я рекомендую за можливості встановлювати текстові поля в режим збільшення по вертикалі перш, ніж приступити до розроблення. Використання цього параметра гарантує, що висота текстових полів відповідатиме висоті рядка, зазначеної у вашому стилі шрифту. Під час перемикання в цей режим текстове поле, розмір якого занадто великий для його вмісту, автоматично змінить розмір до потрібної висоти.
Чому це важливо? Коли розробники перевіряють ваші файли, вони повинні мати можливість точно виміряти відстань між текстовими об'єктами та іншими об'єктами на полотні. Якщо текстові поля не мають точного розміру, інтервал між елементами, безсумнівно, буде відключено після реалізації.
Наприклад, у відео нижче у нас є заголовок із розміром шрифту 48px і висотою рядка 64px. У наведеному вище прикладі розмір текстового поля було змінено вручну (що змінило його поведінку при зміні розміру на фіксоване). Замість висоти 64px (визначається висотою рядка), висота була встановлена на 74px шляхом зміни розміру.
Коли розробник перевіряє файл, щоб зрозуміти, як далеко один від одного розташовані два текстових об'єкти, відстань розраховується від нижньої частини текстового поля, що містить заголовок, і становить 6px. У коді висота заголовка буде розраховуватися на основі висоти рядка (яка в даному випадку становить 64px). Таким чином, насправді, у виробничому процесі елементи будуть на 10px ближче один до одного і будуть візуально несумісні з тим, що задумав дизайнер.
У другому прикладі, встановивши поведінку зміни розміру на збільшення по вертикалі, ми побачимо, що висота регулюється відповідно до значення висоти рядка текстового стилю. Тепер, коли розробник перевіряє відстані між двома об'єктами, він бачить, що відстань становить 16px - більш точне значення відносин між цими елементами, як це було б у коді.
Якщо ви хочете дізнатися більше про зміну розміру, наша довідкова стаття детально розкриває це питання, і якщо ви хочете дізнатися більше про наші нещодавні поліпшення обробки висоти рядка, обов'язково прочитайте цей пост.
У гонитві за мрією ?
Я сподіваюся, що ці поради будуть корисні при налаштуванні набору стилів шрифтів, як частини вашої дизайн-системи. Не соромтеся ділитися своїми порадами, підходами та досвідом у нашій спільноті на Spectrum.
Переклад статті Thomas Lowry
Топ коментарі (0)