11 fonturi de web design care vor oferi site-ului dvs. o față nouă

Publicat: 2023-02-02

Fonturile de design web par un aspect mic al site-ului web al companiei dvs., dar, de fapt, au un impact mare asupra conversiilor.

Ce separă „super” de obișnuit? După cum exclamă un personaj de film albastru, cu cap mare, „Prezentare!”

Atunci când proiectați o pagină web, aspectul joacă un rol important în marea schemă a lucrurilor. Să presupunem că s-ar putea să ai o piesă interesantă pe care publicul tău ar putea să o aprecieze. Dacă prezentarea ta este meh sau de-a dreptul atroce, s-ar putea să alungi acel public. Foarte departe.

Din fericire, designul și dezvoltarea web nu trebuie să fie dificile. Trebuie să faceți pagina dvs. web atrăgătoare și să vă atrageți cu adevărat publicul. Așa creați o experiență minunată pentru utilizatorii dvs. În special, alegerea fontului dvs. poate influența dacă un cititor rămâne sau părăsește pagina dvs. web.

Simțiți-vă liber să utilizați aceste fonturi pentru designul paginii dvs. web și să vă atingeți potențialul maxim. Sperăm că vă puteți face o idee generală despre fonturile să alegeți și de ce sunt atât de puternice pentru acoperirea online.

Cum să alegi fonturile pentru design web

Pagina ta web are un aspect definit și unic. Modul în care sunt afișate textele pe acel aspect este cheia succesului tău. Rețineți, totuși, că puteți îmbunătăți acest succes pe baza acestor șase factori:

Lizibilitatea și lizibilitatea
Consecvența mărcii
Dispoziție și ton
Ghid de accesibilitate web
Compatibilitate între browsere
Scalabilitate

1. Lizibilitatea și lizibilitatea

Lizibilitatea este cât de ușor pot distinge utilizatorii dintre personaje. Dacă cititorul dvs. întâmpină dificultăți în a determina dacă un caracter este „S” din „5”, atunci ar putea fi necesar să alegeți un font diferit. Unele fonturi oferă forme diferite pentru caractere similare (cum ar fi „1”, „I” majuscul și „l” minuscul) pentru a le distinge unele de altele.

Lizibilitatea poate fi influențată de alți factori, cum ar fi alegerea culorii primului plan și a fundalului, dimensiunea fontului și greutatea fontului. De exemplu, unele litere pot fi mai lizibile atunci când măriți dimensiunea fontului, dar este lizibil?

În această privință, lizibilitatea este diferită de lizibilitate.

Lizibilitatea este cât de confortabil este un cititor când citește blocuri de text. Acest nivel de confort este influențat și de lizibilitatea textului tău. Dacă un cuvânt este prea mic pentru a distinge literele unul de celălalt, este posibil ca cuvântul să nu poată fi citit. Acesta este, de asemenea, cazul într-un bloc dens de „litere fine” juridice în care se poate citi întregul text, dar nu atât de confortabil pe cât și-ar fi dorit.

2. Consecvența mărcii

Trebuie să vă mențineți prezentarea consistentă. În timp ce vocea mărcii dvs. oferă o bază solidă pentru pagina dvs. web, păstrarea aceleiași identități de-a lungul timpului stabilește cât de serios sunteți în a vă exprima punctul de vedere. Prezentarea dvs. are ca scop spunerea unei anumite povești și invitați clienții să se identifice și să recunoască acea poveste.

Găsiți fonturi care mențin narațiunea pe loc. Dacă sunteți în căutarea unui ton profesional, utilizați fonturi cu aspect profesional. Pentru conținut captivant și prietenos, utilizați fonturi care să fie confortabile la privit. Puteți găsi unul care să se potrivească aproape dacă vă uitați suficient.

3. Dispoziție și ton

Psihologia fonturilor este studiul modului în care fonturile influențează modul în care publicul dvs. vă percepe conținutul. Unele fonturi au fost folosite în mod tradițional în scopuri specifice, iar oamenii s-au obișnuit cu asta. Alte fonturi pur și simplu evocă anumite gânduri și emoții de la cititorii lor. În orice caz, s-ar putea să doriți să utilizați un font care să vă aducă cititorul în starea de spirit pe care doriți să o stabiliți.

Vă puteți juca cu fonturile pentru a stabili această dispoziție. Unele fonturi, de exemplu, sunt mai eficiente pentru anteturi decât pentru textul corpului. Amestecarea și potrivirea fonturilor poate chiar crea o senzație mai dramatică pentru conținutul dvs. și poate scoate emoții mai puternice.

4. Ghid de accesibilitate web

Site-ul dvs. trebuie să fie cuprinzător pentru toți vizitatorii. Se asigură că cei care se confruntă cu dificultăți sau limitări sunt în continuare bineveniți pe site-ul dvs. în același mod ca toți ceilalți. Nu este doar un instrument pentru a genera mai mult trafic pentru afacerea dvs., ci încurajează o comunitate printre toți consumatorii dvs.

Pentru a face acest lucru, designerii folosesc adesea linii directoare pentru a îmbunătăți accesibilitatea web la site-urile lor. Aceste reguli și ghiduri fac conținutul mai ușor de utilizat și mai ușor de înțeles pentru toți vizitatorii. Deși nu este necesară în acest moment, îmbunătățirea accesibilității web este o modalitate bună de a stabili un raport cu baza dvs. de consumatori și de a le arăta că vă pasă și doriți ca ei să facă parte din ceea ce construiți. Cele patru standarde principale sunt:

Perceptibil. Pur și simplu, consumatorii dvs. trebuie să vă înțeleagă conținutul. De asemenea, nu se limitează doar la „a vedea” conținutul. Rețineți că utilizatorii orbi sau cu vedere redusă folosesc un software alternativ de citire de ecran pentru a-i ajuta să navigheze pe internet. Luați în considerare acești utilizatori atunci când vă setați pagina web.
Operabil. Aceasta înseamnă că toți utilizatorii pot accesa și opera toate părțile paginii dvs. web (text, linkuri, audio, video, alte media). În general, majoritatea site-urilor web operabile sunt simple și, prin urmare, ușor de navigat.
De inteles. Utilizatorii tăi trebuie să poată digera toate informațiile pe care le spui. Puteți folosi o limbă comună sau puteți oferi limbi alternative. În mod similar, navigarea pe site-ul dvs. web trebuie să fie organizată intuitiv și natural pentru a ajuta utilizatorii să vă înțeleagă pe dvs. și produsul dvs.
Robust. Conținutul de pe site-ul dvs. ar trebui să fie ușor defalcat și analizat de programe de asistență precum cititoarele de ecran. În acest fel, persoanele cu dificultăți vor face în continuare parte din experiența pe care o oferă site-ul tău.

CITURI RECOMANDATE: Concepte de design web care prioritizează centrarea pe client

5. Compatibilitate între browsere

Trebuie să luați în considerare că unii utilizatori pur și simplu nu doresc să folosească browsere web populare precum Chrome sau Mozilla (dintr-un motiv sau altul). În unele cazuri, aceste browsere alternative folosesc fonturi de înlocuire, cum ar fi Arial sau Times New Roman, pentru a vă afișa textul. Utilizați un font care poate fi afișat corect de majoritatea, dacă nu de toate, browserele.

Cele patru formate de fonturi acceptate de site-uri web sunt:

Tip deschis încorporat (EOT). Acceptat numai de browserele Microsoft (Internet Explorer și Microsoft Edge)
Font True Type/Font tip deschis (TTF/OTF). Fondate de Apple și Microsoft în anii 1980, aceste formate sunt acceptate de toate browserele majore, și anume Chrome, Firefox, Opera, Microsoft Edge și Internet Explorer.
Web Open Font Format (WOFF). Fondat de Mozilla în 2009, acest format este o versiune comprimată a TTF/OTF făcută să se încarce mai rapid
Web Open Font Format (WOFF2). O revizuire a WOFF anterioară, jucătorii săi principali includ Chrome, Firefox și Opera; este conceput pentru a înlocui WOFF și va face acest lucru în cele din urmă

Rețineți că cele mai frecvent utilizate formate în acest moment sunt TTF/OTF și WOFF. Fonturile care folosesc aceste formate pot fi afișate corect în toate browserele acceptate.

6. Scalabilitate

Ați observat vreodată că unele fonturi arată mai bine și mai lin decât altele? Aceste tipuri de fonturi sunt numite fonturi scalabile. Sunt programate să arate la fel, indiferent de dimensiunea textului. Unele fonturi nu sunt programate în același mod, iar textul rezultat pare mai ieftin și mai slab calitativ.

De ce contează scalabilitatea? E simplu. Unii oameni, în mare parte utilizatori mai în vârstă, pur și simplu nu pot citi texte mai mici. Ei trebuie să mărească foarte greu pentru a putea citi ceea ce vrei să citească. Alegerea unui font scalabil le îmbogățește experiența cu pagina dvs. web și, de asemenea, îi face să se simtă incluși ca parte a audienței dvs.

Fonturi populare pentru design web

Acum că ați acoperit elementele de bază în alegerea celor mai bune fonturi pentru pagina dvs. web, iată câteva fonturi populare recomandate de designeri.

1. Deschide Sans

Open Sans este un tip de font „fără flori. Este direct și la obiect și nu se încurcă cu mesajul tău. Open Sans este, de asemenea, surprinzător de foarte versatil. Pare formal, dar i se oferă și un „aspect neutru, dar prietenos” de către designerul său.

Este scalabil, ceea ce înseamnă că îl puteți citi în dimensiuni de text mici și mari. De asemenea, este optimizat pentru interfețe tipărite, web și mobile.

Puteți vedea de ce Open Sans este folosit în mod obișnuit online. De fapt, peste 84 de milioane de site-uri web îl folosesc într-un fel sau altul. Unele dintre aceste site-uri web includ:

Upwork
Vana
Atoll Digital
Revista Ssense

2. Roboto

Roboto este un alt font popular recomandat de designeri. Este un font rigid și geometric, în timp ce prezintă „curbe prietenoase și deschise”. Literele par mai strânse unele față de altele, făcând citirea puțin mai ritmică.

Familia de fonturi Roboto include Roboto Condensed și Roboto Slab, făcând întreaga familie Roboto flexibilă. Este un font care poate fi folosit pentru aproape orice, de la titluri, la antete, până la text simplu și vechi. În orice caz, pare suficient de profesionist și prietenos pentru a fi pus pe pagina ta web.

Nu este de mirare că peste 630 de milioane de site-uri web, inclusiv Google și YouTube, folosesc Roboto în mod religios.

3. Lato

Lato a fost conceput inițial ca un font profesional pentru un site web corporativ. Deoarece clientul a mers într-o direcție diferită, fontul a fost eliberat pentru uz public. Literele arată elegant și elegant, ca o scrisoare scrisă de mână cu tematică rustică.

De asemenea, este ușor pentru ochi, făcând din Lato un candidat serios pentru textul corporal. De asemenea, este foarte bun la dimensiuni mai mari, păstrându-și caracteristicile unice pe măsură ce textul devine mai mare.

Familiaritatea și căldura sunt, de asemenea, teme mari în fața fontului. Lato (vara în poloneză) a fost, de asemenea, proiectat având în vedere senzația de vară. Este rigid, dar nu prea mult, emanând un ton serios, dar reconfortant.

Un bun exemplu de utilizare a lui Lato poate fi găsit în Bundl, un site corporativ de risc.

4. Helvetica

Acesta este un clasic. S-ar putea să fi auzit de acesta și a primit multă recepție mixtă, în funcție de locul în care întrebați. Indiferent, Helvetica rămâne un font solid pentru paginile web. Este o familie de fonturi foarte flexibilă și o puteți avea cu caractere aldine, condensate sau pur și simplu să aveți un font obișnuit pentru pagina dvs. web.

Helvetica a fost proiectat inițial în 1957 pentru a fi un font neutru, pentru a fi folosit aproape oriunde. A îndeplinit acest rol la un tee, impunându-se rapid drept unul dintre cele mai populare fonturi de pe Internet. Fontul face cuvintele mai ușor de citit la distanță și este, de asemenea, perfect pentru titluri. De asemenea, rămâne lizibil și lizibil, indiferent de dimensiunea fontului textului dvs.

Helvetica evoluează constant cu vremurile datorită flexibilității sale. Mărcile din diferite industrii folosesc Helvetica într-un fel sau altul, și anume: BMW, Motorola, Nestle, Microsoft și Apple. Autoritățile guvernamentale precum NASA și Uniunea Europeană prezintă și Helvetica.

5. Proxima Nova

Fostul șef al departamentului de design al Facebook, Cameron Moll, a publicat un articol despre istoria Proxima Nova. El descrie fontul ca fiind „incredibil de versatil pentru interfețele digitale, funcționează ca un cal de muncă la multe dimensiuni diferite și arată remarcabil pe ecranele retină”.

Proxima Nova este un font care a fost menit să surprindă rotunjimea fonturilor precum Futura și geometria fonturilor precum Helvetica. Cu toate acestea, nu este unic în acest sens, deoarece și alte fonturi au încercat să facă același lucru. Gotham a fost mult mai popular decât Proxima Nova la începutul anilor 2000. Moll susține că disponibilitatea timpurie a lui Proxima Nova pe web i-a catapultat statutul de tipar iconic.

De atunci, a devenit cel mai popular font comercial online.

6. Montserrat

Fontul Montserrat a fost inspirat din cartierul brazilian cu același nume. Încearcă să surprindă vibrația tipografiei vechi din Buenos Aires și să o aducă în mass-media modernă. Din această cauză, Montserrat atrage nostalgia și familiaritatea spectatorilor săi. Setează un ton serios, dar prietenos pentru tot felul de materiale promoționale.

Popularitatea sa se datorează scalabilității și, la rândul său, lizibilității. Astfel, utilizarea sa nu se limitează doar la media online, ci și la mediile tipărite precum broșuri și cărți. Manualul grafic al guvernului mexican a stabilit și fontul ca standard pentru mass-media oficială.

7. Raleway

Raleway este un font open-source elegant. Aceasta înseamnă că este gratuit de utilizat și poate să-și reziste cu adevărat în orice design web, în special „W”-ul său unic.

Designerilor le place să folosească Raleway datorită accesibilității sale și, de asemenea, pentru că se combină bine cu alte fonturi. Fontul în sine este ușor de citit și oferă un apel primitor cititorilor. Puteți utiliza Raleway pentru aproape orice proiect potrivit pentru un public larg.

8. Sursa Sans Pro

Source Sans Pro este prima familie de fonturi open-source de la Adobe. Este proiectat să funcționeze deosebit de bine cu interfețele utilizator. Formele sale rotunjite fac literele ușoare pentru ochi, maximizând în același timp spațiile dintre fiecare personaj.

Cea mai notabilă calitate a Source Sans Pro este lizibilitatea sa și puteți distinge cu ușurință personaje similare în virtutea unei alegeri stilistice de design. În esență, Source Sans Pro se referă la accesibilitate. Este ușor de citit și profesional în ton. Universitatea Stanford și Adobe folosesc fontul pentru site-urile sale web.

9. Poppins

Dacă sunteți în căutarea unui ton solid și serios pentru pagina dvs. web, Poppins ar putea fi doar pentru dvs. Literele par puternice și liniare și sunt la fel de directe pe cât puteți obține cu un font.

Ca rezultat, nu va trebui să vă faceți griji că textul dvs. este scalabil. De asemenea, este foarte elegant și simplu. Este o alegere solidă pentru orice pagină web.

Studioul de animație Wonderlust se numără printre cele 8,1 milioane de site-uri web care folosesc fontul.

10. Georgia

Proiectat de Microsoft, Georgia este un font care este destinat să fie citit în format digital. Pare elegant și lizibil, chiar și pe ecrane cu rezoluție scăzută.

Eleganța sa se datorează în mare parte designului său de inspirație romană. Cu toate acestea, asta nu împiedică deloc caracterele să fie lizibile. Ca urmare, experiența de lectură se simte echilibrată atât pe digital, cât și pe hârtie.

Microsoft actualizează în mod regulat fontul pentru a-i oferi un aspect mai modern și mai flexibil. Versiunea actualizată, Georgia Pro, este disponibilă pentru cumpărare. Cu toate acestea, utilizatorii Microsoft pot obține fontul gratuit pe Microsoft Store.

11. Playfair Display

Playfair Display citește ca hârtie de ziar din secolul al XVIII-lea, nu că ar fi un lucru rău. Acest font arată foarte elegant și stabilește un ton foarte profesional pentru pagina dvs. web. De asemenea, oferă o lectură sofisticată și este surprinzător de flexibil. Îl puteți împerechea cu alte fonturi pentru a aduce acasă acel sentiment elegant.

Cum să utilizați eficient fonturile pentru design web

Vi s-a oferit o listă de fonturi de utilizat și cum să identificați fonturile pentru nevoile dvs. A le folosi eficient este un proces complet diferit. Iată câteva lucruri la care trebuie să țineți cont atunci când utilizați fonturi.

1. Împerecherea și combinarea fonturilor.

Nu este neobișnuit să vezi designeri amestecând și potrivind fonturi pentru un efect mai mare. Gândește-te la asta ca prin dulapul tău și să faci un tricou alb simplu să iasă în evidență într-una dintre ținutele tale. Sau aduc ochii oamenilor la acele noi lovituri de la picioarele tale.

În același sens, puteți direcționa cititorii către anumite puncte din pagina dvs. web, chiar dacă nu sunt atrăgătoare de la sine. Trebuie doar să structurați totul în jurul lui pentru a vă asigura că oamenii se uită cu adevărat în acel loc specific.

Aceasta include utilizarea de fonturi diferite în scopuri diferite pe aceeași pagină web sau ceva la fel de simplu precum setarea unei scheme de culori estetice. Maximizarea psihologiei culorilor poate chiar îmbunătăți conversiile pe pagina dvs. web.

2. Crearea fontului personalizat.

Dacă ești suficient de creativ, poți chiar să-ți creezi propriul font pentru scopurile tale! Unele servicii, cum ar fi Calligraphr, vă permit să vă transformați propriul scris de mână într-un format digital. Dacă doriți să creați un font pe care alții să-l poată utiliza, trebuie doar să fiți conștienți de faptul că este de obicei un proces de proiectare lung.

3. Drepturi de licență și utilizare.

Majoritatea fonturilor sunt gratuite și pot fi utilizate într-o varietate de scopuri, fie ele personale sau comerciale. Cu toate acestea, unii designeri de fonturi pun limite în utilizarea creației lor. De exemplu, trebuie să plătiți designerul pentru a utiliza un font în scopuri comerciale.

4. Testare și optimizare.

O etapă importantă înainte de lansare pentru orice pagină web este testarea și optimizarea. Trebuie să verificați din nou dacă textul este afișat corect și cu fontul potrivit, dacă schema de culori este plăcută ochiului etc.

CITURI RECOMANDATE: Cum să creați un flux de lucru de proiectare și dezvoltare web fără întreruperi

Configurarea fonturilor pentru utilizare pe site-uri web

Acum că aveți o idee despre fonturile care sunt utilizate în mod obișnuit online, sunteți gata să începeți să le utilizați. Iată cum puteți începe:

1. Descărcați și instalați fonturile.

Unele suite creative au deja fonturi preinstalate care sunt gata de utilizare. Cu toate acestea, dacă găsiți că un font care vă place nu face parte din catalogul dvs., puteți pur și simplu să le căutați online. De asemenea, puteți alege ce format doriți să descărcați (de exemplu, dacă veți folosi TTF/OTF, WOFF sau ambele).

Multe fonturi open source pot fi descărcate gratuit, dar unele fonturi trebuie achiziționate înainte de a le utiliza în anumite scopuri. Dacă intenționați să utilizați un font în scopuri comerciale, asigurați-vă că citiți termenii de licență ai fontului înainte de a o face.

După ce găsiți un font, descărcați-l pe computer. Majoritatea fonturilor vor veni în format .ZIP, așa că trebuie să le extragi. Doar faceți clic dreapta pe fișier și selectați „Extract Here” pentru a face acest lucru. Veți ajunge cu un fișier de font care este gata de instalat.

Doar faceți dublu clic pe fișier și apoi apăsați „Instalare” pe ecranul de previzualizare care apare.

2. Încorporați fonturile pe site-ul dvs. web.

Dacă intenționați să lucrați singur, puteți răsfoi diferite ghiduri, cum ar fi acesta, pentru a vedea cum puteți încorpora fonturile folosind diferite platforme web.

Rețineți că există o listă de verificare a designului web înainte de a vă lansa pagina web pentru public.

3. Asigurați-vă compatibilitatea între browsere.

Fonturile mai populare și utilizate în mod obișnuit sunt deja în versiunile TTF/OTF sau WOFF, ceea ce înseamnă că sunt afișate corect în toate browserele majore. Cu toate acestea, este posibil să întâlniți un font personalizat care nu arată tocmai așa cum este prevăzut, deoarece are un format diferit.

Dacă doriți să rămâneți cu un font, puteți încerca câteva ghiduri online și puteți face textul compatibil cu browserul încrucișat. Este, totuși, recomandat să utilizați fonturi care au formatele menționate mai sus, astfel încât designul dvs. web să nu fie pus în pericol.

Sfaturi de optimizare a fonturilor web

Este posibil să întâmpinați probleme cu timpul de încărcare a paginii dvs. web. În zilele noastre, timpii lungi de încărcare sunt nenorocirea oricărei persoane care navighează pe web. Utilizatorii tăi și potențialii clienți nu sunt diferiti. Iată cum puteți evita timpii lungi de încărcare:

1. Nu folosi prea multe fonturi.

Acesta este destul de simplu. De obicei, cu cât folosiți mai multe fonturi personalizate pe site-ul dvs. web înseamnă că vă încetiniți serviciul de găzduire web.

Regula generală de utilizare a fonturilor este să rămâneți la două clase de fonturi: una pentru antet și titluri și una pentru textul corpului. În acest fel, puteți evita supraîncărcarea serviciului dvs. de găzduire și este mai puțin solicitant pentru echipa dvs. de proiectare. Vizionatorii dvs. pot fi, de asemenea, dezactivați dacă schimbați fonturile frecvent.

2. Utilizați fonturi optimizate pentru fiecare browser.

Din păcate, niciun format nu funcționează în toate browserele. Trebuie să utilizați diferite formate atunci când creați o pagină web. Cu Google Analytics, puteți verifica ce browsere și dispozitive sunt cele mai populare în rândul vizitatorilor dvs.

Dacă vă simțiți confortabil cu browserele mai vechi care folosesc fonturi alternative, puteți oricând să utilizați comenzi rapide. Dar din nou, asta nu este recomandat.

Recomandări cheie

Acum că praful s-a așezat, este timpul să vă puneți la treabă sucuri creative. Sunteți liber să utilizați fonturile din această listă sau să explorați Internetul pentru fonturi personalizate mai potrivite nevoilor dvs. În orice caz, iată trei concluzii principale din acest articol:

Utilizați un font compatibil cu vocea mărcii dvs. Îmbunătățește relațiile cu publicul dvs. și dă tonul noilor clienți.
Faceți marca dvs. centrată pe client. Un aspect important al designului web este că creați ceva pentru ca utilizatorii să se bucure; nu doar tu.
Nu vă fie frică să experimentați. Pentru asta este procesul de proiectare. Ar trebui să explorezi ce funcționează și ce nu.

Luați legătura cu Propelrr astăzi pentru a afla mai multe despre conceptele de web design. Suntem mai mult decât bucuroși să vă ajutăm. Dacă aveți nevoie de mai mult ajutor sau de mai multe informații, conectați-vă cu noi prin Facebook, Twitter sau LinkedIn.

Pentru mai multe sfaturi despre cum să creați site-uri web și aplicații centrate pe utilizator, asigurați-vă că vă abonați la buletinul informativ Propelrr pentru a obține acces instantaneu.