Share
Tipografia bună poate fi o piatră de temelie a unui design web de succes. Deoarece atât de mult din designul web cuprinde text, atingerea punctului drept pentru tipografia dvs. este un factor cheie în succesul general al site-ului dvs. Subtilitățile tipografiei fine pot fi un lucru dificil pentru începători să înțeleagă? dar astăzi avem 8 sfaturi care ar trebui să vă ajute să vă îmbunătățiți design-ul general.
După cum am mai spus, o bună tipografie poate juca un rol vital în succesul unui design web. Aceasta poate ajuta la generarea unei ierarhii vizuale. Acesta poate face textul mai ușor de citit. Așa cum citat de la Steve Jobs "Introducere Stanford notele de mai jos, tipografie nu este un pic de întâmplare ale momentului deciziei, există mulți factori și valori care ar trebui să fie luate în considerare pentru a genera tipografie bine adaptate care nu numai arată bine, dar oferă avantajul funcțional de a fi mai ușor de citit și de a lua valoare departe de.
Am decis să iau o clasă de caligrafie pentru a învăța cum să [înveți caligrafia]. Am învățat despre serifurile și caracterele sans-serif, despre variația spațiului dintre diferitele combinații de litere, despre ceea ce face o mare tipografie excelentă. A fost frumos. Istoric. Artistic subtil într-un mod care știința nu poate captura. Și am găsit-o fascinantă. Nimic nu a avut nici o speranță de aplicare practică în viața mea. Dar 10 ani mai târziu, când proiectam primul computer Macintosh, totul sa întors la mine. Și am proiectat totul în Mac. A fost primul calculator cu o tipografie frumoasă. Dacă n-aș fi scăpat niciodată în acel singur curs la colegiu, Mac-ul nu ar avea niciodată fonturi multiple sau fonturi proporțional distanțate. Și din moment ce Windows a copiat Mac-ul, este posibil ca nici un computer personal să nu le aibă.
Vom clasifica fonturile și cum le vom alege într-un minut? dar vreau să vă gândiți la ce tipuri de text înseamnă pentru dvs. (sau la proiectul pe care lucrați în prezent). Sigur, puteți folosi doar pentru orice tip de text pentru a face un cuvânt - dar ce spune tipul de text despre cuvântul respectiv? Mai mult decât orice altă decizie de proiectare pe care o faceți, selecțiile de tip pe care le faceți dau caracterul și contextul site-ului dvs. Alegeți-le cu atenție și vă vor ajuta fie să comunicați cu telespectatorii, fie să le distrageți.
Ca exemplu rapid, examinați următoarele două variante ale cuvântului "might" (de mai jos). Nimic nu se schimbă semnificativ în ceea ce privește culoarea sau mărimea, dar semnificația implicită pe care ați putea-o (gra har) să schimbați dramatic schimbările dramatic pur și simplu cu textul și setarea casei.
Există mai multe clase principale de fonturi, dar numai două care sunt menționate în principal pe web (serif și sans-serif). Primul este un font care are serifi, detalii suplimentare detaliate pe marginea fiecărei litere, în timp ce acesta din urmă este sans serif (tradus fără serif, pentru aceia dintre noi care nu înțeleg limba latină).
Mai mult decât orice altă decizie de proiectare pe care o faceți, selecțiile de tip pe care le faceți dau caracterul și contextul site-ului dvs..
Ambele fonturi pot funcționa bine, fie într-o schemă a acestora în primul rând, fie ca o combinație în anumite circumstanțe. Cu toate acestea, obținerea greșită poate da designului dvs. web sentimentul și impresia complet greșită sau pur și simplu arăta prost. Luați în considerare următoarele exemple și ton adus la fiecare design de către fonturile utilizate:
Ar trebui să luați în considerare și alte aspecte, cum ar fi dacă textul dvs. este la fel de ușor de citit într-un font de serif decât este într-un font sans-serif. Textul mai mic va fi, în general, reprezentat mai bine într-un font sans-serif, atâta timp cât jucați frumos cu câțiva alți factori pe care îi voi menționa astăzi.
De asemenea, merită remarcat faptul că apariția serviciilor Google Fonts, Typekit, CSS @ font-face și a altor tehnologii de înlocuire a fonturilor a inaugurat un nou val de fonturi care ar putea să nu se încadreze în categoriile doar serif sau sans-serif. Luați în considerare următoarele exemple:
Un site care utilizează o mulțime de fonturi diferite este întâmplător ca o persoană care folosește o mulțime de voci diferite în aceeași conversație? ar putea părea o idee bună, dar șansele sunt că tocmai vei ajunge să fii ca un nebun la cineva care trece
Cunoașterea obișnuită a îndreptat designerii web să aleagă un singur font și să rămână cu el, dar poate fi mult mai interesant din punct de vedere vizual să alegeți 2 sau 3 fonturi și să le utilizați (în mod consecvent și uniform) în combinații atent create. Aceasta este în cazul în care amestecarea serif și sans-serif fonturi pot deveni cu adevărat interesante. Luați în considerare următoarele exemple și modul în care diversitatea tipului ajută la aducerea la viață a modelelor:
Rețineți că, deși există mai multe tipuri de text folosite în fiecare design, ele sunt utilizate în mod corespunzător (vezi vârful 1) și în mod consecvent în fiecare site.
Numărul de fețe diferite de fonturi poate cauza lizibilitatea și alte aspecte generale de design, deși, prin urmare, acest lucru nu înseamnă că doar pentru că puteți utiliza 100 de fonturi diferite, ar trebui. Există câteva cazuri în care multe fonturi utilizate simultan funcționează bine ca o declarație artistică, dar este, în general, o regulă bună pentru păstrarea numărului de fonturi la un nivel minim.
De ce? Un simplu răspuns este că un site care utilizează o mulțime de tipuri diferite de fonturi este ca o persoană care folosește o mulțime de voci diferite în aceeași conversație? ar putea părea o idee bună, dar șansele sunt că tocmai vei ajunge să fii ca un nebun la cineva care trece. Limitarea numărului de fonturi pe un site ajută la stabilirea unei ierarhii și a tonului, fără a fi exagerat.
Desigur, alegerea fonturilor potrivite în această selecție este, de asemenea, importantă. Anumite fonturi funcționează bine cu alte tipuri de fonturi specifice, în special cele care se află în categorii similare, cum ar fi serif / sans-serif. Este posibil ca un font de tip slab să nu se potrivească cu fontul ultra-subțire pe care l-ați pus chiar lângă. Încercați diferite combinații până când găsiți cele 2 sau 3 potrivite care funcționează pentru dvs..
Spațierea liniilor poate fi o problemă majoră pentru o schemă bună de tipografie. Distanta dintre linii este doar aceea a distantei dintre liniile textului. Îndepărtați-le mai departe și, în general, devine mult mai ușor de citit și mai ușor pentru ochi. Distanța între linii ar trebui să fie, ca regulă generală, de aproximativ 0.3m-0.5m mai mare decât dimensiunea fontului, deși poate diferi în funcție de design. Deși aceasta este o regulă de bază, recunoașteți faptul că liderii ar trebui să difere în funcție de alegerea fontului, deoarece alte fonturi pot necesita mai mult sau mai puțin.
Pentru a realiza de ce distanța generoasă generoasă este o necesitate în majoritatea modelelor, consultați graficul de mai jos pentru a obține o înțelegere de bază. La acest nivel, ambele sunt destul de citibile, dar distanțate unul este tot mai mult, deoarece fiecare cuvânt are mai mult spațiu pentru a fi distins și separat de restul.
Conceptul de ierarhie vizuală este locul în care elementele pe care doriți ca cititorul să le vadă și să le perceapă mai întâi sunt cele mai proeminente, fie că sunt făcute prin culoare, mărime, tip de font sau altceva complet diferit. Tipografia poate juca un rol în ierarhia generală a site-ului dvs., dar poate avea de fapt propriile sale. Cel mai simplu exemplu pentru a explica acest lucru este căutarea unui text pe un blog și observați cum titlul este în general cel mai mare exemplu de text.
Puteți utiliza mai mulți factori diferiți pentru a vă ajuta să vă creați ierarhia. Culoarea este un exemplu și acest lucru joacă frumos în contrast, prin care elementele pe care doriți ca utilizatorul dvs. să le citească mai întâi sunt cele mai ușoare. Dimensiunea este, probabil, cel mai mare exemplu, deși, fără îndoială, veți observa un șir masiv de 10 de text peste paragraful dvs. standard de dimensiune la 1.
Macintul utilizează tema Black Sakura de la ThemeForest. Probabil că mergeți înainte și citiți titlul înainte de a vă arunca în conținut, nu? Pentru mai multe informații despre ierarhia vizuală în designul web, a se vedea articolul lui Brandon despre acest subiect.
Măsura este de asemenea un aspect important. Măsura este lățimea textului dvs. și un factor care poate determina dacă textul dvs. este prea larg sau prea îngust. Măsura funcționează, în general, alături de spațierea liniei, pentru a face textul ușor de citit pentru utilizatorul final, prin adaptarea conținutului la domeniul pe care ochiul uman îl călătoreste confortabil în călătoria lui pe întreaga pagină.
Cu excepția cazului în care șablonul dvs. este în mod specific un design îngust sau lat, probabil că doriți să vă lipiți textul într-o lățime constantă care respectă această sumă simplă de matematică: dimensiunea textului de 30 x. Utilizați acest lucru ca linie de bază alături de padding și folosirea raportului de aur (dacă decideți să utilizați acest lucru) pentru a crea o lățime suficient de ușor de citit. Doar nu răsfoiți totul scăzând distanța dintre linii sau făcând textul prea mic.
Este un pic mai greu de definit ce este bun measue, deoarece poate diferi foarte serios între diferite modele. Textul mai extins ar putea să se potrivească mai bine unui anumit design.
Alinierea textului este de asemenea un factor important. Există în general patru tipuri pe care le-ați putea folosi: stânga, centrul, dreapta și justificate. Regula de aur pentru tipografie este aceea de ao face ușor de citit, iar tu nu ai prea mult control asupra asta dacă optezi pentru o aliniere text justificată. Textul justificat este bazic în care textul este optimizat pentru a umple întreaga lățime a elementului dvs., creând dreptunghiul perfect al textului. Asta ar putea fi bun în ziare și printuri, dar pe web, nu funcționează prea bine. O linie poate fi mult mai înghesuială decât o altă linie, dar asta nu este ceva ce poți controla în mod specific.
Sigur, ați putea să vă perfecționați tipografia la scară de 100%, dar unii utilizatori ar putea vizualiza cu fereastra browserului lor mărirea sau micșorarea. Prin urmare, tipografia dvs. trebuie să fie capabilă să scadă bine atunci când utilizatorul comandă o mărire sau micșorare. Acest lucru este foarte simplu de testat și manipulat, doar prin scalarea browserului.
Luați notă vizitatorilor dvs. cu cerințe de accesibilitate, atât în interiorul cât și în afara tipografiei. Desigur, scalarea poate fi folosită de oricine și de multe ori, poate fi întâmplătoare. Netbook-ul fratelui meu are în mod regulat fereastra Chrome prea mare, pur accidental datorită gestului implicat pe trackpad.
Desigur, tipul de panoramare care este posibil în majoritatea browserelor este doar un singur tip. Mac OS X Lion introduce un frumos iOS-cum ar fi pinch-to-zoom care se mări într-o pagină ca și cum ar fi o imagine. Unul ar trebui să ia în considerare și acest tip de zoom, și modul în care arată textul lor când este privit în același aspect, doar într-o vedere mult mai apropiată.
Pe scurt, greutatea unui font este cât de gros este. Un font poate veni în mai multe greutăți, variind de la parul ultra-luminos până la placa ultra-negru. Schimbarea greutății unui text este folosită în general pentru a adăuga o definiție subtilă pentru a determina importanța, cum ar fi evidențierea cuvintelor cheie sau a unui paragraf de deschidere, atunci când sunt utilizate într-un paragraf.
Greutatea fontului poate fi utilizată în multe scenarii diferite. De exemplu, puteți să o utilizați într-o postare pentru a alege cuvinte cheie sau fraze. Distincția cu greutatea fontului înseamnă că este mai puțin nevoie de mai multe fonturi sau de introducerea altor factori care ar putea deteriora lizibilitatea.
Tipografia este o parte integrantă a designului. Când te uiți la un blog, vei observa cât de mult text există pe pagină și câtă influență poate avea asupra designului ca un întreg. Acești opt factori sunt cei mai importanți atunci când vine vorba de tipografie și pot schimba drastic estetica designului său.
Alegerea tipurilor de serigrafie este o decizie majoră și cum să le amestecați este chiar mai critică. Numărul de fonturi, spațiul dintre liniile de text, măsura, alinierea și greutatea sunt de asemenea caracteristici importante. Pe scurt, tipografia dvs. este ceva care ar trebui să fie bine gândit și nu doar aruncat împreună la întâmplare.
Accentsconagua