You are currently viewing Tipografie web eficienta: reguli si tehnici

Tipografie web eficienta: reguli si tehnici

  • Reading time:5 mins read

O tipografie buna se refera la selectarea tipului potrivit pentru mediile web sau tiparite. De la tipul fontului, culoarea textului la lungimea si dimensiunea fontului pe diferite ferestre de vizualizare, o tipografie buna asigura ca formele finale ale literei genereaza rezultatul final de cea mai inalta calitate.

Inainte de a ne aprofunda in procesul de creare a unei tipografii web receptive de succes, iata cativa termeni pe care trebuie sa-i intelegeti. Toate detaliile de mai jos sunt cunoscute de specialistii care se ocupa cu realizare website.

Font/Typeface

Cunoscuta si ca familie de fonturi. Aceasta este o colectie de design de caractere cu un set complet de litere, numere, simboluri, caractere speciale si greutate.

Cap Height

Aceasta este inaltimea majusculelor deasupra liniei de baza. Suna complicat? Ei bine, apeland la servicii precum cele de la web design Constanta, cu siguranta nu va fi necesar sa va complicati cu astfel de informatii.

X-Height

Cunoscuta si sub numele de dimensiunea corpului. Aceasta este distanta dintre linia de baza si linia mediana (jumatate din distanta de la linia de baza pana la inaltimea capacului).

Kerning

Procesul de ajustare a spatiului dintre caracterele individuale in glife de latimi diferite.

Conducere

Cunoscuta si ca inaltime de linie in CSS. Distanta dintre liniile de baza ale liniilor sau tipurilor succesive.

Puncte de luat in considerare in tipografia web

Cuvintele, frazele si propozitiile au sens, dar fiecare personaj poate avea emotie. Pe langa faptul ca sunteti receptiv, trebuie sa luati in considerare si prezentarea unei tipografii web mai bune publicului dvs.

Designul complet nu va avea sens daca publicul tau nu va intelege sau nu este atras de continutul tau. In tipografia web exista patru elemente de baza:

  • Tip
  • Culoare
  • Textura
  • Imagine

Toate acestea vor avea un efect mare asupra rezultatului final al tipografiei, dar tipul va mari expresivitatea mesajului dvs. Exista cinci factori care va pot ajuta sa creati o tipografie web prezentabila.

  1. Alegeti cel mai bun tip de litera care corespunde subiectului

Majoritatea site-urilor din zilele noastre folosesc aceleasi fonturi. Da, ai ghicit bine; Este vorba despre Arial si Helvetica. Cu toate acestea, ar avea foarte mult sens daca ati putea alinia fonturile cu mesajul dvs.

De exemplu, paginile tale web vorbesc despre o carte pentru copii. Ar fi bine sa folosesti ceva precum DK Crayon Crumble sau Little Miss Priss in textul antetului?

Nu sugeram ca trebuie sa faceti acest lucru tot timpul, dar ideea este sa va asigurati ca tipografia se aliniaza cu publicul tinta si textul este clar si lizibil.

  1. Folositi fonturi web

Una dintre cele mai mari imbunatatiri ale designului web din zilele noastre este suportul pentru fonturile Web pe toate browserele moderne prin comanda @import si eticheta de link standard.

Aceasta inseamna ca puteti utiliza orice font disponibil pe site-ul de fonturi web gazduit, cum ar fi Google Font si Typekit. Iata urmatoarele avantaje ale utilizarii fonturilor web:

  • Economiseste bani. Nu trebuie sa cumparati fonturi online.
  • Economiseste timp. Desi puteti integra fonturile manual in fisierul folderelor, utilizarea fonturilor web se poate face cu o linie de cod.
  • Sunt compatibile cu toate versiunile noi de browsere web si sunt prietenoase cu SEO.
  1. Folositi combinatii adecvate de culori

Una dintre greselile majore pe care le comit designerii web in zilele noastre, este sa arunce combinatii de culori inutile pe site-urile lor. Amintiti-va ca un design web bun poate fi identificat dupa cat de bine functioneaza site-ul si cat de bun este designul.

Vorbind despre web design, nu va proiectati doar paginile web aleatoriu si nu aruncati o multime de culori care nu se potrivesc, in special cu textul si fundalul site-ului dvs. Acest lucru va face textul dvs. imposibil de citit si va aduce disconfort in ochii vizitatorului.

Dar cum folosesti combinatiile adecvate de culori? Desi nu exista o regula generala, exista cateva linii directoare.

Utilizati contrastul adecvat sau culorile de distinctie intre text si fundal, asa cum este sugerat de W3C. Culorile care au aceeasi valoare, dar nuante diferite, pot fi citite cu usurinta de o persoana cu o vedere buna, dar nu si de o persoana daltonica. Este important sa verificati contrastul inainte de a-l aplica pe design.

Folositi culori plate UI, daca este posibil. Aceste culori sunt deschise si au combinatii grozave care nu sunt dureroase pentru ochi. Consultati flatuicolors.com pentru mai multe informatii, bazate pe Flat UI.

  1. Folositi text in loc de imagini

Dupa cum stim cu totii, imaginile fac paginile web mai lente. Cel mai adesea imaginile sunt singura modalitate de a forta browserul web sa afiseze fontul preferat si aspectul exact pe care il doriti. Cu toate acestea, acest lucru ar putea sa nu functioneze. Utilizarea textului real este cea mai buna modalitate de a se combina, mai ales cu designul web responsive. Amintiti-va, motoarele de cautare nu pot citi imagini, dar pot citi text.

  1. Folositi stilul de text alternativ cand decupati textul

S-ar putea sa existe un moment in care trebuie sa taiati textul de pe imagini pentru a crea un text texturat sau imagine. Problema aici este ca nu toate browserele accepta aceasta tehnica.

Cel mai bun mod de a face acest lucru este utilizarea pluginului CSS Browser Selector al lui Paul Irish. Acesta este un plugin usor care detecteaza browserul si manipuleaza stilurile pe care doriti sa apara in anumite browsere.