Як налаштувати властивості тексту в Adobe XD

Коли у вашому проекті Adobe XD є текст, ви можете почати змінювати властивості тексту. Ці властивості включають сімейство шрифтів, розмір шрифту, вагу шрифту, вирівнювання, інтервал між символами (кернінг і відстеження), інтервал між рядками (провідний), заливку, межу (обведення), тінь (тінь) і розмиття фону. Тож давайте розглянемо, як ці властивості застосовуються.

Про читабельність і вибір шрифту

Вибір шрифту має вирішальне значення. У вашій системі може бути багато варіантів шрифтів, але лише деякі з них вирізають його як вдалий вибір для читання з екрана. Деякі характеристики, на які слід звернути увагу при виборі шрифту, включають наступне:

• З засічками чи без засічок? Нижче ви бачите сімейство шрифтів у стилі з засічками зверху та один шрифт без засічок унизу. Засічки мають невеликий виступ, який завершує штрих літери. З іншого боку, без засічок не має такої незначної проекції. Шрифти без засічок, як правило, виглядають більш сучасними і є популярним вибором для інтерактивних програм і веб-сайтів. У минулому вважалося, що сімейства шрифтів із засічками легше читати, коли є великий обсяг тексту. Тести, проведені за допомогою пристроїв для відстеження очей, довели, що немає суттєвої різниці в читабельності між засічками та без засічок, тому не соромтеся вибирати будь-який стиль, якщо ви звернете увагу на деякі інші характеристики шрифту, які слідують далі.

  Шрифт із засічками зверху, без засічок унизу.

• Пряма, рівномірна ширина рядків: оскільки ваш тип буде створюватися з пікселів, краще не мати багато варіацій у ширині вашого тексту. Ви можете побачити різницю в попередньому перегляді в пікселях між вибором шрифту з різною шириною (зверху) і шрифтом, який відповідає ширині.

  Верхній шрифт має варіації товстих і тонких ліній, які створюють шрифт; нижній шрифт є послідовним і його легше читати на екрані.

• Сильні лічильники: лічильники — це отвори, які ви бачите в літерах, таких як «O», «B» і «R». Зверніть увагу на те, наскільки великі ці лічильники, оскільки вони також можуть спричинити проблеми з читаністю, якщо вони закриваються, коли відображаються у вигляді пікселів на екрані. З'являється піксельне зображення двох різних сімейств шрифтів; подивіться, як виглядають лічильники в кожній у порівнянні один з одним.

  Шукайте потужні відкриті лічильники у виборі сімейства шрифтів.

• Десцендери та висота головки: короткі спускні і низькі висоти головки важливі для читабельності на екрані. У верхній частині ви бачите сімейство шрифтів з короткими спадними символами та низькою висотою літер; внизу — шрифт із довгими низхідними рядками та великою висотою кепки.

  Сімейство шрифтів із короткими спадними символами та низькою висотою літер, як правило, легше читати на екрані.

Вибір сімейства шрифтів

Тепер, коли ви знаєте, що краще вибрати шрифт для читабельності, скористайтеся панеллю «Властивості», щоб вибрати один. На що слід звернути увагу під час вибору:

• Сімейство шрифтів: після того, як ви ввели певний тип на екрані, ви можете вибрати його та вибрати спадне меню Сімейство шрифтів у розділі «Текст» панелі «Властивості». Якщо ви знаєте потрібний шрифт, просто почніть вводити назву шрифту в текстове поле сімейства шрифтів, і якщо він є у вашій системі, він буде знайдений у вашому списку.

  Не забувайте, що у вас є шрифти, доступні через Adobe TypeKit.

• Вага шрифту: після того, як ви виберете сімейство шрифтів, ви можете вибрати вагу зі спадного меню Вага шрифту. Залежно від шрифтів, які у вас є у вашій системі, у вас буде різний вибір ваги шрифту.

  Виберіть сімейство шрифтів і вагу шрифту.

• Розмір шрифту: ви можете просто ввести розмір шрифту в текстове поле «Розмір шрифту», але якщо ви не впевнені, який розмір найкраще підходить, ви можете розташувати курсор під текстовим полем «Розмір шрифту», клацнути та перетягнути. Перед перетягуванням знайдіть двосторонню стрілку. Перетягування вгору зменшує розмір; пух збільшує розмір.

  Натисніть і перетягніть, щоб візуально змінити розмір шрифту.

• Вирівнювання: ви можете змінити вибраний текст на «Вирівняти ліворуч», «По центру» або «Праворуч» за допомогою кнопок «Вирівнювання» в розділі «Текст» панелі «Властивості».
• Інтервал між символами: інтервал між символами відноситься до інтервалу між символами. Це відомо як відстеження . Тут ви бачите результат збільшення інтервалу між символами.

  Символи зі звичайним інтервалом, встановленим на 0 (нуль), а потім на 150.

Зауважте, що ви можете використовувати ту саму техніку клацання й перетягування, яка доступна в текстовому полі «Розмір шрифту», щоб візуально змінити інтервал між символами.

Ви також можете візуально змінити розмір інтервалу між символами, клацнувши та перетягнувши.

• Висота лінії: висота лінії є провідною , простір між рядками тексту. Це може відігравати важливу роль у інформаційному дизайні, тому переконайтеся, що ви використовуєте це послідовно протягом усього свого дизайну. Ви також можете розташувати курсор під текстовим полем Висота лінії та клацнути та перетягнути вгору або вниз, щоб зменшити або збільшити висоту лінії.
• Колір: змініть колір заливки, клацнувши прапорець біля пункту Колір заливки на панелі «Властивості». Ви виконуєте це завдання так само, як і з будь-якою фігурою. Виберіть поле «Заливка» та виберіть колір із засобу вибору кольорів. Ви також можете вибрати прозорість для свого тексту на слайді «Прозорість», доступному праворуч від засобу вибору кольору.
• Межа. Застосування межі обводить текст. Це не рекомендується, оскільки це може спричинити проблеми з читабельністю. Використовуйте його помірно і, можливо, лише для спеціальних ефектів. На зображенні нижче показано приклад більшого шрифту, який має тонку обводку та білу заливку на темному фоні. У такій ситуації рамка може працювати, але не з меншим текстом.

  Невелика рамка з білою заливкою на темному тлі.