Tipografia web este confuză. Cunoașteți cele mai bune practici?

Când am început să mă uit în jur la site-uri web populare pentru a afla cele mai bune practici pentru tipografia web, trebuie să recunosc că am fost nedumerit. Mai jos sunt câteva exemple de scale de tipografie pe care le-am extras de pe câteva site-uri web populare și sisteme de proiectare. Puteți găsi modelul unificator?

Grila in 8 puncte tipografie pe web
Probele simplificate pentru a se potrivi pe o scară standard

În mod evident, există diferite abordări ale sistemelor de tip. Realitatea este că, în calitate de comunitate web, nu suntem cu toții de acord. Cu toate acestea, la fel ca majoritatea problemelor de proiectare, începe cu adevărat prin abordarea nevoilor utilizatorului.

Cele trei arhetipuri ale sistemelor de tipografie

Iată trei arhetipuri generale ale sistemului de tipografie. Majoritatea companiilor le vor utiliza pe toate trei la un moment dat, dar este important să recunoaștem nevoile utilizatorilor de bază care sunt abordate de fiecare orientare.

Site de marketing

  • Scop: Construit pentru a spune o anumită poveste și a inspira vizitatorii să-și petreacă timpul și / sau banii pe site.
  • Cerințe: Fiecare tip de literă va avea nevoie de propriul set de stiluri, iar varietatea de dimensiuni se va baza mai mult pe direcția artistică decât pe potrivirea elementelor.
  • Caz de utilizare receptiv: Sistemul va trebui să se flexeze prin mai multe dimensiuni, de la mobil până la desktop.
1612192211 612 Grila in 8 puncte tipografie pe web

Experiențele web orientate spre a vă prezenta ceva ajung în această categorie. Cei ambițioși încalcă toate regulile tipografiei pentru a crea experiențe convingătoare și captivante.

În timp ce o mulțime de gânduri se îndreaptă spre aceste site-uri, accentul este pus pe a face o stropire, mai degrabă decât un sistem extensibil, care poate fi construit pe viitor. Aceste site-uri au, în general, o durată scurtă de valabilitate și sunt aruncate în întregime pentru o reproiectare de sus în jos.

Un exemplu avansat în acest sens este funcția de interpolare utilizată de Leigh Taylor și Nick Jones pe Pagina de destinație a lui Invision.

<h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. Tipografia de pe pagină este calculată meticulos pentru a funcționa la fiecare dimensiune a ecranului.

„Folosirea matematicii pentru a face o direcție artistică dinamică” – Leigh Taylor

Blog / site Info

  • Scop: Pentru a transmite o cantitate mare de informații bazate pe text.
  • Cerințe: Zona principală de lectură poate utiliza un sistem de înălțime linie bazat pe raport, la fel cum face acest articol mediu.
  • Caz de utilizare receptiv: Va fi probabil receptiv, dar menținând accentul pe lizibilitate.
1612192211 470 Grila in 8 puncte tipografie pe web

Acest articol Medium este un exemplu de experiență web creată pentru citirea în formă lungă.

Accentul nu se referă la interpretarea unor mici vizualizări sau la completarea formularelor. Rapoartele de dimensiune pe care le-au ales sunt construite special pentru lizibilitate constrânsă pentru a obține lungimea liniei dorită. Pot citi confortabil fiecare linie, deoarece tipografia a fost realizată cu atenție pentru a se potrivi nevoilor mele de cititor.

Produs

  • Scop: Construit pentru a rezolva o problemă a utilizatorului, cum ar fi depunerea taxelor, gestionarea unei repo git sau vizualizarea valorilor de performanță.
  • Cerințe: Textul trebuie să se încadreze frumos în ierarhia elementelor. Textul este utilizat în principal pentru etichete, instrucțiuni și date afișate.
  • Caz de utilizare receptiv: Minim receptiv. Produsele foarte dezvoltate vor utiliza un design adaptiv, ceea ce înseamnă diferite experiențe pentru mobil și desktop. Accentul se pune pe ierarhia elementelor care susțin experiența utilizatorului.
1612192211 24 Grila in 8 puncte tipografie pe web

Designul materialelor Google este un limbaj de proiectare popular care se aplică în multe cazuri de utilizare a produselor.

Materialul metoda de spațiere se bazează pe un sistem de grilă de componente de 8pt și o grilă de bază de 4pt pentru tipografie. Încearcă să scaleze înălțimile liniei cu trepte de 4. Scalarea cu trepte de 8 cu grila de bază poate fi dificilă, deoarece înălțimile de linie disponibile sunt prea depărtate pentru unele dimensiuni de text.

Permiterea ca unele dintre dimensiunile fontului să fie însoțite de o înălțime a liniei mai adecvată este o cale excelentă înainte. Puteți oricând distruge distanța deasupra sau dedesubtul unei linii date cu 4 px pentru a o face să se alinieze cu grila atomică mai mare.

Atunci când este aplicat, sistemul de rețea de bază are capacitatea de a alinia sistemul spațial al elementului (rețea de 8pt) cu sistemul de tipografie pentru a crea un ritm vertical convingător în proiectare.

Implementarea tipografiei web – în realitate

Este posibil să aveți o UI opinionată și structurată care să adere la o grilă de 8pt, care are, de asemenea, o zonă de lectură de formă lungă.

Permiteți sistemului de rețea fixă ​​de bază să gestioneze textul din interiorul componentelor structurate și utilizați o scară modulară pentru a crea o experiență de lectură optimă pentru blogul sau documentele pe care le-ați adăugat pe site-ul dvs.

Majoritatea companiilor de produse digitale fac acest lucru deja între pagina lor de destinație de marketing, produsul digital și documentația lor. Luarea deciziei de a structura separat aceste tărâmuri tipografice vă poate elibera de o complexitate nesustenabilă.

1612192211 44 Grila in 8 puncte tipografie pe web
Amestecarea tipurilor de conținut

Capcana – Ems, rems și pixeli oh!

Pentru a exprima un sistem clar și consistent, măsurătorile tipografice trebuie interpretate cu ușurință de către echipa de produs care îl construiește.

Unități relative precum rems și ems sunt uneori neînțelese și, din experiența mea, acest lucru duce la un sistem de tipografie nesustenabil. De exemplu, raportul dintre dimensiunea fontului de 14 px și o înălțime a liniei de 20 px nu ar trebui să fie capturat în unități relative, deoarece acel raport ar trebui să se schimbe pe măsură ce dimensiunea fontului crește.

Definirea unei înălțimi de linie de 1,4285714286em este ridicolă, deoarece majoritatea oamenilor nu pot face acest tip de matematică în cap. Dacă dimensiunea fontului crește la 16 px, browserul va reda o înălțime a liniei de 22,857142px și acest tip de împărțire a pixelilor este o durere de cap care așteaptă să se întâmple. Acest lucru creează confuzie și este o utilizare greșită a unităților relative. Vezi o listă completă de unități absolute vs relative aici.

De ce sunt astăzi atâtea sisteme de proiectare bazate pe dimensiuni relative? Răspunsul este „accesibilitate”.

Cu toate acestea, browserele nu scalează dimensiunea de bază a fontului atunci când măriți cu command +. Există instrumente de accesibilitate care vor scala dimensiunile fontului de bază pentru utilizatorii care au nevoie de el. Vă recomand să îl testați corect pentru a vă asigura că este experiența pe care doriți să o aibă utilizatorii. Accesibilitatea bifează poate afecta mai mult decât ajută.

Utilizarea remsurilor și a emsurilor în site-ul / aplicația dvs. este uimitor de puternică. Există multe cazuri de utilizare foarte interesante și ar trebui să fie o parte importantă a setului de instrumente.

Sugestia mea este să le folosiți cu ușurință până când veți avea o utilizare solidă pentru ele. Coacerea lor în nucleul sistemului dvs. de tipografie vă poate deschide la confuzie și experiențe neașteptate ale utilizatorului.

Tipografia grilei de 8pt

Cea mai puternică parte a conceptului de rețea 8pt este capacitatea sa de a asigura consistența în toate proiectele. Va trebui să evaluați nevoile utilizatorilor dvs. și cel mai bun mod de a vă scala tipografia pentru a satisface aceste nevoi.

Încurajez foarte mult proiectarea și ingineria să colaboreze la finalizarea acestor standarde pentru o companie / produs.

Iată exemple de câteva nume familiare: Material Google, Pivot, Atlassian, Intui.

1612192212 722 Grila in 8 puncte tipografie pe web
Probele simplificate pentru a se potrivi pe o scară standard

Articolele anterioare ale grilei în 8 puncte:

  1. Introducere în sistemul de rețea în 8 puncte
  2. Grilă în 8 puncte: chenare și aspecte
  3. Grilă în 8 puncte: ritm vertical

Întrebări:

Este un lucru pe care îl explorez încă. Aveți un exemplu bun de împărtășit? Aveți o abordare diferită a unui sistem de tipografie de 8pt?

Dacă aveți gânduri, vă rugăm să lăsați un comentariu sau să contactați Stare de nervozitate.