10 reguli de tipografie web pe care fiecare designer ar trebui să le cunoască

Puteți încorpora multe elemente în designul dvs. web care vor crea implicare și vor păstra atenția vizitatorilor. Acestea includ imagini, videoclipuri și chiar sunet. Cu toate acestea, cea mai importantă parte a aproape fiecărui site web este conținutul pe care vizitatorii îl citesc pentru a obține informațiile pe care le citesc.

Dacă doriți să faceți aceste informații mai ușor de citit, interesante din punct de vedere vizual și pentru ca acel text să se adauge la designul general al unui site web, trebuie să înțelegeți tipografia. Aceasta este arta și priceperea de a face cuvântul scris atât funcțional, cât și plăcut din punct de vedere estetic.

Dacă vrei să înveți să folosești tipografia în avantajul tău, consultă aceste 10 reguli pe care fiecare designer ar trebui să le țină cont.

1. Nu mai utilizați LoremIpsum după procesul inițial de proiectare

Dacă conținutul este rege, de ce nu i se acordă o atenție serioasă în procesul de design web? Folosind conținut fals ca substituent, designerii web relegă conținutul într-un rol secundar. Acesta este un mare indiciu că prioritățile de proiectare sunt toate nepotrivite. Nu este atât de problematic în stadiile incipiente, de exemplu, când faceți joc de o varietate de aspecte de pagină. Cu toate acestea, odată ce ați restrâns lucrurile, este important să lucrați cu conținut web real atunci când creați designul final. Acest lucru asigură că ceea ce se spune pe o anumită pagină web primește la fel de multă importanță ca aspectul și elementele vizuale.

În plus, a avea text real contează în ceea ce privește designul și aspectul. Nu vrei să fii în situația de a fi proiectat complet o pagină web, doar să înveți că nu funcționează cu conținutul real. Acesta este motivul pentru care este extrem de important să obțineți textul real de la clientul dvs. al scriitorului de conținut cât mai curând posibil.

2. Faceți text Sans Serif

Textul serif este absolut frumos. Acestea sunt fonturi grozave de utilizat pentru imprimare și pentru aplicații de tipărire mai mari, cum ar fi titluri, titluri și subtitluri. Din păcate, pe ecran, serif-urile nu se scalează bine atunci când vine vorba de afișări mai mici de conținut, cum ar fi blocurile de text. Serifurile care arată frumos la o dimensiune mai mare fac textul dificil de citit atunci când fontul devine mai mic. Din acest motiv, este recomandabil să salvați serif-uri pentru text mare și să vă bazați pe sans atunci când lizibilitatea ar putea fi o problemă. Mai bine, îmbrățișați aspectul curat, elegant și modern al fonturilor sans și salvați serif-uri pentru presa de tipar. În acest fel, nu va trebui niciodată să vă confruntați cu degradarea lizibilității în favoarea utilizării unui font care arată frumos.

3. Gândiți-vă la citatele inteligente și la alte simboluri la începutul procesului de proiectare

Este posibil să fi vizitat un site web unde anumite simboluri nu s-ar afișa corect. Uneori, acestea sunt înlocuite cu o întrebare sau un șir de caractere cu aspect ciudat. Alteori, pur și simplu nu sunt acolo. Acest lucru se întâmplă frecvent cu ghilimele inteligente sau „creț”. Acesta este adesea rezultatul creării de text în MS Word sau alt pachet și apoi portat pe o pagină web. Lucrurile pur și simplu nu se traduc așa cum se dorește. Este, de asemenea, comun pentru simbolul euro, caracterele dublu octet și alte simboluri preluate din conținut străin.

Pentru a evita această problemă în designul final, aveți câteva opțiuni. În primul rând, vă puteți modifica conținutul pentru a scăpa de aceste simboluri. Acest lucru funcționează dacă sunteți dispus să schimbați simbolurile în limbaj natural. De asemenea, puteți utiliza HTML pentru a vă asigura că simbolurile sunt afișate corect, mai degrabă decât să vă bazați doar pe copiere și lipire. Indiferent ce decideți, asigurați-vă că testați pagina web în fiecare browser pe care îl puteți. Ceea ce ar putea rezolva o problemă cu simbolurile dintr-un browser ar putea să nu fie deloc eficient în altul.

4. Abilitățile CSS avansate sunt extrem de importante

Dacă ați dezvoltat bune abilități CSS, vizitatorii dvs. ar trebui să poată naviga prin paginile site-ului dvs. într-un mod absolut fără probleme. Dacă vă creați corect foile de stil, puteți chiar să aveți mai multe versiuni ale aceleiași pagini, păstrând totuși o mare continuitate atunci când vine vorba de tipografie. Desigur, nu trebuie să folosiți multe șmecherii. Un CSS bun vă poate ajuta să evitați problemele mici și obișnuite, cum ar fi modificarea fonturilor și mărimea fontului de la o pagină la alta.

De ce este o astfel de necesitate tipografia consistentă? Utilizarea CSS pentru a menține o tipografie consistentă oferă site-ului dvs. un aspect profesional și clar. De asemenea, înseamnă că nu trebuie să vă gândiți la tipografie în timp ce proiectați fiecare pagină. În schimb, utilizați doar foaia de stil corespunzătoare. Dacă decideți, pe o anumită pagină, că veți încălca norma și veți face ceva diferit cu tipografia pentru a crea un efect sau pentru a atrage atenția asupra ceva, aceasta va ieși mai mult în evidență datorită folosirii CSS-ului.

5. Atât tipografia micro cât și macro sunt importante

Micro-tipografia se referă la detaliile tipografiei care sunt legate de lizibilitate. De exemplu, spațierea este o preocupare legată de micro-tipografie, la fel ca scalarea și contrastul. Ajustările pe care le faceți pentru a vă asigura că un bloc de text este citit pe orice dispozitiv sau browser sunt toate legate de micro-tipografie.

Macro-tipografia se referă la modul în care alegerile tale în ceea ce privește tipografia se leagă de designul tău general. Are legătură cu estetica.

O tipografie bună ia în considerare atât micro- și macro-tipografia. Ați vizitat vreodată un site web care folosea un font personalizat cu aspect foarte frumos, care era, de asemenea, aproape imposibil de citit? Așa se întâmplă când se acordă atenție macrotipografiei, dar nu microtipografiei.

6. Cunoașteți Conținutul, precum și Designul

După cum știți, un site bun are flux. O parte din aceasta este lizibilitatea conținutului care se află pe pagină. Am discutat deja despre felul în care acest lucru este afectat de lucruri precum serif-urile și am discutat despre modul în care textul fals nu înlocuiește lucrul real atunci când vine vorba de fazele ulterioare de proiectare. Încă nu am terminat. Conținutul este într-adevăr rege. Odată ce designul final, inclusiv conținutul, este pus la punct, trebuie să citiți pagina web.

Când citiți conținutul după ce designul dvs. este terminat, puteți determina dacă există sau nu probleme de spațiere sau întrerupere de linie. Acestea pot face conținutul confuz sau chiar pot schimba în mod neintenționat sensul conținutului. Remedierea acestor probleme folosind câteva trucuri tipografice vă poate asigura că produsul dvs. final comunică exact ceea ce intenționați dvs. sau clientul dvs.

7. Înțelegeți importanța ierarhiei

Ierarhia este harta de parcurs pe care o oferiți persoanelor care vă vizitează site-ul web. Puteți folosi imagini, videoclipuri, culori și (desigur) tipografie pentru a crea acea ierarhie.

Este pur și simplu o chestiune de a ghida vizitatorul de la primul lucru pe care vrei să-l vadă până la următorul și așa mai departe. Cu tipografia, puteți utiliza dimensiunea, modificările fontului și spațierea pentru a ajuta la definirea ierarhiei pe care doriți să o urmeze utilizatorii. De fapt, dacă aveți o pagină care nu face conversie, poate doriți să vă jucați cu tipografia pentru a vedea dacă modificările pe care le faceți vă vor ajuta să ghidați vizitatorii către butonul de îndemn.

8. Fii creativ, dar precaut cu culoarea

Cel mai simplu mod de a vă asigura că nu aveți niciodată probleme de lizibilitate din cauza problemelor cu culoarea fontului și culoarea de fundal este să utilizați cele mai contrastante culori existente, alb-negru. Din păcate, asta poate face un design destul de plictisitor.

Nu vă fie teamă să folosiți culori. De fapt, nu vă fie teamă să folosiți combinații de culori care nu par să funcționeze. Uneori, pur și simplu să faci cu una sau două nuanțe mai deschise sau mai închise este tot ceea ce trebuie să faci. Apoi, tipografia ta trece de la necitit la perfect perceptibilă și cu un aspect foarte cool.

9. Ditch Centered Text

Problemele cu textul centrat sunt numeroase. În primul rând, poate face ca paginile dvs. web să semene cu pliante prost proiectate. În plus, aproape întotdeauna ajungeți cu margini ciudate și text care pare să fie o poezie sau note de linie dintr-un vechi album rock. Deși poate fi în regulă să folosești text centrat pentru titluri, de obicei, cel mai bine este să îl eviți cu totul. Rămâi cu textul ajustat la stânga, iar cititorii tăi vor găsi conținutul tău mult mai ușor de citit.

10. Luați în considerare cum arată textul dvs. mărit

Indiferent dacă își folosesc degetul mare și arătător sau dau clic pe butonul de zoom, oamenii vă vor mări textul. Uneori, fac acest lucru pentru a compensa un ecran mai mic. Alteori, pur și simplu o fac pentru că este o luptă pentru ei să vă citească textul la dimensiunea normală.

Ar fi grozav dacă toată lumea ar putea să vă vadă textul așa cum este intenționat, dar cu boomerii care au adesea nevoie de ajutor suplimentar pentru a vedea textul, pur și simplu nu este posibil. Aveți grijă să nu folosiți un tip de literă care se degradează dacă este mărit.

Instrumente și resurse utile

Iată câteva instrumente și resurse utile pentru a vă ajuta să faceți mai mult cu tipografia:

• FontFace Ninja : Acest utilitar vă ajută să identificați fonturile pe care le găsiți pe internet. Acesta este un instrument grozav pe care trebuie să îl aveți atunci când treceți peste un font care vă atrage cu adevărat atenția. Acest plugin Chrome vă va ajuta să identificați, să găsiți și să cumpărați orice font disponibil comercial pe care îl vedeți pe orice site web.
• TypePlate : Acesta este un cadru de tipografie complet care este perfect pentru designerii web. TypePlate poate face față limitelor, ghilimele de bloc, scalarea, culorile și o varietate de alte provocări legate de tipografie.
• Scala modulară : Aceasta este o scară care vă permite să determinați fontul și dimensiunea fontului ideal. De asemenea, vă ajută să creați un echilibru între dimensiunea fontului titlurilor și titlurilor dvs. și fontul pe care îl selectați pentru text.
• TIFF : Acest instrument vă permite să afișați două fonturi diferite. Apoi, afișează diferențele dintre fiecare dintre cele două fonturi pentru tine. Vă permite chiar să comparați diferite litere și numere de la un font la altul.
• TypeWolf : Folosiți acest site web pentru a obține corectarea unora dintre cele mai tari fonturi și cea mai inspirată utilizare a tipografiei de pe internet. Aceasta este o sursă excelentă de inspirație, precum și de informații.
• De ce contează fonturile, Sarah Hyndman : Aceasta este o carte excelentă care explorează importanța fonturilor și modurile în care tipografia poate influența starea de spirit. Este o carte grozavă pentru cei pasionați de tipografie, dar și pentru cei care ar putea avea nevoie de convingerea despre importanța alegerii tipului potrivit de job.

Concluzie

Sperăm că acest articol îi influențează pe designerii web să se gândească mai mult la tipografie și, de asemenea, să găsească modalități de a folosi textul mai eficient și mai creativ în design-urile lor.