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

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

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

Пробите са опростени, за да се поберат в стандартна скала

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

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

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

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

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

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

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

Напреднал пример за това е функцията за интерполация, използвана от Лий Тейлър и Ник Джоунс на целевата страница на Invision.

има размер на шрифта: calc (32px + ((24 * (100vw - 800px)) / 799)); Типографията на страницата е щателно изчислена, за да работи при всеки размер на екрана.

„Използване на математиката, за да направя динамична художествена посока“ - Лий Тейлър

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

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

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

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

продукт

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

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

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

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

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

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

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

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

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

Смесване на типове съдържание заедно

Камината - Ems, rems и пиксели, о!

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

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

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

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

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

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

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

Типография на 8pt Grid

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

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

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

Пробите са опростени, за да се поберат в стандартна скала

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

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

Предишни членове от 8-точкова мрежа:

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

въпроси:

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

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