Tipografia web: elemente de bază și reguli de utilizare. Lungimea liniei - contează? Alegeți fonturi care sunt ușor de citit la orice dimensiune
Acest articol vă va ajuta să înțelegeți termenii de bază din tipografie. Și pentru a face informațiile mai bune și mai ușor de perceput, textele plictisitoare sunt ilustrate cu imagini amuzante. Articolul conține, de asemenea, cele mai frecvente greșeli pe care designerii web le fac atunci când lucrează cu text și oferă recomandări despre cum să le evite.
Tipografie- cel mai puternic instrument de exprimare a unui mesaj în web design. Cu ajutorul acestuia, puteți combina text și componente vizuale, ceea ce vă va ajuta să ajungeți la vizitatorul dvs. Utilizarea corectă a tipografiei va ajuta la evitare greșeli tipice permise de designeri atunci când își creează următoarea capodoperă. Să încercăm să înțelegem ce greșim și cum să evităm greșelile în viitor.
În primul rând, să înțelegem terminologia. Majoritatea termenilor vă sunt probabil familiari, dar nu va strica să vă familiarizați din nou cu definițiile. Poate că acest lucru va completa informațiile pe care le aveți deja.
Tipografie- un set de legi, reguli și norme pentru proiectarea textului, bazate pe studiul percepției cititorului asupra compoziției. Cunoașterea și înțelegerea tipografiei transformă textul într-un instrument compozițional, îl face viu, îi conferă caracter și capacitatea de a transmite o idee nu numai prin conținut, ci și grafic.
Căști- un font sau mai multe fonturi care au unitate stilistică de stil. Constă dintr-un set de caractere. Acest concept este adesea confundat cu conceptul de „font”, deși un font este un stil specific de caractere, în timp ce un tip de literă definește o „familie” generală de fonturi.
Căștile pot fi împărțite în două categorii principale:
- Antiqua- fonturi serif.
- Grotesc, în consecință, este un font sans-serif.
Un font serif pare să dețină o linie și, în consecință, lizibilitatea crește. Fonturile Serif creează adesea un sentiment de profesionalism și autoritate în informațiile furnizate, exprimă respect și subliniază stabilitatea și conservatorismul în cel mai bun sens al cuvântului. Fonturile sans serif tind să pună accent pe raționalitate, stil, tinerețe și modernitate. Ele ajută la crearea spațiului între litere, precum și la separarea unui caracter de altul.
Skittle- înălțimea literei, inclusiv elementele inferioare și superioare. Măsurat în puncte tipografice (notat ca pt). De exemplu, textul tastat cu dimensiunea de 14 puncte va avea o înălțime de 14 puncte.
Conducere - spațiere între linii. Distanța dintre liniile de bază ale liniilor adiacente.
Kerning- distanta dintre litere. Ideea principală din spatele creării este de a selecta spații diferite între diferite perechi de litere specifice pentru a crește lizibilitatea.
Există un joc minunat de antrenament - Kern Type. Doar pune toate literele la locul lor. De fapt, nu este atât de simplu. Procesul este destul de complicat și necesită un ochi excelent. Această experiență va fi utilă în special atunci când creați logo-uri.
Ce facem greșit?
Noi folosim număr mare fonturi
Este recomandabil să nu folosiți mai mult de 3 stiluri. Acestea pot fi fonturi din aceeași fontă sau din altele diferite. De exemplu, fontul Roboto conține un număr destul de mare de stiluri diferite. Dintre acestea, puteți alege cu ușurință trei pe care le considerăm potrivite pentru site-ul nostru. Să spunem că acestea sunt ușoare, obișnuite și îndrăznețe. Puteți utiliza fontul Bold sau Light pentru titluri, Bold pentru butoane și Regular pentru textul corpului. Astfel, folosind un singur tip de literă, am furnizat site-ului nostru tipografia corectă. Desigur, totul depinde de tema site-ului și de ideea pe care intenționați să o încorporați în design. Exemplul meu este universal și nu se preface a fi ceva unic sau extraordinar.
Nu știm ce dimensiune ar trebui să aibă fontul
Dimensiunea textului de pe web nu trebuie să fie mai mică de 12 pixeli. Cea mai bună alegere- între 14–18 px pentru textul principal. Nu prea mare și în același timp ușor de citit. Mai mult, daca am ales o dimensiune de 16 px, aceasta ar trebui sa ramana 16 px pe toate paginile site-ului si sa nu sara plus sau minus 1 px de la bloc la bloc. Acest lucru este valabil și pentru conducere, ar trebui să fie la fel peste tot.
Dimensiunile fonturilor trebuie specificate în numere întregi, fără a utiliza zecimale, de exemplu 16,28 px. Și, desigur, în Photoshop trebuie să convertiți pt în px. Pentru a face acest lucru, selectați din meniu: Editare - Setări - De bază. Următorul - Unități de măsură și rigle. Schimbați elementele din meniurile drop-down „Text” și „Rigle” în pixeli. Faceți clic pe „OK”.
Lungimea liniei - contează?
Lungimea liniei nu trebuie să depășească 600 px. Acest dimensiune optimă pentru o mișcare confortabilă a ochiului de la o linie la alta. O parte de conținut foarte largă este dificil de citit - de multe ori pur și simplu pierzi rândul la care urma să mergi după ce ai citit rândul lung anterior. Dacă tot trebuie să întindeți blocul de text cu 1000 px sau mai mult în lățime, puteți încerca să împărțiți textul în două sau mai multe coloane. O altă opțiune este să faci spațiere între linii puțin mai mare decât de obicei pentru a separa vizual liniile unele de altele. Amintiți-vă să separați textul în paragrafe, acest lucru va ajuta, de asemenea, să fie ușor de citit.
Intervalul se potrivește cu dimensiunea fontului
Spațiul dintre linii ar trebui să fie aproape întotdeauna dimensiune mai mare font. Cu excepția antetelor. Pentru a obține un echilibru între text și aer, faceți distanța dintre linii de aproximativ o dată și jumătate față de înălțimea litere mici. Sau setați începutul la 150% din dimensiunea fontului. De exemplu, dimensiunea textului este de 14 px, apoi interlinierea este de 21 px. 14 / 2 = 7 + 14 = 21.
Alegeți orice font doriți
Cred că toată lumea știe deja că fonturile pentru designul site-urilor web sunt cel mai bine folosite cu fonts.google.com și webfont.ru, cu excepția cazului în care, desigur, clientul ți-a furnizat propriul font.
O, Lorem, Lorem...
Este destul de natural ca atunci când se dezvoltă un site web, conținutul care va fi acolo să nu fie folosit aproape niciodată - de multe ori acest conținut pur și simplu nu există încă. Prin urmare, designerii (și designerii de aspect) folosesc „pește” - text arbitrar care se încadrează în blocurile de conținut. Acest lucru este destul de convenabil, mai ales pentru designeri, pentru că acum notoriul „Lorem Ipsum...” poate fi inserat direct din Photoshop (Meniu: Text - Insert Lorem Ipsum). Dar pentru site-urile în limba rusă nu este recomandat să faceți acest lucru - alfabetul latin nu oferă o idee despre cum va arăta textul tastat Font chirilic. Prin urmare, un generator de text vă poate ajuta.
Verificarea corectitudinii designului este simplă: dacă privitorul, fără să atingă mouse-ul, poate ghici unde este linkul și unde nu este, atunci avem un site bun. Prin urmare, este necesar să vă gândiți în avans la modul în care vor arăta toate linkurile de pe site. Să presupunem că toate elementele pe care se poate face clic sunt de o singură culoare, de exemplu roșu, și nu elementele pe care se poate face clic de altă culoare - negru. Atunci nimeni nu va fi confuz.
Acest lucru se întâmplă adesea: titlul este evidențiat cu roșu (la urma urmei, trebuie evidențiat cumva), urmat de câteva expresii USP foarte importante. albastruși toate acestea sunt amestecate cu text negru obișnuit. La sfârșitul textului există un buton, de asemenea roșu. Este clar că trebuie să faceți clic pe buton, dar se dovedește că textul colorat în albastru era și el pe care se poate face clic (s-a deschis Informații suplimentare). Dar cine știa, cine știa...
Aliniere
Există blocuri de text care sunt foarte adesea aliniate incorect - justificate, aliniate la centru și aliniate la dreapta. În toate aceste cazuri, textul este incomod de citit și vizual pare neatractiv. Alinierea ar trebui să fie ÎNTOTDEAUNA lăsată. Chiar dacă vrei cu adevărat să o faci pe partea dreaptă (pur și simplu pentru că ți se pare că așa ar trebui să fie compozițional) - aceasta este greșită. O excepție poate fi una sau două propoziții scurte, care, cel mai probabil, sunt subtitluri pentru textul principal.
Contrast
Contrastul este unul dintre principalele mijloace de exprimare în design. Nu trebuie să vă fie frică de forme mari și spații goale! Tipografia în mod deliberat mare devine un element independent care nu necesită suplimentar instrumente graficeînregistrare
Pentru a clarifica orice confuzie care poate apărea, este necesar să clarificăm imediat sensul unora termeni cheie. Primul set important cuvinte cheie definiți conceptele de „font” și „typeface”.
Un font este un set de caractere de o anumită dimensiune și design. Un tip de caractere definește în mod similar familiile de stiluri de font. Cuvântul cheie aici este stilurile, care separă diferitele fonturi în grupuri sau familii. De exemplu, acestea pot fi serif, sans serif, scrise de mână, afișare, monospace și altele. Putem spune că un font este un set de fonturi de diferite stiluri și dimensiuni, combinate stilul general execuţie. După cum puteți vedea, fontul este un concept mai restrâns.
Atunci când creați un aspect de pagină web, alegerea fontului este foarte importantă. Desigur, cel mai bine este să folosiți fonturi de la set standard Windows sau Mac. Dar, uneori, acest set nu este suficient pentru a aduce la viață ideea designerului, iar apoi întreaga povară cade pe umerii designerului de layout. Din fericire, Fonturi web Google oferă foarte solutie eleganta această problemă.
Există, de asemenea, termeni precum „greutate” și kerning. Toate pot fi modificate folosind Instrumente CSSși să fie aplicate paragrafelor, titlurilor sau altor elemente de text. Proprietatea „greutate” a unui font determină gradul de grosime al liniilor atunci când sunt scrise. Aceasta este o serie de valori de la 100 la 900, unde fiecare număr indică o pondere corespunzătoare îndrăzneală a stilului. Font normal„normal” corespunde numărului 400, bold „bold” - 700. Kerning - modificarea distanței dintre litere în funcție de forma acestora. Este un proces plasarea corectă simboluri, ajustând distanțele dintre ele, în urma cărora ar trebui să se obțină armonie. Deși mulți oameni kerning o atenție deosebită nu acordați atenție, lucrurile mărunte sunt cele care ajută la obținerea unor rezultate foarte bune.
Încălcarea normelor
Este destul de rezonabil să discutăm despre necesitatea de a crea fonturi noi. Pentru în ultima vreme multe site-uri web sunt învechite. Folosesc fonturi standard, de care deja ne-am săturat.
Există sute de fonturi disponibile astăzi, dar diferite sisteme de operare oferă propriile pachete. Și doar câteva dintre fonturi sunt incluse în aceste pachete. Dacă selectați un font pe care altcineva poate să nu îl aibă în sistemul dvs., fontul va fi înlocuit cu fontul implicit. Din aceste motive se recomandă utilizarea fonturi de bază. Dar uneori fonturile de bază nu pot capta pe deplin imaginația unui designer. Prin urmare, dacă credeți cu tărie că un font special este necesar pentru designul dvs., puteți transforma fontul dvs. special într-o imagine și îl puteți încărca pe site-ul dvs. web. Creați titluri, anteturi sau meniuri grafice și folosiți-le.
Asigurați-vă că titlurile corespund subiectelor site-ului. Ele pot include diverse schema de culori, subliniere, pictograme de fundal sau text grafic. Până la urmă, decizia este a ta.
În plus, trebuie să vă asigurați că totul link-uri text avea același font pe site. Utilizarea link-urilor de diferite fonturi și modele va cauza dificultăți semnificative pentru utilizator în navigare.
Alegerea fontului potrivit
De asemenea, trebuie remarcat faptul că diferite fonturi pot avea efecte diferite asupra stării de spirit a cititorilor. În general, fonturile serif sunt mai potrivite pentru materialele tipărite. Serifurile ajută la crearea spațiului între litere și, de asemenea, separă un caracter de altul. Adesea, fonturile serif oferă o senzație personală, transmit respect, inteligență și profesionalism.
Fonturile sans serif sunt cele mai bune pentru paginile web. Rezoluție scăzută ecranele vor face ca serifurile să arate neclare și, la rândul lor, să fie prost percepute. Fonturile sans serif tind să exprime sentimente de raționalitate, stil, tinerețe și modernitate.
De exemplu, alegerea serif-urilor dă un sentiment de profesionalism și informații cu autoritate. Acest lucru poate fi văzut adesea în mass-media de masă, cum ar fi New York Times. Pentru blogurile mai mici, puteți utiliza un font sans serif cu o înălțime mare a liniilor. Acest lucru oferă utilizatorilor posibilitatea de a vizualiza rapid textul blogului.
Ar trebui să vă gândiți întotdeauna la ce informații încercați să le transmiteți vizitatorului. Atunci când alegeți un font, trebuie să vă amintiți că mesajele fericite ar trebui să fie însoțite de forme de font ușoare, aerisite și moi, în timp ce mesajele cu unele teme mai întunecate, cum ar fi Halloween, ar fi mai bine însoțite de fonturi cu margini mai dure.
Lizibilitate
Tipografia, și cel mai adesea tipografia ilizibilă, poate fi foarte enervantă pentru ochi. Există, desigur, câteva excepții în care pot fi folosite fonturi Funky sau alte fonturi ilizibile, cum ar fi pentru promoțiile cluburilor de noapte.
Dar totuși, dacă doriți să utilizați, de exemplu, Soda, Bored sau Akka, atunci este mai bine să abandonați această idee. Dacă dorința este încă suficient de puternică, atunci aceste fonturi ar trebui folosite cu moderație. De exemplu, ca titlu. Dar atunci textul principal ar trebui să fie mai lizibil. Acest lucru poate ajuta la crearea unui impuls pe site-ul dvs. Și trebuie să vă amintiți că utilizarea unor astfel de fonturi ar trebui să fie un avantaj al designului și nu un dezavantaj.
Conținutul informațional
Designul ar trebui să completeze mesajul dvs. Utilizatorul nu trebuie să-și dea seama ce anume a avut în vedere designerul. Alegere greșită tipografia poate contribui la concepția greșită a utilizatorului despre companie și serviciile acesteia.
Când proiectați pentru proiecte de afaceri, ar trebui să utilizați în mare parte fonturi netede tradiționale. Acest lucru ar trebui să fie luat în considerare și dacă nu aveți un design oficial. Mai ales dacă doriți ca oamenii să vă ia site-ul în serios.
Amplasare și dimensiuni
Foarte important pentru design eficient— în ce locuri trebuie plasat textul și care este dimensiunea acestuia. Nimeni nu vrea să-și obosească ochii pentru a citi informații sau pentru a observa un site web incredibil cuvinte uriașe. Scopul creației design bun este să găsești echilibrul. Și primul pas în acest sens este să vă dați seama care informații vor fi mai importante.
De obicei, cuvintele cărora doriți să le acordați atenție trebuie făcute puțin mai mult. Sau invers - cele minore ar trebui să fie mai mici. Totul depinde de importanță. Cu alte cuvinte, trebuie să creați o ierarhie de cuvinte.
Când vine vorba de plasarea fonturilor, încercați să-l mențineți echilibrat. Nu este nevoie să împrăștiați părți ale textului în patru colțuri. Aceasta poate fi o distragere semnificativă a atenției utilizatorilor.
Culoare
Acesta este unul dintre cele mai simple aspecte. Trebuie să alegeți o culoare care să facă textul să iasă în evidență de fundal și să rămână lizibil.
Asistenții tăi vor fi culori contrastante, precum și utilizarea de efecte precum lovituri (stroke) și străluciri (strălucire). Acest lucru va face site-ul mai atractiv și mai ușor de citit. Trebuie să alegeți o culoare care îi va face pe oameni să se oprească și să se uite și să facă din informații parte dominantă a designului.
Concluzie
Utilizarea fonturilor în Photoshop este semnificativ diferită de utilizarea lor pe paginile web. Acest lucru explică de ce unor designeri le este atât de dificil să lucreze cu tipografia. Tipografia pe web este un subiect destul de larg și necesită multă cercetare. Ar trebui să vă amintiți întotdeauna că este foarte important să găsiți o abordare a utilizării tipografiei care să se potrivească cu starea de spirit și estetica designului. Nu vă fie teamă să amestecați și să asortați diverse tipuri fonturi, asigurați-vă că sunt bune.
Noi, ca designeri, trebuie nu numai să înțelegem și să înțelegem sensul textului, ci trebuie să-l vedem. Adică să recunoască în ce tip de literă a fost introdus textul și ce stil a fost folosit. Pentru a alege fonturile potrivite pentru site-uri web sau aplicații mobile Trebuie să înțelegeți tipografia cel puțin la un nivel de bază. În acest articol, voi explica principiile și conceptele de bază ale tipografiei, care vor ajuta un designer web începător dacă este prima dată când auziți despre conceptul de tipografie.
Să începem cu exemple de tipografie.
Tipografia este utilizarea fonturi corecte nu numai în designul de cărți și reviste, ci și pentru site-uri web sau aplicații pentru un dispozitiv mobil.
Nu e nevoie să faci asta
Acest tip de tipografie îl găsești adesea în reclame pe stâlpi sau în metrou.
Pentru a înțelege diferența dintre primele exemple și al doilea, trebuie să cunoașteți principiile și definițiile de bază, trebuie să înțelegeți și să simțiți fonturile. Teoria este importantă dacă doriți să începeți rapid și eficient în nișa de web design.
Încercați să citiți acest text în 20 de secunde. 
Există o greșeală în fiecare cuvânt din acest text. Deoarece suntem oameni alfabetizați, suntem obișnuiți să vedem ceea ce vrem să vedem. Putem citi cu ușurință chiar și un astfel de text, fără să citim simbolurile, și să-l înțelegem. Este normal, majoritatea oamenilor alfabetizați fac asta, adică nu observă greșeli de scriere, pentru că vor să vadă ce este scris aici (să înțeleagă sensul textului), și să nu vadă abra-kadabra. Prin urmare, atunci când fonturile sunt alese corect, nu vă va fi dificil să citiți chiar și textul un număr mare greșeli de tipar.
Tipografie
Definiția tipografiei este proiectarea textului folosind instrumente de tastare și aspect. Conceptul de „tipografie” provine din tipărire.
In poza, litera este un bloc metalic pe care sunt imprimate elemente spatiale care pun amprenta pe hartie si se obtine litera corespunzatoare. Prin urmare, în definiția „tipografiei” există cuvinte precum „compunere” și „aspect”;
Definiții de bază în tipografie
Exemplu de caligrafie
Caligrafie- arta scrierii frumoase. Luați un stilou lat, o pensulă sau o bucată de riglă și utilizați aceste instrumente pentru a crea astfel de lucrări.
Crearea fonturilor decorative. De obicei, o schiță este desenată într-un bloc de note, apoi transferată în Illustrator, fontul este conturat folosind curbele Bezier, după care se obține o inscripție îngrijită.
Litere pentru logo
Diferența dintre caligrafie și litere. Caligrafia este atunci când iei un pix, marker sau orice altceva și desenezi oriunde. Scriere - atunci când desenați o schiță, transferați-o într-un editor grafic, urmăriți-o și obțineți litere frumoase, care poate fi folosit într-un logo sau în altă parte.
Reguli de bază ale tipografiei
Font cu litere mici și majuscule
Litere mici- litere acceptate pentru tastare continuă.
majuscule(litere mari, în mod popular „mari”) literele sunt folosite pentru caracterele mari, o propoziție sau un nume propriu începe cu ele.
Cratima și liniuță
O caracteristică importantă pe care începătorilor o dor. O cratima și o liniuță sunt caractere diferite, acest lucru este important de știut.
Cratimă- o liniuță scurtă pentru a separa cuvintele și cratimele. Nimic nu bate cuvintele. Spațiile NU sunt plasate înainte sau după el.
În liniuță este folosit pentru a indica intervale numerice, de obicei neseparate prin spații.
Em liniuță- Acesta este un semn de punctuație, folosit în propoziții și separat prin spații.
Cratima, liniuță și ei liniuță diferă în lungimea semnului în sine. Există și semnul minus, este cel mai scurt dintre toate. Iată un mic indiciu. Salvați imaginea pentru a vă aminti ce este. 
Pentru a tasta o liniuță em pe un computer, țineți apăsată tasta Alt și pe tasta suplimentară tastatura numerică(ai un bloc în dreapta) formează 0151, primești o liniuță em. În liniuță: alt + 0150.
Dacă uitați combinația, introduceți „em dash” într-un motor de căutare, găsiți articolul Wikipedia și copiați liniuța de acolo.
Citate
Este important să ne amintim că în Rusia se obișnuiește să se utilizeze Citate pentru pomul de Crăciun„”. Pentru a le introduce, folosiți alt + 0187. Unii oameni folosesc semnul dublu minut „ ca ghilimele, dar este mai bine să folosiți ghilimele„ ”: alt + 0147.
Combinaţie Tastele Shift+ 2 în aspectul tastaturii chirilice afișează „semnul” familiar pe ecran. Nu denotă deloc ghilimele (cum se crede în mod obișnuit), ci secunde: 68° 13′ 22″ sau inci: un monitor cu diagonala de 17″.
Trebuie utilizat un singur model de citare pentru fiecare publicație, cu excepția „cazurilor de „citate într-un citat””.
Fonturi
Am aranjat semnele, acum despre conceptul de font. Aici voi oferi doar definiții de bază despre cum să folosiți corect fonturile, citiți în continuare.
Font- un set de caractere destinate tastării. O scrisoare este lucrul despre care am vorbit mai sus, un bloc metalic cu o scrisoare. În linii mari, un font este un set de litere metalice concepute pentru text.
Căști- un set de fonturi care au stil uniformși design. Desigur, ar trebui să aibă un stil similar. De exemplu, fontul PT Sans este format din diferite stiluri de font: Bold, Italic și altele. Toate stilurile împreună ne oferă caracterul PT Sans.
Stiluri de font- Asta varietate grafică font în cadrul aceluiași tip de literă. De exemplu, PT Sans are stiluri subțiri, îndrăznețe, îndrăznețe și alte stiluri. De obicei, în Photoshop este scris în engleză.
- distanța dintre liniile de bază ale liniilor adiacente. 
Alinierea (alinierea în viață)- metoda de poziţionare a unei linii dactilografiate incomplete în raport cu limitele verticale ale barei de apelare. Probabil ați văzut astfel de butoane în MS Word (găsiți imaginea, aliniați). Se numește comutator, deoarece atunci când a fost necesar să se aranjeze corect literele metalice, în ele au fost plasate blocuri metalice spațiale pentru a le opri. De aceea se numește „oprire”.
Alinierea sau justificarea textului
Kerning și urmărire
Kerning- modificarea selectivă a distanței dintre litere în funcție de forma acestora. Când mai multe caractere (diferite) sunt aliniate. Din punct de vedere vizual, unele combinații de litere sunt foarte apropiate dacă ar exista aceeași distanță între toate caracterele, atunci vizual ar arăta diferit. Prin urmare, atunci când creează fonturi, folosesc tabele în care combinația de litere și distanța dintre ele sunt scrise strict. ÎN căști bune aceasta este deja specificată implicit, dar poate fi ajustată în editor grafic pe care îl utilizați (de exemplu Photoshop).
Urmărire- distanța dintre caracterele dintr-un cuvânt sau o propoziție.
Este logic să folosești urmărirea, dacă folosești majuscule, are sens să urmărești astfel încât distanța dintre ele să fie mai mare, acestea vor fi mai ușor și mai bine citite. 
Dacă utilizați Photoshop pentru a crea un aspect al designului site-ului web, atunci vă sfătuiesc să setați kerningul la „auto” și să nu vă încurcați deloc cu urmărirea. Uneori, pentru ca fonturile să rezultatul final arăta la fel ca în aspect, trebuie să discutați cu designerul de layout.
Antiqua- fonturi serif. Serifurile sunt dungi orizontale în partea de sus și de jos a literelor. Au provenit din fonturi vechi care datează din zilele scrisului pe piatră. Este mai ușor să citești serif-uri în cărți; linii orizontale, care par să susțină fontul de pe linia de bază și ne ajută să ne străduim să citim propoziții.
Font grotesc, sau sans-serif, a apărut recent, în legătură cu așa-numita revoluție a fonturilor, când nu mai era nevoie de serif. Grotescul este adesea folosit în fonturile web și lucrurile pe ecran (pe telefoane, de exemplu). Este mai simplu din cauza lipsei serif-urilor, este bine de folosit pentru tipărirea continuă pe Internet. Puteți folosi orice opțiune în proiecte, nu există opțiune corectă sau greșită. Trebuie să te uiți la situație, ce fel de proiect faci și ce este mai relevant pentru el.
Aceasta completează cursul introductiv de tipografie pentru un web designer :)
Reținându-ți doar Antiqua și Grotesque, vei fi deja înaintea multor designeri în ceea ce privește cunoștințele. Nu sta pe loc, studiază tipografia, este interesant și te va ajuta să creezi proiecte cool și îngrijite.
Scrieți în comentarii ce nou ați învățat din acest articol.
Interacțiunea corectă cu tipografia este importantă pentru fiecare web designer. La urma urmei, conținutul text reprezintă aproximativ 90% din conținutul total al site-ului. Textul controlează atenția utilizatorilor, purtând nu doar o încărcătură informațională, ci și estetică. Prin urmare, merită să petreceți suficient timp pe principalele aspecte ale tipografiei web moderne, împrumut cele mai bune idei prin aplicarea lor în practică.
Fonturi
Tipografia în designul web este supusă anumitor legi și reguli. Multe dintre ele se referă la fonturi ca bază pentru formarea oricărui conținut text. Alegerea corectă V în acest caz, determină conceptul de proiect în ansamblu și influențează percepția asupra resursei de către utilizatori.
Nu cu mult timp în urmă, designerii aveau la dispoziție doar câteva tipuri de fonturi care erau folosite pentru încărcare sistem de operare. Orice altceva era în format flash sau imagine. Au existat anumite soluții în această chestiune. Cu toate acestea, au provocat multe dureri de cap.
O nouă eră în designul web a început odată cu apariția regulii @font-face. În esență, le-a oferit designerilor mână liberă, oferind un domeniu de activitate aproape nelimitat. Cu toate acestea, nu toate fonturile merită folosite în design web. Unele din cauza lizibilității slabe, altele din cauza greutății.
Aliniere
Alinierea justificată, la centru și la dreapta sunt cele mai proaste exemple. În primul caz, se formează spații inegale între cuvinte, a doua și a treia opțiune produc o margine frontală neuniformă, care afectează lizibilitatea. Privirea nu are punct de referință, iar atunci când este împrăștiată, informația este prost percepută.
O opțiune bună pentru aliniere este orientarea textului spre stânga. Acest format este adecvat în 99% din cazuri.
Macro și micrografie
Nivelul macro este responsabil pentru structura generala text în cadrul site-ului, locație față de alte elemente de design. Obiectivele sale sunt globale - să facă textul holistic, armonios și în același timp „viu”.
Nivelul micro este responsabil pentru zonă cele mai mici detalii: spațiere, spații, indentări etc. Formează un concept precum lizibilitatea. Eliminați-l și textul se va transforma într-o pânză continuă de litere și semne de punctuație.
Pentru a desemna fonturi în design web, este mai bine să folosiți valori relative „em” sau %. Acest lucru vă permite să faceți conținutul adaptabil și flexibil. Se recomandă folosirea pixelilor în raport cu containerele neadaptative, când atunci când dimensiunea ecranului se modifică, blocurile se mișcă, în timp ce fontul nu se schimbă.
Blocuri de text
Paragrafele și blocurile de propoziții lungi fac dificilă înțelegerea informațiilor. Este mult mai convenabil atunci când linia include nu mai mult de 70 de caractere, dar nu mai puțin de 30. Spațierea între linii variază în funcție de lățimea liniei de text. Pentru confortul utilizatorilor, acesta nu trebuie să fie mai mic decât spațiul dintre cuvinte.
Font
Când lucrați la tipografie, nu puteți face fără variații ale stilului literelor. Când este folosită cu pricepere, această abilitate se transformă într-o armă puternică de accent. De exemplu, caracterele cursive conferă textului o anumită solemnitate, stil îndrăzneț indică importanța informațiilor, iar proprietatea varianta font: small-caps adaugă o anumită sofisticare.
Serif sau sans serif
Mulți designeri consideră că fonturile sans serif sunt ideale pentru titluri și subtitluri. În timp ce corpul principal ar trebui să fie format într-un font serif. Aceasta este o regulă nerostită, a cărei relevanță s-a epuizat deja.
Vă rugăm să rețineți că utilizarea unui font sans serif este încă justificată:
- Când cititorii sunt copii.
- Cu o paletă de culori de accent strălucitor.
- Dacă textul este îngust sau prea mic.
Comunicarea joacă un rol vital în design - este important să se stabilească o legătură clară între site și utilizator și să-l ajute să-și atingă obiectivele. Când vorbim despre comunicare în contextul designului web, de obicei ne gândim la text. Tipografia joacă un rol vital în acest proces:
Peste 95% din informațiile de pe Internet sunt în formă scrisă.
Tipografia bună face citirea fără efort, în timp ce tipografia proastă dezactivează utilizatorii. După cum afirmă Oliver Reichenstein în articolul său „Designul web este 95% tipografie”:
Optimizarea tipografiei înseamnă optimizarea lizibilității, accesibilității, utilizabilității (!) și echilibrului grafic general.
Cu alte cuvinte, optimizându-ți tipografia, vei optimiza și experiența utilizatorului. În acest articol, voi oferi un set de reguli care vor ajuta la îmbunătățirea lizibilității și lizibilității conținutului textului dvs.
Utilizarea a mai mult de trei fonturi diferite face ca site-ul să pară nestructurat și neprofesional. Rețineți că prea multe dimensiuni și stiluri de font simultan pot strica orice aspect.
Pentru a preveni situație similară, încercați să limitați numărul de familii de fonturi la minimum
În general, limitați numărul de familii de fonturi la minim (două sunt multe; unul este adesea suficient) și respectați-le pe tot site-ul dvs. Dacă utilizați mai multe fonturi, asigurați-vă că familiile de fonturi se completează în funcție de lățimea caracterelor. Mai jos este un exemplu de combinații de fonturi. Combinația dintre Georgia și Verdana (stânga) are semnificații similare care creează o combinație armonioasă. Comparați acest lucru cu perechea Baskerville și Impact (dreapta), unde greutatea mare a fontului Impact depășește semnificativ celălalt font.
2. Încearcă utilizare standard fonturi
Serviciile de încorporare a fonturilor (cum ar fi Google Web Fonts sau Typekit) au multe fonturi interesante, care poate oferi proiectelor tale ceva nou, proaspăt și neașteptat. De asemenea, sunt foarte ușor de utilizat. Luați Google de exemplu:
- Alegeți orice font, de exemplu Open Sans.
- Generați codul și inserați-l în documentul dvs. HTML.
- Gata!
Deci ce ar putea merge prost?
De fapt, această abordare are o problemă serioasă - utilizatorii sunt mai familiarizați fonturi standardși le pot citi mai repede.
Cu excepția cazului în care site-ul dvs. web trebuie să utilizeze în mod special un font personalizat, cum ar fi în scopuri de branding sau pentru a crea o experiență impresionantă, de obicei este cel mai bine să utilizați fonturile de sistem. O opțiune de câștig-câștig este utilizarea fonturilor de sistem: Arial, Calibri, Trebuchet etc. Rețineți că o tipografie bună atrage cititorul la conținut, nu la fontul în sine.
A avea numărul corect de caractere pe fiecare linie este cheia pentru lizibilitatea textului tău. Designul dvs. nu ar trebui să dicteze lățimea textului dvs. Aceasta ar trebui să fie și o chestiune de lizibilitate. Consultați acest sfat despre lizibilitate și lungimea liniei de la:
„Ar trebui să aveți aproximativ 60 de caractere pe rând dacă doriți să obțineți experienta buna lectură. A avea numărul potrivit de caractere pe fiecare linie este cheia pentru lizibilitatea textului tău.”
Dacă linia este prea scurtă, ochiul va trebui să se întoarcă prea des, perturbând ritmul cititorului. Dacă o linie de text este prea lungă, utilizatorului îi va fi dificil să se concentreze asupra textului. Imagine: Design material Pentru dispozitivele mobile, ar trebui să utilizați 30–40 de caractere pe rând. Mai jos este un exemplu de două site-uri vizualizate dispozitiv mobil. Primul folosește 50-75 de caractere pe linie (numărul optim de caractere pe linie pentru imprimare și pentru computer), iar al doilea folosește 30-40 de caractere optime.
Imagine: Usertesting În web design poți realiza cantitate optima caractere pe linie, limitând lățimea blocurilor de text folosind em ( unitate relativă măsurători) sau pixeli.
4. Alegeți un font care funcționează bine în diferite dimensiuni
Utilizatorii vă vor accesa site-ul de pe dispozitive cu diferite dimensiuni și rezoluții ale ecranului. Majoritate interfețe cu utilizatorul necesită elemente de text diferite dimensiuni(textul butoanelor, etichetele câmpurilor, titlurile secțiunilor etc.). Este important să alegeți un font care să funcționeze bine dimensiuni diferite pentru a asigura lizibilitatea și utilizarea la orice dimensiune.
Asigurați-vă că fontul pe care îl alegeți poate fi lizibil pe ecrane mai mici!Încercați să evitați fonturile care folosesc scriere cursivă, precum Vivaldi (în exemplul de mai jos): deși sunt frumoase, sunt greu de citit.
În multe fonturi, este prea ușor să confundați forme similare de litere, în special „i” și „L” (așa cum se vede în imaginea de mai jos) și spații mici între litere, cum ar fi atunci când „r” și „n” arată ca „m”. Deci, atunci când alegeți un font, asigurați-vă că îl testați în diferite contexte pentru a vă asigura că nu va cauza probleme utilizatorilor dvs.
Textul integral scris cu majuscule – grozav în contexte care nu implică lectura(cum ar fi acronimele sau siglele), dar atunci când mesajul dvs. implică citire, nu forțați utilizatorii să citească textul pe care l-ați scris cu majuscule. După cum a menționat Miles Tinker în lucrarea sa de referință „Ușurința tastării”, textul scris în întregime cu majuscule încetinește semnificativ viteza de vizualizare și citire în comparație cu litere mici.
În tipografie, avem un termen special pentru distanța dintre două linii de text - interlineare sau spațiere. Prin creșterea spațierii între rânduri, creșteți spațiul vertical dintre liniile de text, îmbunătățind de obicei lizibilitatea în schimbul unui spațiu valoros pe ecran. De regulă, pentru o bună lizibilitate, spația dintre linii ar trebui să fie cu 30% mai mare decât înălțimea caracterelor.
Spațierea bună între rânduri îmbunătățește lizibilitatea. Imagine: Microsoft S-a dovedit că utilizarea corectă Spațiul dintre paragrafe crește înțelegerea cu până la 20%, așa cum a observat Dmitry Fadeev. Capacitate de utilizare spatiu gol este de a oferi utilizatorilor o cantitate ușor de digerat de conținut și apoi de a elimina detaliile străine.
Stânga: text ale cărui linii aproape se suprapun. Dreapta: spațierea bine aleasă promovează lizibilitatea. Imagine: Apple 8. Asigurați-vă că aveți suficient contrast de culoare
Nu utilizați aceleași culori sau culori similare pentru text și fundal. Cu cât textul este mai vizibil, cu atât utilizatori mai rapiziîl pot vizualiza și citi. W3C recomandă următoarele rapoarte de contrast pentru text și text dintr-o imagine:
- Textul mic trebuie să aibă un raport de contrast de cel puțin 4,5:1 față de fundal.
- Textul mare (la 14 pt aldine / 18 pt normal) trebuie să aibă un raport de contrast de cel puțin 3:1 față de fundal.
Aceste linii de text nu respectă regulile de contrast de culoare și sunt greu de distins de culorile de fundal. 
Aceste linii de text urmează regulile de contrast de culoare și sunt ușor de citit pe culorile de fundal. Odată ce ați ales o culoare, este imperativ să o verificați utilizatori reali pe majoritatea dispozitivelor. Dacă oricare dintre teste arată o problemă cu citirea textului dvs., puteți fi sigur că utilizatorii dvs. vor avea o problemă similară.
Daltonismul este o afecțiune comună, în special în rândul bărbaților (8% dintre bărbați sunt daltonieri), se recomandă folosirea altor indicii pe lângă culoare pentru a marca informatii importante. De asemenea, evitați să folosiți doar culorile roșii și verzi pentru a transmite informații, deoarece daltonismul roșu și verde este cea mai comună formă de daltonism.
Conținutul care clipește sau pâlpâie poate provoca convulsii la persoanele susceptibile. Nu numai că aceasta ar putea fi o experiență care provoacă convulsii, dar va fi probabil enervant sau distrage atenția pentru utilizatori în general.
Evitați textul intermitent!Concluzie
Tipografia este importantă. Alegerea tipografiei potrivite poate oferi site-ului dvs. un aspect clar și șlefuit. Pe de alta parte, opțiuni proaste Tipografia distrage atenția utilizatorului și tinde să atragă atenția asupra ei însăși. Tipografia este foarte importantă lizibil, de înțelesŞi lizibil.
Tipografia există pentru a oferi conținut.
Tipografia ar trebui să ofere conținut în așa fel încât să nu adauge niciodată încărcătură cognitivă utilizatorului.
Aveți propriile sfaturi pentru tipografie în web design? Sau vrei să obții mai mult informatii detaliate despre problemele menționate mai sus? Anunță-mă în comentariile de mai jos!
Abonați-vă laUX Planetă:
