8-точкова сітка: типографіка в Інтернеті

Веб-типографіка бентежить. Чи знаєте ви найкращі практики?

Коли я почав розглядати популярні веб-сайти, щоб з’ясувати найкращі практики веб-типографіки, я повинен визнати, що мене спантеличило. Нижче наведено кілька прикладів шкал типографіки, які я витягнув із кількох популярних веб-сайтів та систем дизайну. Чи можете ви знайти об’єднавчий шаблон?

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

Три архетипи систем типографіки

Ось три загальних архетипи типографічної системи. Більшість компаній у певний момент використають усі ці три, але важливо визнати основні потреби користувачів, які вирішуються кожною орієнтацією.

Сайт маркетингу

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

Веб-досвід, спрямований на те, щоб ви щось потрапили в цю категорію. Амбіційні порушують усі правила друкарства, щоб створити переконливий і захоплюючий досвід.

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

Покращеним прикладом цього є функція інтерполяції, яку використовували Лі Тейлор та Нік Джонс на цільовій сторінці Invision.

<H1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799));. Типографіка на сторінці ретельно розрахована на роботу при будь-якому розмірі екрана.

«Використання математики для динамічного мистецького керівництва» - Лі Тейлор

Блог / Інформаційний сайт

  • Мета: Передати велику кількість текстової інформації.
  • Вимоги: Основна область зчитування може використовувати систему висоти рядка на основі співвідношення, як це робить ця стаття середнього рівня.
  • Варіант адаптивного використання: швидше за все, він буде чуйним, але при цьому буде зосереджено на читабельності.

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

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

Продукт

  • Призначення: Створено для вирішення таких проблем користувачів, як подача податків, управління Git-репо чи візуалізація показників продуктивності.
  • Вимоги: Текст повинен добре вписуватися в ієрархію елементів. Текст в основному використовується для міток, інструкцій та відображених даних.
  • Варіант реагування : мінімально чуйний. Високорозвинені продукти будуть використовувати адаптивний дизайн, що означає різні враження для мобільних пристроїв та настільних ПК. Основна увага приділяється ієрархії елементів, які підтримують взаємодію з користувачем.

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

Метод відстані матеріалу заснований на 8-кратній компонентній сітковій системі та 4-кратній базовій сітці для типографіки. Вони намагаються масштабувати висоти рядків з кроком 4. Масштабування з кроком 8 за допомогою вашої базової сітки може бути важким, оскільки доступні висоти рядків занадто віддалені для деяких розмірів тексту.

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

При застосуванні система базової лінії сітки має можливість вирівняти просторову систему елемента (сітка 8 балів) із системою типографіки, щоб створити переконливий вертикальний ритм у дизайні.

Впровадження веб-типографії - насправді

Можна створити владний та структурований інтерфейс, який дотримується 8-кратної сітки, яка також має довгу форму для читання.

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

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

Підводний камінь - Емс, Емс та пікселі

Щоб виразити чітку та послідовну систему, типографічні виміри повинні бути легко інтерпретовані командою, що розробляє її.

Відносні одиниці, такі як rems та ems, іноді неправильно розуміють, і, на мій досвід, це призводить до нестійкої системи типографіки. Наприклад, співвідношення між розміром шрифту 14px і висотою рядка 20px не слід фіксувати у відносних одиницях, оскільки це співвідношення має змінюватися в міру збільшення розміру шрифту.

Визначати висоту лінії 1,4285714286em смішно, тому що більшість людей не можуть робити таку математику в голові. Якщо розмір шрифту збільшиться до 16 пікселів, браузер відобразить висоту рядка 22,857142 пікселів, і таке розбиття пікселів - головний біль, який чекає. Це створює плутанину і є неправильним використанням відносних одиниць. Повний список абсолютних та відносних одиниць дивіться тут.

Чому сьогодні так багато систем дизайну, заснованих на відносному розмірі? Відповідь - "доступність".

Однак браузери не масштабують базовий розмір шрифту під час збільшення command +. Існують інструменти доступності, які дозволяють масштабувати базові розміри шрифтів для користувачів, яким це потрібно. Я рекомендую правильно протестувати його, щоб переконатися, що це досвід, який ви хочете, щоб користувачі мали. Доступність галочки може зашкодити більше, ніж допомагає.

Використання RMS та EMS на вашому сайті / програмі надзвичайно потужне. Є багато дуже цікавих випадків використання, і вони повинні бути важливою частиною вашого набору інструментів.

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

8pt сітка типографіки

Найпотужніша частина концепції сітки 8pt - це її здатність забезпечувати узгодженість у вашому дизайні. Вам потрібно буде оцінити потреби ваших користувачів і найкращий спосіб масштабувати вашу типографіку відповідно до цих потреб.

Я настійно рекомендую проектуванню та проектуванню співпрацювати над доопрацюванням цих стандартів для компанії / продукту.

Ось зразки кількох знайомих назв: Google Material, Pivotal, Atlassian, Intuit.

Посилання та відповідне читання

  • Пріянка Годболе: Рамка для створення передбачуваної та гармонійної системи інтервалів для швидшого передавання даних розробника
  • Річард Руттер: Елементи друкарського стилю, застосовані до Мережі
  • Ян Йейтс: Як встановити модульну друкарську шкалу
  • Натан Кертіс: Простір у дизайнерських системах
  • Вінсент Де Олівейра: глибоке занурення CSS: метрики шрифту, висота рядка та вертикальне вирівнювання
  • Кезз Брейсі: Чому ви повинні використовувати макети на основі Rem

Попередні 8-точкові статті сітки:

  1. Вступ до 8-бальної сіткової системи
  2. 8-точкова сітка: межі та макети
  3. 8-точкова сітка: вертикальний ритм

Запитання:

Це те, що я все ще досліджую. У вас є хороший приклад, яким можна поділитися? Чи маєте ви інший підхід до 8-кратної друкарської системи?

Якщо у вас є думки, залиште коментар або зв’яжіться в Twitter.