Типографіка

Типографічне середовище Spaceship використовує два шрифти: дружній і технічний Gotham Rounded та більш простий і геометричний Proxima Nova.

Hero Image

Типографіка Spaceship впевнена й лаконічна, що дозволяє встановити дружній і розмовний тон із нашою аудиторією.



Основний шрифт

Gotham Rounded — це дружній, але водночас вишуканий шрифт. Він використовується виключно в логотипі Spaceship, суббрендах продукту та ідентифікації команди. Дозволені лише накреслення medium, book і light.









Додатковий шрифт

Proxima Nova — ключовий елемент графічного середовища Spaceship. Це основний шрифт для всіх комунікацій. Дозволені лише накреслення bold, medium, regular і light при роботі з цим шрифтом.









Масштаб

Система масштабування шрифтів і необхідні кроки розміру були створені й визначені за допомогою золотого перетину (1:1.618). Ми створили повний набір масштабів шрифтів із калькулятором типографічного масштабу на основі основного базового розміру. Оскільки золотий перетин створює великі стрибки між розмірами, для отримання більш оптимального діапазону потрібен другий базовий розмір (у 2 рази більший за базовий). Нижче наведено приклад масштабу шрифтів на основі  16px і 32px базових розмірів.









Стилі тексту

Proxima Nova має максимальну оптичну узгодженість як у малому основному тексті, так і у великих заголовках. Її широкий вибір накреслень робить її придатною для будь-якого тону чи повідомлення. Переважно використовувати вирівнювання по лівому краю, хоча за потреби можна використовувати й центрування.




Для великих заголовків використовуйте жирний накреслення, оптичне кернування, автоматичний міжрядковий інтервал і 80% міжсловного інтервалу.


Для звичайних заголовків використовуйте жирний накреслення, оптичне кернування, автоматичний міжрядковий інтервал і 80% міжсловного інтервалу.


Для коротких підзаголовків використовуйте середнє або звичайне накреслення, оптичне кернування, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу. 


Для довгих підзаголовків використовуйте середнє або звичайне накреслення, оптичне кернування, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.


Для абзаців використовуйте звичайне або легке накреслення, метричне кернування, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.


Для малого основного тексту використовуйте звичайне або легке накреслення, метричне кернування, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.







Ієрархія шрифтів

Для ефективної ієрархії контенту типографіка має передавати організаційний зв'язок між заголовками, підзаголовками та основним текстом. Поєднання правильних накреслень і розмірів створює сильний візуальний контраст і допомагає спрямовувати читача.









Безпечні відступи

Ми використовуємо міжрядковий інтервал заголовка як орієнтир для відстані між рядками, щоб забезпечити максимальну читабельність і встановити безпечні відступи для наступних текстових блоків.









Комбінації кольорів

Дозволяються лише наведені нижче комбінації кольорів при використанні тексту на суцільних кольорових фонах.










Фони

Контрастність і читабельність — ключові елементи при використанні тексту поверх зображень або кольорових фонів.










Рекомендації

Ось кілька прикладів того, чого слід уникати при роботі з текстом. 




Не змінюйте різко визначені значення кернування, міжсловного інтервалу та міжрядкового інтервалу.


Пам’ятайте про ієрархію: сильніші заголовки, легші підзаголовки, основний текст тощо.


Не використовуйте абзаци з вирівнюванням по правому краю.


Не використовуйте інші кольори для будь-якого тексту, такі як допоміжні, продуктові чи суббрендові кольори.


Використовуйте лише білий або темно-сірий текст на кольорових фонах.


Читабельність — головне. Не розміщуйте текст на складних зображеннях або фонах подібного відтінку.