,

Cum alegem tipografia in web design si 8 asocieri de font-uri pentru inspiratie

Unele dintre cele mai importante aspecte in dezvoltarea unui website sunt asezarea si asocierea vizuala a font-urilor (tipografie digitala). Desigur, odata cu aceasta nevoie de lamurit, ne sunt oferite pentru a raspunde si intrebari precum: ce culori sa folosim in font-uri, cate culori e optim sa folosim, putem adauga fundal colorat, putem folosi efecte vizuale de tip umbre sau animatii, cand putem boldui (ingrosa), cand putem folosi italic-ul (inclinare) samd. Din fericire, toate dilemele de mai sus au un raspuns clar si concis. Odata alese culorile de brand (identitate vizuala) este mai usor de generat si paleta de nuante pe care s-o folosim pentru font-uri (desi este indicat mai mereu sa folosim 2 sau maximum 3 variatii de gri inchis) – vezi aici mai multe informatii privind teoria culorii in web design 8 Combinatii de culori de toamna pentru brandul tau si web design.

Designul general al unui website influenteaza considerabil capacitatea de captare a atentiei vizitatorului, de a-l retin pe website prin navigabilitatea prietenoasa si, nu in ultimul rand, afecteaza rata de conversie, mai ales in cazul magazinelor online. Durata atentiei majoritatii vizitatorilor online este, conform statisticilor din 2022, de 8 secunde si doar 28% din cuvinte, in medie, sunt citite pe o pagina web. Intervine, astfel, pentru intelegerea mai eficienta a acestui aspect din web design, conceptul numit “scor de lizibilitate”. Un scor de lizibilitate indica cat de usor este pentru un cititor sa inteleaga un articol/material online. Daca este mare, inseamna ca scrisul este cursiv si usor de absorbit. Daca scorul este scazut, inseamna ca unui cititor ii poate fi greu sa inteleaga mesajul si punctele cheie. Gaseste aici un website unde poti testa lizibilitatea textului tau online https://readable.com/.

Designerii de tipografie isi dedica intreaga cariera crearii de forme de litere. In aceste constructii, expertii includ, intr-un mod echilibrat, elemente precum emotia si neutralitatea, personalitatea si caracterul practic, lizibilitatea si flexibilitatea. Selectarea unui tip de font pentru un anumit design web comporta cu sine o lista lunga de alte considerente.

Cand tipografia apare pe un ecran, exista multi factori care contribuie la modul in care este afisata precum dimensiunea ecranului (de recomandat sa testam si Design-ul Responsive/Adaptabil al website-ului), rezolutia ecranului (densitatea pixelilor – desi majoritatea dispozitivelor sunt realizate cu tehnologie ce ofera rezolutie inalta, e bine de tinut cont ca inca mai exista utilizatori ce folosesc tehnologii mai vechi) si calibrarea luminozitatii pe ecran (aceasta afecteaza cum apar culorile in format digital).

Pentru toate aceste considerente, tipografia web capata propria sa categorie speciala astfel ca e indicat sa studiem cu atentie cum alegem tipurile de font potrivite si cum le combinam in mod optim.

Termenii din tipografia digitala

Iata, inainte de toate o terminologie fundamentala in domeniul tipografiei si modul in care fiecare termen se aplica designului web, asa cum o prezinta hubspot.com, adaptata pentru intelegerea in limba Romana.

Typeface (setul de caracteristici specifice unui font) si Fonturile

Typeface este un aspect specific aplicat unui set de caractere alfabetice si numerice. Tipurile comune includ Times New Roman, Arial, Helvetica, Courier si Calibri.

Fontul este o instanta particulara a setului de caracteristici, a typeface-ului. Fiecare font are anumite caracteristici vizuale precum o greutate/weight (de exemplu, mai ingrosata sau mai subtire), o dimensiune/size (de exemplu, 16 px fata de 24 px) si alte stilizari speciale aplicate (de exemplu, italic sau neitalic, rotunjit sau nerotunjit).

De exemplu, fonturile „Helvetica Light (12pt)”, „Helvetica Regular (16pt)” si „Helvetica Bold Oblique (20pt)” sunt trei fonturi in typeface-ul (categoria “mama”) „Helvetica”.

Font Family Helvetica
Sursa blog.hubspot.com

Astfel, un typeface este categoria larga de stil pentru un set de fonturi specifice, numita si familie de fonturi. Distinctia dintre typeface si font este mica, dar foarte importanta pentru folosirea optima a tipografiei in web design.

Fonturi Serif si Sans-Serif

Multe fonturi sunt conforme cu doua stiluri de font: serif si sans-serif.

Un serif este o mica proiectie ornamentala de pe linia principala a unei litere. Fonturile cu acest stil se numesc fonturi serif. „Sans” inseamna „fara” in franceza, iar fonturile fara aceste ornamente sunt etichetate drept fonturi sans serif.

Serif si Sans Serif Font
Sursa blog.hubspot.com

Caligrafic (Script)

Fontul caligrafic este un alt stil folosit pe web, desi mult mai putin. Fonturile caligrafice sunt concepute pentru a reproduce liniile variate si adesea fluide ale scrierii de mana. Totusi, tipul caligrafic este mai dificil de citit decat serif si sans serif si ar trebui folosit numai pentru cazuri speciale, cum ar fi titluri proeminente si invitatii fanteziste pentru diverse evenimente.

Font Caligrafic
Sursa elements.envato.com

Tot hubspot.com ne spune si despre:

Kerning

Termenul kerning este folosit pentru a se referi la spatiul existent intre perechi de litere. Fonturile pot avea kerning-uri mai mici sau mai largi pentru a imbunatati lizibilitatea si pentru a evita golurile incomode. Fonturile comune au kerning-uri specifice pentru fiecare pereche de caractere adiacente, astfel incat toate literele se potrivesc perfect.

Kerning
Sursa blog.hubspot.com

Leading 

Leading desemneaza spatiul vertical intre randuri. Se folosesc adesea termeni precum “single-spaced” sau “double-spaced” pentru a indica dimensiunea acestei spatieri verticale, dar poate fi exprimat si in pixeli sau puncte (points). Dimensiunea optima este de 6-8 puncte peste marimea fontului. Spre exemplu, daca fontul este de 12 pt, atunci leading-ul ideal ar fi de 18-20 pt.

Leading
Sursa blog.hubspot.com

 

Ierarhia

Majoritatea paginilor web, in ​​special cele cu mult text, despart continutul in sectiuni orientate dupa subiect. Aceste sectiuni sunt indicate si etichetate prin titluri si subtitluri.

Ierarhia este cruciala pentru a face paginile usor navigabile si digerabile. Cititorii ar trebui sa poata sari la orice sectiune este relevanta pentru ei, uitandu-se doar la titluri si subtitluri. Tipografia ofera ierarhizare prin diferite dimensiuni de font, greutati ale fontului si stiluri de font.

De exemplu, o ierarhie tipica a postarilor pe blog incepe cu textul titlului (alias „Titlul 1” sau „H1”), urmat de subtitluri de sectiune cu specificitate crescanda si scadere a proeminentei vizuale (H2, H3 etc.). In cele din urma, se ajunge la corpul textului/body, fiind de altfel continutul de care cititorii sunt cel mai interesati.

Iata un exemplu de ierarhie vizuala creata cu diferite fonturi Helvetica.

Ierarhie vizuala Helvetica Font
Sursa blog.hubspot.com

Avand aceste notiuni asimilate este mai usor sa intelegem tipografia in web design si care sunt cele mai bune practici in alegerea si folosirea font-urilor pe paginile digitale.

Iata cateva linii generale de ghidare.

Limitarea numarului de fonturi – personal folosesc maximum 3 (unul pentru titlu, unul pentru subtitlu si altul pentru continut/body).

Un font sans serif pentru corpul textului – este mai usor de scanat si mai facil de citit intrucat ochii nostri urmaresc mai bine textul web fara decoratiuni.

Fonturile acceptate de toate browserele – e bine sa aflam inainte de alege o familie de fonturi care sunt cele general acceptate de cele mai folosite browsere (web safe) pentru a evita neplacerea de a fi inlocuite automat cu ceva din pachetele standard.

Dimensionarea textului in mod corespunzator – o practica obisnuita este de a stabili ca textul site-ului web sa fie de o dimensiune minima de 16 px. Aceasta este aproximativ dimensiunea textului din materialele printate si este cel mai mic font pe care majoritatea oamenilor il pot citi fara a fi nevoie sa mareasca vizualul (zoom in).

A nu se folosi doar majuscule – a avea textul doar in majuscule este inadecvat in aproape toate contextele in afara textului decorativ, a branding-ului si a alternarii ocazionale de titluri.

Folosirea culorile cu intentie clara si cu grija – e bine sa evitam asezarea textului pe un fundal in culori similare si e indicat sa fim precauti cand il utilizam pe imagini. Ghidul de accesibilitate a continutului web (WCAG) recomanda un raport de contrast de cel putin 4,5:1 pentru majoritatea textului si 3:1 pentru textul mare. Acesta este un instrument online gratuit pentru a verifica contrastul dintre font si culoarea de fundal.

A pastra intre 40 si 80 de caractere pe rand – ochiul uman prefera randurile de text care cuprinde intre 40 si 80 de caractere. Mai scurte, trecem prea rapid la urmatorul ceea ce ne distrage atentia. Pe de alta parte, orice lungime de rand mai mare risca sa ne plictiseasca, sa ne provoace disconfort si va necesita mai mult efort pentru a gasi inceputul urmatorului rand pe masura ce ochiul se intoarce in partea stanga a blocului de text (in cazul cititorilor pe orientarea de la stanga la dreapta). Iata aici o resursa online utila pentru a masura randurile de text https://www.lettercount.com/ .

A se acorda suficient spatiu intre linii – spatiile albe adecvate asigura urmarirea cu usurinta a randurilor individuale de text. Pentru corpul textului, e utila o spatiere de 1,5, ceea ce inseamna ca interfata este 50% din inaltimea liniei de text. Pentru titluri, aceasta distanta ar trebui sa fie putin mai mare. Pentru cel intre paragrafe, e indicata o distanta de 2,5.

Animatiile in text – este bine sa fim precauti in utilizarea animatiilor intrucat cele agitate, in contextul nepotrivit, pot irita si pot indeparta definitiv vizitatorul. Personal, in articole nu folosesc deloc, iar in paginile web combin doar 2 si anume Fade In-urile si Zoom-urile incete. Gaseste aici exemple de animatii in tipografia digitala https://www.vev.design/blog/text-animation-examples/.

Avand si aceste elemente in vedere, iti prezint mai jos, 8 combinatii de font-uri (si link-urile de download aferente) pe care le poti folosi in design-ul web. Pentru website-uri se dovedeste de cele mai multe ori, in cazul folosirii temelor premium (si nu numai) ca potrivirile implicite create de autori si echipele de dezvoltare sunt si cele mai bune. Eu una le schimb foarte rar, iar cand o fac ma folosesc de ideile de mai jos.

  1. Playfair Display SC & Open Sans 

Font Pairing Playfair si Open Sans-denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Playfair+Display+SC
https://fonts.google.com/specimen/Open+Sans

  1. Montserrat & Merriweather Sans

Font Pairing Montserrat si Merryweather Sans-denisamigit.ro
Surs fontjoy.com

Surse download

https://fonts.google.com/specimen/Montserrat
https://fonts.google.com/specimen/Merriweather+Sans

  1. Josefin Sans & Libre Baskerville

Font Pairing Josefin si Libre Baskerville-denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Josefin+Sans
https://fonts.google.com/specimen/Libre+Baskerville

  1. Old Standard TT & Cabin

Font Pairing Old Standard si Cabin-denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Old+Standard+TT
https://fonts.google.com/specimen/Cabin

  1. Lato & Roboto

Font Pairing Lato si Roboto-denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Lato
https://fonts.google.com/specimen/Roboto

  1. Quicksand & Esteban

Font Pairing Quicksand si Esteban -denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Quicksand
https://fonts.google.com/specimen/Esteban

  1. Oswald & Quattrocento

Font Pairing Oswald si Quattrocento -denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Oswald
https://fonts.google.com/specimen/Quattrocento

  1. Cormorant & Proza Libre

Font Pairing Cormorant si Proza Libre -denisamigit.ro
Sursa fontjoy.com

Surse download

https://fonts.google.com/specimen/Cormorant
https://fonts.google.com/specimen/Proza+Libre

Acesta este unul dintre website-urile pe care eu l-am folosit pentru a genera perechile de fonturi https://fontjoy.com/ . 2 alte resurse online foarte utile in aflarea combinatiei ideale de fonturi sunt https://www.typotheque.com/fonts si https://typespiration.com/ .

Sper sa te fi inspirat.

Alte surse utilizate:

  • hubspot.com
  • yoast.com
  • grammarly.com
  • toptal.com
  • jeffbullas.com
  • webflow.com
  • pinterest.com
  • canva.com
  • webflow.com

Foto credit fontjoy.com

Daca doresti sa citesti si alte materiale pe care le scriu si le public aici, te poti abona la Newsletter-ul meu. In felul acesta te voi tine la curent.

Distribuie
Cosul Tau
Cos de Cumparaturi Cosul Tau e Gol