Share
Tipografia este un element fundamental în orice design pe care lucrați. Principalul motiv pentru care avem site-uri Web în primul rând este de a afișa informații și pentru ca aceste informații să fie consumate de utilizatorii care o întâlnesc. Deși pot exista multe alte elemente ale unui site Web, în centrul său este conținut. Acest conținut trebuie să fie ușor de citit, digerat, înțeles și având o bază tipografică solidă, care va ajuta doar în acest sens.
Începerea cu tipografia este, probabil, una dintre părțile mai accesibile ale designului de învățare, pur și simplu din cauza modului în care este ușor să se schimbe și să se joace cu textul pentru a obține rezultate imediate. Cu toate acestea, perfecționarea abilităților tipografice, astfel încât să puteți proiecta ceva care funcționează bine și este eficient, este ușor de citit și util pentru utilizatorii dvs., este mai mult o provocare.
În primul rând, vom lua niște termeni tehnici de bază. Aceasta este doar o scurtă trecere în revistă a câtorva dintre termenii cei mai obișnuiți pe care îi veți întâlni atunci când lucrați cu tipografia și există cu mult mai cuprinzătoare ghiduri pe web sau în cărți dacă doriți să citiți mai multe.
Acest prim termen este unul care îi face pe cei mai mulți oameni în călătorie. Fontul descrie formatele de scris. A font este vehiculul care conține textul. Descărcați și instalați un pachet de fonturi pentru a utiliza un tip de text în designul dvs..
Puteți să vă gândiți în siguranță la existența a două clasificări tip principale - serif și sans serif. Serif tipografiile arata in general mai putin clasic in stil, adesea cu mici lovituri sau embellishments (serifuri) in care formularul de formular se termina.
Exemple de fonturi serif includ Times New Roman, Baskerville și Georgia. Sans serif fonturile nu dispun de ornamentele serifului, ci arata mai degraba moderne. Exemplele de fonturi sans serif includ Helvetica, Arial și Futura.
Să examinăm pe scurt anatomia unei forme de scrisoare.
Ascender este orice parte dintr-o literă mică care se extinde deasupra înălțimii x a literei. Veți fi familiarizați cu literele care au ascendenți, cum ar fi b, d, f, h, k, l.
Un descendent este orice parte a unei litere mici care se extinde sub limita x a literei. De exemplu, g, j, p, q, y.
Într-o literă, un contor este spațiul negativ închis (sau parțial închis) într-o literă. Literele comune cu contoare includ b, d, e, o, s.
Așa cum am menționat, serifii sunt mișcările și ornamentele suplimentare pe care le puteți vedea atunci când distingeți între serifurile serif și sans serif.
Linia de bază este o linie invizibilă pe care stau toate personajele. Această linie de bază poate varia masiv între diferite tipuri de fonturi, dar este, de obicei, întotdeauna consecventă în cadrul unei tipăriri individuale.
Înălțimea capului este distanța de la linia de bază până la partea superioară a majusculelor.
Înălțimea x este înălțimea părții principale a literelor minuscule (sau cel puțin înălțimea literei mici, deci numele). Această înălțime nu include înălțimea ascendenților sau descendenților adiționali.
Un glif este un caracter individual într-un font. Acestea includ orice simbol sau literă, până la glifele suplimentare care pot fi disponibile pentru dvs., care nu se potrivesc cu nici unul dintre simbolurile sau literele mai cunoscute sau utilizate.
... trebuie să te gândești:
Când lucrați cu tipografia (și acest lucru ar putea părea evident), trebuie să luați în considerare dimensiunea textului cu care veți lucra.
Cu fiecare tendință de design care trece acolo vor fi, de asemenea, tendințe privind cât de mic sau mare text ar trebui să fie. Gândiți-vă, de exemplu, la publicul dorit; este publicul dvs. un public mai tineri sau mai în vârstă, vor avea nevoie de o dimensiune mai mare a textului?
Gândiți-vă și la modul în care dimensiunea textului va influența designul site-ului. Doriți să se concentreze pe tipografie sau aveți alte elemente de decorare și elemente de design pe care doriți să le includeți, care pot influența modul în care tipografia se află în design?
Contrastul influențează lizibilitatea unui bloc de text enorm. Când vorbim despre contrast, există două lucruri cheie pe care trebuie să le țineți minte.
În primul rând, doriți să asigurați că contrastul dintre text și fundal este suficient de puternic pentru a fi vizibil. Gândiți-vă la accesibilitatea aici - revenind la vorbit despre accesibilitatea culorilor în design, același lucru este valabil și pentru textul dvs. Dacă nu sunteți sigur dacă textul dvs. va avea sau nu un contrast suficient, atunci utilizați un instrument, cum ar fi instrumentul Lea Verou pentru raportul de contrast pentru a vă ajuta.
De asemenea, trebuie să aveți grijă de alegerile de fonturi pe care le faceți. Multe fonturi care au greutăți foarte subțiri s-ar putea să nu se afișeze bine la anumite dimensiuni și pot fi mai utile pentru fonturile mai mari sau pentru titlurile afișate. De asemenea, încercați să vă asigurați că fonturile sau fonturile pe care le alegeți au un bun browser și suport pentru sistemul de operare. Unele fonturi și fonturi pot funcționa bine pe o singură platformă, dar arata și se comportă teribil pe altă platformă.
Când lucrați cu tipografia, ca și în orice altă parte a designului dvs., doriți să vă asigurați că îi dați suficient spațiu pentru a respira și pentru ca conținutul să vorbească de la sine.
Conținutul de pe site-ul dvs. este experiența de bază pe care utilizatorii dvs. trebuie să fie oferite. În afară de orice alte elemente de design, toți utilizatorii într-adevăr trebuie să vedeți este conținutul. Din acest motiv, nu vă fie frică să dați mai mult spațiu conținutului și să lăsați conținutul dvs. să facă mai mult vorbesc.
Spațiul negativ este spațiul sau golurile care sunt lăsate în jurul elementelor unui design; nu vă fie teamă să lăsați acest spațiu negativ în jurul conținutului dvs..
De asemenea, nu uitați de spațiul din jurul fiecărei părți a textului. Permiteți o înălțime generoasă a liniei care nu vă face să vă simțiți îngrozit și mai greu de citit. Ca regulă generală (deși nu ezitați să jucați cu acest lucru), o înălțime a liniei care este de cel puțin 140% până la 160% din dimensiunea textului ar trebui să funcționeze bine și să ofere un echilibru bun pentru textul dvs..
O ierarhie tipografică se referă la modul în care este prezentat conținutul în proiectarea dvs..
Stabilirea unei ierarhii de conținut bun începe de la început, când lucrați pentru a crea o structură bună în conținutul dvs. Ierarhia tipografică funcționează apoi cu conținutul dvs. - de la titluri la paragrafe normale și de la orice părți din conținutul pe care doriți să le subliniezi - pentru a ajuta la formarea unei structuri pe care utilizatorii pot naviga cu ușurință.
Impactul pe care îl are o ierarhie asupra designului dvs. poate fi masiv. Ar trebui să faci călătoria utilizatorilor să găsească cât mai ușor conținutul pe care îl au, iar stabilirea unei ierarhii solide va aduce doar efecte pozitive.
Puteți stabili o ierarhizare bună, vizuală și tipografică într-o serie de moduri, inclusiv prin utilizarea de culori sau de dimensiuni variate de text pentru a crea accent și structură în conținutul dvs. Toate sfaturile anterioare vă vor ajuta să stabiliți o ierarhie tipografică mai bună, deși este ceva care va veni întotdeauna cu practica.
Vom discuta despre fonturile web mai detaliat mai târziu în această serie, dar următoarele ar trebui să fie o introducere solidă în posibilitățile de fonturi web.
În zilele noastre, suntem foarte norocoși că avem multe opțiuni pentru implementarea fonturilor web pe site-urile noastre web - și cu folosirea mai frecventă a fonturilor web pe web (adusă de o mai bună asistență browser-ului), putem fi mai inventivi în tipografiile și modelele pe care le putem include în desenele noastre.
Pe lângă faptul că puteți găzdui propriile fonturi folosind @ font-face, există multe servicii online disponibile pentru a vă ajuta să utilizați mai multe fonturi web online, inclusiv:
și multe, multe altele. Chiar și site-uri precum FontShop sau MyFonts (care au fost limitate doar la vânzarea de fonturi desktop) intră acum pe piața fonturilor web, oferindu-vă fonturi descărcabile pe care le puteți utiliza cu tehnica @ font-face.
După ce am acoperit principiile de tipografie, în următorul articol vom examina ritmul vertical. Nu uitați că vă puteți scufunda, de asemenea, în sesiunea noastră în curs de desfășurare A-Z de tipografie web pentru mai multe detalii despre oricare dintre aceste puncte.
Accentsconagua