Share
Tipografia este un câmp uriaș. Oamenii își dedică ani vieții acestei ambarcațiuni antice și totuși există întotdeauna ceva nou de învățat. În acest articol, voi examina principalele puncte pe care ar trebui să le luați în considerare atunci când selectați un tip de text pentru un site web.
Tutorial publicatLa fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima oară în octombrie 2010.
Când proiectați pentru web, trebuie să acceptați că conținutul se va schimba. Este pur și simplu în afara de întrebare să ia timp pentru a kern (ajustați spațiul dintre scrisori individuale) fiecare titlu pe un site imens. Cu alte cuvinte, renunți la un control.
Ceea ce mă voi concentra astăzi este astăzi tipografie practică. Pentru mine, aceasta înseamnă a accepta că nu veți avea niciodată un control total asupra tipului de pe site-urile dvs. web. Alegerea unei caractere, care să decidă asupra unei dimensiuni, toate acestea sunt lucrurile pe care noi, ca designeri, le-am spus. Tipografia practică înseamnă a învăța cum, și mai important de ce, pentru a ajusta ceea ce aveți control. Să începem.
Ce faci cu tipul? Citește! Deci, de ce atât de multe site-uri web fac atât de greu să facă exact asta? Fie că este vorba de dimensiuni de dimensiuni mici, de linii înălțate sau de fonturi simple, se pare că o mulțime de site-uri aflate acolo sunt hotărâte să nu vă lase să vă bucurați de conținutul lor!
Prin a face tipul dvs. de citit, sari imediat înainte de cel puțin jumătate din concurs, care este norocos, într-adevăr, pentru că nu este așa de greu!
Atunci când decideți ce tip de text să utilizați pe site-ul dvs., este important să vă amintiți: nu gândiți prea mult. Știu că mulți designeri urăsc folosirea lui Helvetica, pentru că este extrem de folosit. Sunt de acord cu acest lucru, dar există o informație foarte importantă pe care această declarație o lasă: de ce. Oamenii suprasolicite Helvetica pentru că este just atât de bine. Se potrivește chiar cu aproape orice design imaginabil, funcționează bine în dimensiuni mici, precum și uriașe.
În timp ce s-ar putea să vă împotriviți convingerilor dvs. de a vă stabili tipul într-o față atât de abuzată, dacă funcționează, atunci mergeți la el.
Copie de corp este, fără îndoială, o parte din designul dvs. care trebuie să fie cel mai ușor de citit, deci asigurați-vă că alegeți un font care să funcționeze bine în dimensiuni mici. Ce vreau sa spun prin asta? Dacă vă puteți seta copia la 10px și puteți totuși să înțelegeți ce spune, atunci este o indicație bună că ați ales o formă de scriere lizibilă.
Aceasta se referă la o copie a corpului, dar la titluri?
Capacitatea de citire a titlurilor mari este mult mai ușor de înțeles decât în cazul copiei corporale. Dacă puteți afla ce spune imediat, atunci este suficient de citit.
Ce este bine despre tipografiile este că, odată ce ați lucrat la proiectele suficiente, veți avea o idee bună despre ce funcționează și ce nu. De acolo, veți fi într-o poziție mai bună de a face alegeri critice cu privire la fonturi.
Nu există nicio formulă pentru alegerea fonturilor potrivite pentru site-ul dvs. web. Adesea, cel mai bun mod de a decide cu privire la unul este de a încerca doar fiecare font crezi că ar putea funcționa și apoi compara. Alegerea fonturilor este într-adevăr instinct, dar este important să rețineți că 90% din timp, un utilizator nu se va gândi la ce font este folosit, deci dacă este lizibil, atunci adesea este destul de bun.
Există rareori (dacă vreodată) o situație în care doar unul este potrivit pentru a fi utilizat pe un site. Site-ul mediu are o mulțime de text. Nu există nici un fel de text care să funcționeze pentru toți! Marea majoritate a site-urilor bine concepute utilizează două tipuri de fonturi: una pentru copie corporală și una pentru titluri.
Atunci când alegeți o pereche de fonturi, cel mai important lucru de luat în considerare este modul în care acestea lucrează împreună. "Sunt destul de asemănătoare?" "Prea asemănătoare?" "Nu este suficient de diferit?" Toate acestea sunt întrebări pe care ar trebui să le întrebați. Consider că cel mai bun mod de a alege o pereche de fonturi care funcționează este de a pune foarte multe dintre ele alături și de a decide cele mai bune. Nu există nici o modalitate de a ști care este cea mai bună până când le-ați încercat pe toate.
Uneori, cel mai potrivit lucru ar fi două sans serif-uri, în timp ce alteori doriți un sans pentru titluri și o serif pentru copie corporală. Nu contează în mod special dacă arată asemănător, ceea ce contează dacă este vorba acționează similar. Aceasta desigur depinde de restul designului. Indiferent de fonturile pe care le alegeți, trebuie să transmită mesajul tău puternic și dacă asta înseamnă că ai fonturi contrastante, atunci du-te pentru el.
Simon Collison folosește perechea de fonturi excelent pe site-ul său, alegând un sans serif puternic pentru titlurile principale și o Serif simplă pentru celelalte titluri mai mici, precum și copie. Acest parteneriat afișează cu desăvârșire mesajul pe care site-ul încearcă să-l spună, într-un mod care nu poate fi exprimat în mod individual de fiecare font.
Ca regulă generală, designerii preferă să-și stabilească copia corpului cel puțin la 12px. Cele mai multe, însă, au ales o dimensiune mai mare ca 14px, care este chiar mai bună pentru citire. Dimensiunea fontului este într-adevăr destul de ușor de stabilit pentru copia corporală, dar titlurile încep să se complică.
Cât de mari ar trebui să fie titlurile dvs.? Depinde. În observația și crearea site-urilor web, am ajuns la concluzia că un titlu ar trebui să fie la fel de mare ca și cum ar trebui să fie. Acest lucru înseamnă că ar trebui să încercați diferite dimensiuni până când veți găsi unul care este suficient de mare pentru a atrage atenția pe care o doriți, dar nu mai mare, cu excepția cazului în care textul uriaș este ceea ce aveți de gând, caz în care mergeți înainte.
Natura unui titlu este mare. Este un element important pe pagină, așa că ar trebui să fie mai mare, nu? Da și nu. Da, titlurile sunt în general mai mari decât alte elemente, dar nu, nu este singura modalitate de a atrage atenția asupra lor. Culoarea, greutatea și plasarea sunt la fel de importante pentru stabilirea unei clarități ierarhie vizuală la paginile dvs..
Punctul cheie pe care trebuie să-l amintim despre ierarhia vizuală este că totul este relativ. Textul de pe site-ul dvs. trebuie doar să iasă în evidență în comparație cu celălalt text de pe site-ul dvs. Luați site-ul Wilson Miner, de exemplu. Titlurile sale sunt destul de mici pentru cât de importante sunt și sunt surprinzător de aproape de dimensiune. Cu toate acestea, utilizarea sa de culoare distinge cel mai important titlu, și le oferă mai mult sens.
Utilizarea tipului este un instrument foarte important pentru stabilirea ierarhiei vizuale, fie prin dimensiune, culoare, greutate, fie prin plasare.
Conducerea, sau spațiul dintre rânduri de text, este un instrument inestimabil pentru textul lizibil. Conducerea necorespunzătoare poate distruge o piesă de copiat altfel stelară, iar o bună conducere poate face chiar și cel mai rău tip de aspect ușor de citit. Din fericire, nu este atât de complicat de implementat.
Utilizarea CSS inaltimea liniei proprietate, puteți aloca cu ușurință spațiu între liniile dvs. de copiere. În general vorbind, pentru blocuri mari de text, dimensiunea de 1,5 ori a textului este de o mărime bună. Textul mai mic ar trebui să aibă un rol mai strâns, iar textul imens ar trebui să aibă multe. Nu este așa de complicat, într-adevăr.
Urmărirea este spațiul dintre caractere în text. Recunosc, aceasta este o zonă de culoare gri când vine vorba de "Tipografia practică", în care CSS nu ne dă un control imens asupra ei. De obicei, nu va trebui să vă faceți griji pentru textul mic, doar pentru titluri devine o problemă. În general, adăugând spațierea literelor: 1px; sau spațierea literelor: 2 pixeli; la CSS trebuie să existe suficient spațiu între litere.
Un alt loc în care ar fi bine să adăugați urmărirea este capacele mici. Aici este, în general, considerată o bună practică adăugarea unui pixel în plus între două caractere, deoarece în mod natural apar mai mari.
Deși nu tipografia strict vorbită, culoarea este o parte foarte importantă a fiecărui tip de site. Nu vorbesc culori, ci mai degrabă despre contrastul necesar pentru a asigura lizibilitatea pe site-ul dvs. Textul neagră pe fundal alb (sau fundal luminos) este considerat a fi cea mai lizibilă culoare pentru text.
Nu spun că ar trebui să mergeți și să setați totul la negru pe alb, doar că atunci când proiectați, ar trebui să știți de contrastul textului. Ar putea reveni să te muste dacă nu ești atent.
În opinia mea, utilizarea rețelei este cea mai importantă idee pentru tipografia practică pe web. Aveți posibilitatea să aveți fonturi excelente, distanțe și culori, dar dacă nu aveți un aspect bun, puteți folosi și benzi desenate.
Folosirea unei grile atunci când proiectați cu un tip oferă un echilibru clar și o structură geometrică pentru designul dumneavoastră. Nu este soluția magică la un design rău, dar dacă proiectați cu o grilă de la început, puteți fi siguri că, cel puțin, aspectul dvs. va fi solid.
Deci ce înseamnă o rețea cu tipografia? Pune simplu: Tot. Grila intruchipează toate idealurile fundamentale ale tipografiei. Este geometric, consistent, utilizabil și mai presus de toate: frumos.
Setarea textului cu o rețea este o modalitate esențială de a stabili ierarhia vizuală și este un indicator excelent pentru cât de mare (sau mică) ar trebui să fie textul.
După cum am spus mai înainte, dacă tipografia este lizibilă, atunci sunteți deja în fața a 50% din competiție, deci ce se întâmplă cu cealaltă jumătate? Dacă ați făcut acest lucru atât de departe, atunci împreună lăsăm regulile clare și coerente de citire și intrăm în lumea tulbure și misterioasă de a fi unice.
Doriți ca site-ul dvs. să iasă în evidență? Pasul 1. Utilizați o anumită tipografie unică. Probabil că pentru dvs. aceasta înseamnă utilizarea unor fonturi unice. Dar ce face un font unic? Pentru mine, nu este una care nu este folosită des, ci una care are un mesaj sau un sentiment care nu este folosit de alte fețe.
Alegerea unui font unic este într-adevăr despre sentiment. Are acest font simți diferit? Sau arata diferit? Atunci când alegeți fonturi pentru orice proiecte, trebuie să luați în considerare întotdeauna sentimentul designului. Deoarece aceasta este o opinie personală personală, nu vă pot ajuta să găsiți un text unic. Ce pot face este să prezint un exemplu de fonturi unice.
Design Cubicle are un logo și un design foarte unic. Este puternic, dar elegant, cu o atenție deosebită, dar subtilă. Când mă uit la design-ul său, sentimentul de clasă ozește din site. Se spune: "Știu ce fac."
Câte site-uri știți de la care logo-ul este la fel de mare ca și conținutul? Dar un titlu ultra-subțire? Spre deosebire de ultimul meu punct, a fi neortodox este despre a vedea ce fac alții și apoi a face contrariul.
Oamenii de la Savvy Belfast sunt inteligenți. Ei au observat aspectul îngrozit al majorității site-urilor web și au decis să înlocuiască toată copia fără sens cu o singură declarație.
Chiar dacă vizitați site-ul lor doar pentru o clipă, nu vă puteți aminti numele.
Tipografia nu este chestia proprie. Face parte din designul de web la fel ca oricare alta. Tipul este important, da, dar nu trebuie să uitați că este este doar o parte din ceea ce face un design web mare. Ar trebui să vă proiectați tipul cu restul designului dvs. în minte.
Dacă utilizați o textură de fundal extrem de elaborată, poate că o serifă bună ar fi bună pentru titlurile dvs..
Ideea mea aici este simplă: Nu uitați context. Designul este un câmp uriaș, iar astăzi vorbesc doar despre o parte din el. Pentru un design de site-uri de succes, toate piesele trebuie să reunească împreună succes. Acesta este scopul: a realiza experiența pe care cineva o va avea pe site-ul dvs. web. Nu poți să faci asta cu doar tip, sau doar culoarea, sau chiar doar conținut!
Atât de multă experiență este definită de modul în care te simți: fericit, trist, amuzat, supărat, bla bla bla. Oamenii au o gamă largă de emoții, iar ca designeri, este treaba noastră să evocăm aceste emoții cu desenele noastre.
Din toate lucrurile despre care am vorbit astăzi, aceasta este de departe cea mai abstractă și este puțin greu de explicat. În loc să încerc să vă explic acest lucru, permiteți-mi să vă arăt.
Când am vizitat pentru prima oară pe Solid Giant, am zâmbit. Am zâmbit data viitoare când am văzut-o și chiar data viitoare. Imediat am simțit o rudenie față de proiect. Acest mare, fuzzy "G" este prea prea adorabil să uiți!
Sincer, cred că e geniu.
Nu există nici o modalitate de a preda designul emoțional, este ceva ce trebuie să experimentați și apoi să vă jucați cu propriile dvs. desene sau modele.
Ați ajuns la sfârșitul postului. Sper că cel puțin ați învățat ceva, dar dacă nu, este și bine. Dacă există un gând cu care vreau să vă las după ce am citit acest lucru, este mai presus de toate: fi citit. Restul va urma.
Ce credeți că este cea mai importantă parte a tipografiei pe web? Lasă-ți părerea în comentarii!
Accentsconagua