GHIDUL DESIGNERULUI PENTRU SPAȚIEREA LITERELOR
Majoritatea informațiilor pe care le consumăm au loc prin citire, așa că este foarte logic să acordăm atenție cuvintelor atunci când proiectăm. Există multe aspecte ale tipografiei, dar unul dintre lucrurile care a ajutat la îmbunătățirea calității designului meu a fost spațierea dintre litere.
Spațierea dintre litere se referă la adăugarea și eliminarea spațiului dintre litere. Unii oameni îl confundă cu kerning, dar acestea două sunt diferite; spațierea literelor afectează întreaga linie de text, în timp ce kerningul ajustează spațiul dintre două litere individuale în același timp. Kerning este cel mai bine lăsat la designeri de tip, în afară de care, spre deosebire de spațierea dintre litere, în prezent nu există nicio modalitate de a controla kerning în CSS.
Cred că practica și multă observație vor schimba modul în care tratați și spația dintre litere în munca dvs.
Scopul spațierii dintre litere
Scopul principal al spațierii dintre litere este de a îmbunătăți lizibilitatea și lizibilitatea textului. Cuvintele acționează diferit în funcție de dimensiunea, culoarea și fundalul pe care se află. Prin ajustarea spațierii dintre litere la mediul cu care lucrați, veți ajuta cititorii să vă consume informațiile mai rapid și mai eficient. Partea distractivă este că nici măcar nu vor observa acest lucru – acesta este scopul muncii.
Rețineți că tipografii se gândesc la spațierea literelor și la kerning atunci când proiectează un tip de literă. Înseamnă că nu trebuie să-l aplicați întregului text, dar pentru a înțelege când este necesar, ar trebui să cunoașteți câteva principii de bază și să folosiți fonturi bune.
Cum afectează spația dintre litere lizibilitatea și lizibilitatea
Lizibilitatea și lizibilitatea textului dvs. depind de lucruri precum înălțimea rândului, lungimea paragrafului, dimensiunea fontului, alegerea tipului de literă, spațierea literelor și multe altele. În ceea ce privește spațierea dintre litere, dacă abia vă apucați de tipografie, cel mai bun lucru pe care îl puteți face este să nu o folosiți excesiv. Ceea ce vreau să spun prin asta este pur și simplu să nu faci distanța dintre litere prea mare sau prea mică; chiar dacă crezi că arată bine, oamenii se vor chinui să-l citească, iar asta le va distruge experiența.
Litere mari cu spațierea literelor
Titluri cu spațiere între litere
Dacă utilizați fonturi bine concepute, puteți fi sigur că sunt bine calibrate și nu va trebui să le faceți ajustări majore. Cu toate acestea, problema cu titlurile este că la scări mai mari spațiul dintre litere pare dezechilibrat. Poate fi remediat prin creșterea sau scăderea valorii spațierii dintre litere.
Nu există reguli stricte pentru spațierea literelor – există o mulțime de fonturi și toate necesită o abordare individuală – dar dacă te uiți la modul în care companiile mari precum Google și Apple își tratează fonturile, poți găsi acolo o mulțime de informații valoroase. .
Să aruncăm o privire la fonturile „Roboto” și „San Francisco” (prima este folosită în Material Design și a doua în ecosistemul Apple). Titlurile de la 20 la 48 de pixeli au fie o valoare pozitivă a spațierii dintre litere, fie nici una. Dacă dimensiunea fontului este mai mare, spația dintre litere devine negativă. Aceste numere exacte nu vor funcționa atât de bine pentru alte fonturi, dar după ce am încercat abordări diferite, pot afirma că este un model comun.
Am testat mai multe linii directoare pentru spațierea literelor, iar cea care a fost publicată de Agenția AllmaDesign funcționează pentru o mulțime de fonturi populare. Va fi un bun punct de plecare pentru dvs., dar puteți aplica oricând ajustări suplimentare:
- S1 — 96px — -1,5%
- H2 — 60px — -0,5%
- H3 — 48px — 0%
- H4 — 34px — 0,25%
- H5 — 24px — 0%
- H6 — 20px — 0,15%
- Subtitrare — 16px — 0,15%
Dacă se întâmplă să creați o mulțime de aplicații sau plănuiți să faceți asta, un lucru care mă ajută este să folosesc liniile directoare implicite Material Design și Apple pentru fonturile lor. Sunt bine echilibrate și economisesc mult timp.
Textul corpului cu spațierea literelor
Dacă ați citit vreodată ceva despre spațierea literelor, probabil că ați văzut această înțelepciune populară a tipografului Frederic Goudy: „Oricine ar face spațierea literelor cu minuscule ar fura oile”. (Există un argument că el se referea doar la fonturile cu litere negre.) Unii designeri au considerat-o ca o regulă grea și acum nu ajustează niciodată spațierea dintre litere a textului cu litere mici.
Pe baza practicii mele și privind munca designerilor, nu pot fi de acord cu Goudy, deoarece uneori mici modificări pot face o mare diferență în ceea ce privește performanța textului tău. Să luăm, de exemplu, fonturile condensate. La o dimensiune mică, literele sunt prea aproape unele de altele, ceea ce duce la o lizibilitate slabă. Mărind spațierea dintre litere cu 1,5%, veți vedea că textul este acum mai ușor de citit.
Dacă ne uităm la exemplul meu anterior, în liniile directoare pentru fonturile „Roboto” și „San Francisco”, spațierea dintre litere este aplicată textului; chiar dacă San Francisco are un „SF Pro Display” dedicat pentru titluri și „SF Pro Text” pentru corpul textului, spațierea dintre litere este încă folosită pentru a le rafina.
Există o mulțime de fonturi diferite și o singură regulă nu se aplică tuturor. Experimentați cu spațierea dintre litere și faceți ceea ce vi se pare corect. Există câteva linii directoare simple care vă vor conduce în direcția corectă, mai ales când lucrați cu textul corpului:
REȚINEȚI LINIA-ÎNĂLȚIME
Dacă aveți o înălțime de rând mai mare de 120%, cel mai probabil spațierea dintre litere negative va duce la un aspect dezechilibrat al paragrafului. Pentru a o rafina, ar trebui fie să o mențineți la 0%, fie să o creșteți doar puțin.
TEXT DESCHIS PE FUNDAL ÎNTUNECAT
Pe un fundal întunecat, textul alb pare supraexpus și, prin urmare, literele par prea strânse. Pentru a o face mai lizibilă, aș sugera să măriți puțin spațierea dintre litere.
VALORI GENERALE PENTRU TEXTUL CORPULUI
Puteți folosi următoarele instrucțiuni pentru textul corpului, pe care le-am testat cu mai multe tipuri de caractere:
- Corp 1 — 16px — 0,5%
- Corp 2 — 14px — 0,25%
Subtitrări cu spațiere între litere
Spre deosebire de titluri și textul corpului, dimensiunile mai mici ale fonturilor nu au multe variații în spațierea dintre litere. Este o practică obișnuită când dimensiunea unui font este mai mică de 13 px pentru a mări spațiul dintre litere pentru a-l face lizibil. Dar există întotdeauna excepții („Orientările SF Pro Text” sugerează utilizarea spațierii pozitive între litere numai atunci când dimensiunea fontului este de 11 px sau mai mică). Asigurați-vă că experimentați cu setările.
Puteți utiliza următoarele valori ca punct de plecare și apoi le puteți edita la ceea ce vi se pare potrivit tipului de liter dorit:
- Subtitrare — 12px — 0,5%
- Overline — 10px — 1,5%
Sfat final
Unul dintre lucrurile care m-a ajutat să-mi îmbunătățesc abilitățile în tipografie a fost să mă uit la alți designeri și în special la turnătorii de tipografii. Prin decodarea muncii lor, s-ar putea să observați câteva nuanțe ale modului în care tratează tipografia și vă va ajuta în proiectele viitoare.
Literele mari sunt concepute cu intenția ca ele să apară la începutul unei propoziții sau al unui nume propriu, în combinație cu litere mici. Când majusculele sunt una lângă cealaltă, spațiul dintre ele este prea mic. Deci, pentru a obține o mai bună lizibilitate, spațiul trebuie mărit. Acest lucru este valabil atât pentru fonturile mari, cât și pentru cele mici.
AllmaDesign vă oferă servicii profesionale de web design la prețuri avantajoase, creare site-uri prezentare pentru companii mici și mijlocii, creare magazine online și cataloage de produse, precum și alte servicii conexe: întreținere și administrare site-uri web, optimizare SEO și promovare online, design grafic și identitate companie, găzduire web și înregistrare nume de domenii.
