Типографіка
Spaceship досліджує два типографічні середовища: технічний округлий шрифт Gotham Rounded і простіший та більш геометричний шрифт Proxima Nova.
Впевнена й пряма, типографіка забезпечує дружній і розмовний тон із нашою аудиторією.
Основний шрифт
Gotham Rounded — це дружній шрифт із технічним ДНК. Використовується виключно в логотипі Spaceship, суббрендах продуктів, інструментах і айдентиці команди. Дозволені лише накреслення Medium, book і light.
Додатковий шрифт
Proxima Nova є ключовим елементом графічного середовища Spaceship. Це основний шрифт для нашого тексту й інформації у всіх комунікаціях. Дозволені лише накреслення bold, medium, regular і light.
Масштаб
Ми створили нашу систему масштабування шрифтів, використовуючи Золоте січення (1:1,618), і визначили всі необхідні кроки розмірів.Використовуючи Typographic Scale Calculator modularscale.com, ми можемо створити повний набір масштабів шрифту з основного базового розміру. Оскільки Золоте січення створює великі стрибки між розмірами, потрібно додати другий базовий розмір (у 2 рази більший за базовий), щоб отримати більш корисний діапазон. У цьому прикладі показано масштаб шрифту на основі базового розміру 16px.
Стилі тексту
Proxima Nova можна використовувати як у дрібному основному тексті, так і у великих заголовках із максимальною оптичної послідовністю. Її широкий вибір накреслень дозволяє легко підібрати тон або повідомлення. Текст бажано вирівнювати по лівому краю, хоча центрування можна використовувати за потреби.
Для великих заголовків використовуйте жирне накреслення, оптичний кернінг, автоматичний міжрядковий інтервал і 80% міжсловного інтервалу.
Для звичайних заголовків використовуйте жирне накреслення, оптичний кернінг, автоматичний міжрядковий інтервал і 80% міжсловного інтервалу.
Для коротких підзаголовків використовуйте середнє або звичайне накреслення, оптичний кернінг, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.
Для довгих підзаголовків використовуйте середнє або звичайне накреслення, оптичний кернінг, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.
Для абзаців використовуйте звичайне або легке накреслення, метричний кернінг, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.
Для дрібного основного тексту використовуйте звичайне або легке накреслення, метричний кернінг, автоматичний міжрядковий інтервал і 100% міжсловного інтервалу.
Рекомендації
Не використовуйте конкретні значення кернінгу, ані позитивні, ані негативні.
Не використовуйте конкретні значення міжрядкового інтервалу, ані щільніше, ані розрідженіше.
Не використовуйте абзаци, вирівняні по правому краю
Ієрархія шрифтів
Типографіка повинна чітко відображати ієрархію між заголовками, підзаголовками та основним текстом. Поєднання правильних накреслень і розмірів створює сильний візуальний контраст і допомагає орієнтувати читача. Це ключ до ефективної ієрархії контенту.
Рекомендації
Не використовуйте однакові накреслення основного тексту для різних типів контенту
Зберігайте співвідношення накреслень зверху вниз: тобто сильніші заголовки, легші підзаголовки або основний текст.
Не використовуйте схожі розміри шрифту й накреслення для різних типів контенту.
Безпечні відступи
Щоб гарантувати максимальну читабельність, ми використовуємо міжрядковий інтервал заголовка як орієнтир для встановлення безпечних відступів до наступних текстових блоків.
Комбінації кольорів
Шрифт на суцільному кольоровому фоні слід використовувати лише в комбінаціях кольорів, наведених нижче.
Рекомендації
Не використовуйте інші кольори, допоміжні або суббрендові кольори SDS для будь-якого типу шрифту.
Не використовуйте шрифт кольору SDS Blue на допоміжних або суббрендових кольорах. Використовуйте лише білий або темно-сірий.
Звертайте увагу на коефіцієнт контрастності між шрифтом і фоном. Не використовуйте допоміжні кольори, відтінки чи тіні.
Фони
Контрастність і читабельність — ключові елементи, які слід враховувати при використанні шрифту на зображеннях або кольорових фонах.
Рекомендації
Уникайте використання кольору SDS Blue на складних зображеннях або ілюстраціях. Це стосується як світлих, так і темних зображень.
Не розміщуйте текст на контрастних зображеннях. Це стосується як світлих, так і темних зображень.
Не перевантажуйте зображення текстом. Баланс — ключ до ефективної комунікації.