Crearea, urmărirea și conducerea: un ghid simplu pentru tipografierea eficientă

Când proiectați pentru web, trebuie să țineți cont de un lucru în orice moment: lizibilitatea. Nu contează cât de grozav este designul, cât de superb este aspectul dvs. sau cât de genial este utilizarea culorii. Dacă oamenii nu pot citi cuvintele de pe ecran (și asta presupunând că există cuvinte pe ecran, desigur), site-ul web nu își poate îndeplini funcția. Trei dintre cele mai importante elemente de lizibilitate pentru text sunt creșterea, urmărirea și conducerea, deși mulți oameni fie îi confundă, fie pur și simplu nu înțeleg cum să le folosească în mod eficient. Intenționăm să remediem asta astăzi.

Crearea, urmărirea și conducerea

Dacă le reduceți la cele trei elemente fundamentale absolute, vă uitați la spațiul dintre caractere atât pe axele X, cât și pe Y. Scufundând, veți vedea că există mai mult decât atât, dar, în esență, vă uitați la relația dintre caracterele text. Este important să înțelegeți relația dintre aceste trei atribute, deoarece designul bun și lizibilitatea depind de utilizarea acestora în măsura în care vă puteți abona.

Și asta vine cu timpul și practica. Dar, odată ce ați început să le acordați atenție, veți observa modul în care kerning-ul, urmărirea și conducerea sunt utilizate atât în ​​mod eficient, cât și slab în tot ceea ce citiți și vedeți zilnic. Hai să săpăm.

Ajustarea Kerning, Leading și Tracking (și multe altele!)

De fapt, înainte de a căuta, să trecem în revistă modul în care modificați și ajustați aceste setări. În timp ce majoritatea programelor de procesare a textelor au opțiuni pentru ajustarea lor, majoritatea oamenilor nu vor avea nevoie niciodată atunci când scriu o copie sau un text tipic. Atunci când proiectați text, acesta devine mai mult o problemă, astfel încât programele precum Photoshop, Illustrator etc. vor avea opțiunile de care aveți cel mai mult nevoie.

În produsele Adobe, trebuie doar să deschideți Text Layer Character Panel și aveți tot ce aveți nevoie. V / A creează, VA într-o cutie urmărește, iar A-urile subliniate, verticale, conduc. Puteți regla, de asemenea, tăierea, greutatea, dimensiunea, super / subscript și multe altele în acest panou. Merită să te obișnuiești să păstrezi acest lucru deschis.

Plasați doar cursorul acolo unde trebuie să reglați spațiul și să mergeți.

Ce este Kerning?

Să începem cu kerning . Kerning este cel mai simplu dintre cele trei, într-adevăr. Este spațiul dintre două personaje alăturate. Într-un cuvânt, puteți avea un kerning variabil, deoarece spațiul dintre primele două litere poate fi diferit decât între ultimele două (și așa mai departe).

În fonturile monospațiate, fiecare caracter ocupă exact aceeași cantitate de spațiu orizontal, fără suprapunere. A are aceeași lățime ca B și J ca K. Reglarea kerningului dintre aceste litere tinde să fie mai ușoară decât fonturile spațiate variabile, unde literele s-ar putea suprapune, precum și să se tipărească la lățimi diferite.

În exemplul de mai sus, avem trei rânduri care au fost copiate și lipite folosind fontul monospațial Courier New . Kernarea rândului superior este setată la 0, care este valoarea implicită și folosește orice spațiu a ales designerul de fonturi. Al doilea rând este setat în mod egal între litere (și spații) la 200. După cum puteți vedea, spațiile sunt uniforme între caractere de-a lungul liniei. În cele din urmă, a treia linie a fost creată la întâmplare, atât la distanța pozitivă, cât și la cea negativă în cadrul fiecărui cuvânt individual. După cum puteți vedea, fiecare personaj poate avea un nucleu diferit pe fiecare parte.

Ce este urmărirea?

Urmărirea este similară cu kerning-ul, dar nu este kerning. În cazul în care generarea este spațiul dintre două caractere individuale, urmărirea este spațiul uniform între fiecare cuvânt sau linie individuală. În loc să vă faceți griji cu privire la modul în care lucrurile sunt asamblate pe bază de literă cu literă, ca și în cazul kerning-ului, vă asigurați că întreaga linie este uniform distanțată. Privind înapoi la imaginea de exemplu anterioară, a doua linie ar fi putut fi realizată într-un mod mult mai ușor.

Ceea ce am făcut pentru kerning a fost să plasez cursorul între fiecare caracter individual și să mă ajustez la 200. Am urmărit în esență întreaga linie. Care este ceea ce ar trebui să faci. Evidențiați pur și simplu ceea ce aveți nevoie pentru a-l urmări și reglați în Panoul de caractere.

Rețineți totuși că unele fonturi și scripturi pot deveni ilizibile pe măsură ce urmărirea este ajustată.

Fonturile de scriere de mână și tipurile de caractere cursive sunt setate cu kerning specific și, dacă ajustați urmărirea, veți obține goluri într-o linie altfel neîntreruptă. Sau mergând în cealaltă direcție pentru a comprima liniile, puteți face pur și simplu scriptul ilizibil.

Ce este Leading?

Cu Leading, nu mai aveți de-a face cu spațiere între caractere. Conducerea este spațiul dintre linii.

Utilizarea eficientă a conducerii vă permite să utilizați în mod eficient spațiul alb în proiectele dvs. Liniile înghesuite - chiar și cu kerning / urmărire corectă și bine realizată - pot face o experiență mizerabilă pentru cititori.

În unele locuri, este posibil să vedeți înălțimea liniei de apel numită, dar sunt aproximativ același lucru. O regulă bună este să vă asigurați că lăsați cel puțin puțin spațiu deasupra și sub personajele dvs. După cum puteți vedea în exemplul de sus, un font de 40 px are o înălțime a liniei de 48 px. Asta înseamnă că, indiferent de ce, va exista spațiu între litere. Dacă setați acest lucru la sau mai mic decât dimensiunea fontului, veți obține suprapunerea caracterelor.

În plus, aceasta este înălțimea liniei pe care stau personajele. Aceasta nu este înălțimea personajului . La fel cum creșterea și urmărirea nu fac personajele mai grase sau mai subțiri, urmărirea nu le face mai scurte sau mai înalte. Este pur și simplu spațiul din jurul lor.

După cum puteți vedea, cu toate acestea, opțiunile de sub kerning / tracking din panoul de caractere Photoshop ajustează lățimea / înălțimea caracterelor independent de kerning, urmărire și conducere.

Comenzi rapide de la tastatură Photoshop / Illustrator

Singura cădere a panoului de caractere este că devine destul de enervant atunci când aveți nevoie de ajustări fine. Din fericire, există comenzi rapide de la tastatură care fac să creeze, să urmărească și să conducă la o briză absolută.

Aceste comenzi rapide sunt pentru suita Adobe Creative Cloud, deci ar putea fi diferite în Gimp sau Paint.NET sau în alt program.

• Kerning - Cu cursorul între două caractere, țineți apăsat ALT (sau Option pe Mac) și utilizați săgețile stânga / dreapta pentru a regla kerningul
• Urmărire - Cu cuvântul / linia evidențiat, țineți apăsat ALT (sau Opțiune pe Mac) și utilizați săgețile dreapta / stânga pentru a regla urmărirea textului evidențiat
• Leading - Evidențiați liniile pe care doriți să le reglați, țineți apăsat ALT (sau Option pe Mac) și utilizați săgețile sus / jos pentru a regla spațiul dintre linii

Deși puteți plasa cursorul sau evidenția textul și introduceți valorile în panoul de caractere, comenzile rapide de la tastatură fac întregul proces mult mai puțin obositor și consumator de timp. În plus, veți obține un control mai granular, astfel încât să puteți face și designuri mai bune în acest fel.

(Deoparte, dacă nu utilizați în mod regulat comenzile rapide de la tastatură Photoshop / Illustrator / Premier etc., vă recomandăm să învățați, deoarece vă face fluxul de lucru mult mai lin, mai plăcut și mai productiv.)

Încheierea

Crearea, urmărirea și conducerea sunt elementele fundamentale ale textului lizibil în designul web (și designul în general). Învățarea diferenței și modul de utilizare eficientă a fiecăruia dintre ei vă va face un designer mult mai bun. Poate părea puțin ciudat faptul că ceva la fel de simplu precum spațiul dintre litere și linii ar putea avea un impact atât de mare, dar odată ce te-ai ocupat de el chiar și pentru puțin timp, nu te vei uita niciodată la site-uri web, reclame, sigle sau panouri publicitare din nou la fel.

Care sunt sfaturile și trucurile dvs. pentru a obține urmărirea perfectă, creșterea sau conducerea într-un design?

Imagine prezentată de articol de către BarsRsind / shutterstock.com