8-точкова решетка: Типография в мрежата

Уеб типографията е объркваща. Знаете ли най-добрите практики?

Когато започнах да разглеждам популярни уебсайтове, за да разбера най-добрите практики за уеб типография, трябва да призная, че бях объркан. По-долу са някои примери за типографски везни, които извадих от няколко популярни уебсайта и системи за дизайн. Можете ли да намерите обединяващия модел?

Очевидно има различни подходи към типовите системи. Реалността е, че като уеб общност не всички сме съгласни. Въпреки това, както повечето дизайнерски проблеми, той наистина започва с адресиране на нуждите на потребителя.

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

Ето три основни архетипа на типографската система. Повечето компании ще използват и трите в даден момент, но е важно да се разпознаят основните нужди на потребителите, които се разглеждат от всяка ориентация.

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

  • Цел: Създаден да разказва конкретна история и да вдъхновява посетителите да прекарват времето и / или парите си в сайта.
  • Изисквания: Всеки шрифт ще се нуждае от собствен набор от стилове и разнообразието от размери ще се основава на художествената посока повече от монтирането на елемент.
  • Отзивчив случай на употреба: Системата ще трябва да се променя през различни размери от мобилен до настолен.

Уеб преживяванията, насочени към това да ви представят нещо, което се озовава в тази категория. Амбициозните нарушават всички правила на типографията, за да създадат завладяващи и завладяващи преживявания.

Макар че много мисли за тези сайтове, фокусът е върху създаването на апликация, а не върху разширяема система, която може да бъде надградена в бъдеще. Тези сайтове обикновено имат кратък срок на годност и се изхвърлят изцяло за редизайн от горе до долу.

Разширен пример за това е функцията за интерполация, използвана от Leigh Taylor и Nick Jones на целевата страница на Invision.

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

„Използване на математика за динамично направление на изкуството“ - Leigh Taylor

Блог / Инфо сайт

  • Предназначение: Да предаде голямо количество текстова информация.
  • Изисквания: Основната зона за четене може да използва система, базирана на съотношение височина на линията, точно както прави тази статия за Medium.
  • Отзивчив случай на употреба: Вероятно ще реагира, но ще запази фокуса върху четливостта

Тази статия за Medium е пример за уеб изживяване, създадено за четене в дълга форма.

Фокусът не е върху тълкуването на малки визуализации или попълването на формуляри. Съотношенията на размерите, които са избрали, са специално създадени за четливост, за да се получи желаната дължина на реда. Мога да чета удобно всеки ред, защото типографията е внимателно изработена, за да отговаря на моите нужди като четец.

Продукт

  • Предназначение: Създаден за решаване на потребителски проблем като подаване на данъци, управление на Git репо или визуализиране на показатели за ефективност.
  • Изисквания: Текстът трябва да се вписва добре в йерархията на елементите. Текстът се използва предимно за етикети, инструкции и показани данни.
  • Отзивчив случай на употреба: Минимално реагиращ. Високо разработените продукти ще използват адаптивен дизайн, което означава различно изживяване за мобилни устройства и настолни компютри. Фокусът е върху йерархията на елементите, които поддържат потребителското изживяване.

Материалният дизайн на Google е популярен език за дизайн, който е приложим за много случаи на употреба на продукти.

Методът за раздалечаване на материала се основава на 8pt компонентна мрежова система и 4pt базова решетка за типография. Те се опитват да мащабират височините на линиите със стъпки от 4. Мащабирането чрез стъпки от 8 с вашата базова решетка може да бъде трудно, тъй като наличните височини на линиите са твърде отдалечени за някои размери на текста.

Разрешаването на някои от размерите на шрифта да бъдат придружени с по-подходяща височина на линията е чудесен път напред. Винаги можете да преместите разстоянието над или под даден ред с 4px, за да го накарате да се изравни с по-голямата атомна мрежа.

Когато се прилага, основната решетъчна система има способността да подравнява пространствената система на елемента (8pt мрежа) със системата за типография, за да създаде завладяващ вертикален ритъм в дизайна.

Внедряване на уеб типография - в действителност

Възможно е да имате опитен и структуриран потребителски интерфейс, придържащ се към 8pt мрежа, която също има зона за четене в дълга форма.

Позволете на фиксираната базова мрежа мрежа да обработва текста във вашите структурирани компоненти и използвайте модулна скала, за да създадете оптимално изживяване за четене на блога или документите, които сте добавили към вашия сайт.

Повечето компании за цифрови продукти правят това вече между своята маркетингова целева страница, цифровия продукт и тяхната документация. Вземането на решение за структуриране на тези типографски сфери поотделно може да ви освободи от неустойчива сложност.

Ловушката - Ems, rems и пиксели, о, боже!

За да се изрази ясна и последователна система, измерванията на типографията трябва да бъдат лесно интерпретирани от продуктовия екип, който я изгражда.

Относителни единици като rems и ems понякога се разбират погрешно и според моя опит това води до неустойчива система за типография. Например съотношението между 14px размер на шрифта и 20px височина на реда не трябва да се улавя в относителни единици, защото това съотношение трябва да се променя с увеличаване на размера на шрифта.

Дефинирането на височина на линията от 1,4285714286em е нелепо, защото повечето хора не могат да си правят математика в главата. Ако размерът на шрифта се увеличи до 16px, браузърът ще покаже височина на линията от 22.857142px и този вид разделяне на пиксели е главоболие, което чака да се случи. Това създава объркване и представлява злоупотреба с относителни единици. Вижте пълния списък на абсолютните спрямо относителните единици тук.

Защо днес са толкова много системи за дизайн, базирани на относително оразмеряване? Отговорът е „достъпност“.

Въпреки това браузърите не мащабират основния размер на шрифта, когато увеличавате с command +. Има инструменти за достъпност, които ще мащабират основните размери на шрифта за потребители, които се нуждаят от него. Препоръчвам правилно да го тествате, за да сте сигурни, че това е опитът, който искате да имат потребителите. Достъпността с отметка може да навреди повече, отколкото помага.

Използването на rems и ems във вашия сайт / приложение е невероятно мощно. Има много много интересни случаи на употреба и те трябва да бъдат важна част от вашия инструментариум.

Моето предложение е да ги използвате пестеливо, докато не ги ползвате стабилно. Включването им в ядрото на вашата система за типография може да ви отвори за объркване и неочаквани потребителски преживявания.

8pt решетка типография

Най-мощната част от концепцията за 8pt мрежа е способността му да постига последователност във вашите проекти. Ще трябва да оцените нуждите на вашите потребители и най-добрия начин да мащабирате вашата типография, за да отговорите на тези нужди.

Силно насърчавам дизайна и инженерството да си сътрудничат при финализирането на тези стандарти за компания / продукт.

Ето проби от няколко познати имена: Google Material, Pivotal, Atlassian, Intuit.

Справки и свързано четене

  • Priyanka Godbole: Рамка за създаване на предсказуема и хармонична система за раздалечаване за по-бързо предаване на дизайн-разработка
  • Ричард Рътър: Елементите на типографския стил, приложени към мрежата
  • Ян Йейтс: Как да установим модулна типографска скала
  • Нейтън Къртис: Космосът в дизайнерските системи
  • Винсент Де Оливейра: Дълбоко гмуркане CSS: метрики на шрифта, височина на линията и вертикално подравняване
  • Kezz Bracey: Защо трябва да използвате оформления, базирани на Rem

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

  1. Въведение в 8-точковата мрежа мрежа
  2. 8-точкова решетка: Граници и оформления
  3. 8-точкова решетка: вертикален ритъм

Въпроси:

Това е нещо, което все още проучвам. Имате ли добър пример за споделяне? Имате ли различен подход към 8pt система за типография?

Ако имате мисли, моля, оставете коментар или се свържете в Twitter.