Conectarea fonturilor web folosind @font-face. Problemă legală a utilizării fonturilor

Text îngroșat

Text îngroșat

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

Barat

Capacitățile atributelor de stil

Pe lângă etichetele descrise, există mai multe moduri de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare al fonturilor:

1) font-family – proprietatea stabilește familia de fonturi. Este posibil să enumerați mai multe valori.
Schimbarea fontului în html la următoarea valoare va avea loc dacă familia anterioară nu este instalată pe sistemul de operare al utilizatorului.

Sintaxa de scriere:

familia-font: font-name [, font-name[, ...]]

2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML.
Sintaxa de scriere:

font-size: dimensiune absolută | dimensiune relativă | sens | interes | moşteni

De asemenea, puteți seta dimensiunea fontului:

• În pixeli;
• În termeni absoluti ( xx-mic, x-mic, mic, mediu, mare);
• În procente;
• În puncte (pt).

Dimensiunea fontului: 7

Dimensiunea fontului: 24px

Dimensiunea fontului: x-mari

Dimensiunea fontului: 200%

Dimensiunea fontului: 24 pt

stil font: normal | cursiv | oblic | moşteni

Valori:

• normal – ortografie normală;
• italic – italic;
• oblic – font înclinat spre dreapta;
• inherit – moștenește ortografia elementului părinte.

Un exemplu despre cum să schimbați fontul în html folosind această proprietate:

font-style:moștenire

stil font: cursiv

stil font: normal

stil font: oblic

font-variant: normal | cu majuscule mici | moşteni

Un exemplu despre cum să schimbați fontul în html cu această proprietate:

font-variant:moștenire

font-variant:normal

font-variant:small-caps

greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Valori:

• bold – setează fontul html la bold;
• bolder – mai îndrăzneț față de normal;
• mai ușoară – mai puțin saturată față de normal;
• normal – ortografie normală;
• 100-900 – setează grosimea fontului în echivalent numeric.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

proprietatea fontului html și culoarea fontului

Fontul este o altă proprietate a containerului. În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor. sintaxa fontului:

font: font-size font-family | moşteni

Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:

• legenda – pentru butoane;
• pictogramă – pentru icoane;
• meniu - meniu;
• mesaj-box – pentru casete de dialog;
• small-caption – pentru controale mici;
• status-bar – font bara de stare.

În acest tutorial de articol vă voi spune cum să vă creați propriul font pentru un site web folosind pictogramele pe care le-ați creat singur. Tot ce avem nevoie pentru aceasta este un program pentru crearea de grafică vectorială (Adobe Illustrator sau Inkspcape) și acces la Internet Deci, să începem! Puteți descărca toate imaginile, pictogramele și fontul CSS utilizate pentru aceasta la sfârșitul articolului.

Pentru acest tutorial vom face ceva simplu. Pentru prima pictogramă vom desena o stea obișnuită. Pentru a doua icoană - un vultur cu litera W înăuntru. Este destul de ușor de desenat și puteți crea orice forme și combinații. Am folosit ilustratorul în aceste scopuri.

După ce ați terminat partea creativă, creația dvs. trebuie salvată în format SVG. Faceți clic pe „Salvare ca” și selectați tipul de fișier ca SVG. Acum puteți continua direct la crearea fontului.

În aceste scopuri, folosim serviciul popular și gratuit IcoMoon.

Primul lucru de făcut este să creați un nou proiect, așa că faceți clic pe meniul din colțul din stânga sus și faceți clic pe „Proiect nou”. Apoi, încărcăm fișierele noastre svg gata făcute după ce facem clic pe butonul „Importați pictograme”. După parcurgerea acestor pași, ar trebui să vedeți o imagine ca aceasta pe monitor:

Acum avem posibilitatea de a schimba codul pentru fiecare pictogramă (în cazul nostru va fi e600 și e601), numele fontului nostru, prefixul CSS și așa mai departe. Toate acestea se fac în „Preferințe”. De asemenea, putem vedea fontul în acțiune făcând clic pe linkul „Activați utilizarea rapidă” - care ne va permite să obținem un link temporar către fontul nostru, precum și opțiunea de a vizualiza codul în CodePen.

După ce ați configurat totul, faceți clic pe butonul „Descărcați” din partea de jos a paginii și descărcați arhiva. În aceste arhive veți găsi fontul dvs. în formatele ttf, eot, svg și woff + o pagină demo cu fontul.

Utilizarea pictogramelor de pe site

Acum, tot ce ne trebuie este să includem fontul CSS folosind @font-face și să specificăm alți parametri (toți sunt scrisi în fișierul css din arhiva pe care ați descărcat-o.

@font-face ( familia de fonturi: "wdm-eagle"; src: url ("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; vorbiți: none; font-variant: normal; -netezire: tonuri de gri ) .wdm-star:before ( conținut: "\e600"; ) .wdm-eagle:before ( conținut: "\e601"; )

Acum putem folosi fontul nostru în codul HTML astfel:

Specificarea numelui clasei pentru etichetă primim icoana noastră.

Vă prezentăm o selecție de servicii gratuite pentru designeri. Aceasta este prima opțiune, intenționăm să o extindem în viitor prin adăugarea de noi secțiuni și instrumente.

Fonturi

• Google Fonts este biblioteca de fonturi preferată a tuturor. Vă permite să selectați și să descărcați diferite fonturi pentru toate ocaziile.
• 1001 fonturi gratuite - bibliotecă de fonturi. Are o navigare ușoară - fonturile sunt sortate atât alfabetic, cât și după tip. Există o secțiune de fonturi rusești.
• Fontstruct este un designer de fonturi online. Un instrument foarte simplu care vă va permite să vă creați propriul font. Puteți desena nu numai cu pătrate standard, ci și cu alte forme - puncte, colțuri rotunjite etc. Pentru un începător, este un instrument ideal pentru a încerca și a vedea tipografia în acțiune.
• Font Squirrel este una dintre cele mai mari biblioteci de fonturi. În plus, puteți încărca o imagine și puteți obține numele fonturilor folosite în ea. Există un magazin de fonturi și chiar un magazin de îmbrăcăminte cu logo-uri.
• Type light este un editor de fonturi cu funcții complete. Vă permite să creați, să editați și să convertiți fonturi OpenType, TrueType și PostScript. Trebuie descărcat și instalat. Versiunea gratuită are o funcționalitate limitată în comparație cu versiunea gratuită. Dar este suficient să creezi un font simplu.
• What Font este este un serviciu online pentru selectarea fonturilor pentru site-uri web. Descărcăm fișierul fontului, indicăm adresa URL a site-ului și vedem cum va arăta fontul descărcat pe site. Serviciu convenabil.
• 1001 Fonturi – bibliotecă de fonturi (mai mult de 15.000). Navigare ușoară – fontul poate fi selectat după dimensiune, tip, temă, design etc. Meniul vă permite să personalizați rezultatul, ceea ce face posibilă vizualizarea fiecărui font în diferite opțiuni: dimensiune, stil etc.
• Font Flame este un serviciu online pentru selectarea unei perechi de fonturi compatibile. Funcționează foarte simplu - pe pagina principală există o foaie cu două inscripții realizate în fonturi diferite. Dacă ți-a plăcut, dă clic pe „Iubește” dacă nu ți-a plăcut, dă clic pe „Ură”. Apoi le puteți vizualiza din nou pe cele selectate. Făcând clic pe numele fontului, se deschide Google Fonts.
• Typecast – selectarea unui font pentru prototip. Puteți vedea cum va arăta fontul pe orice dispozitiv. Este necesar să se identifice diferite tipuri de text - titluri, ghilimele etc. Puteți alege un tip de literă, o dimensiune, un stil și puteți seta indentări. Veți vedea pagina viitoare în fonturile pe care le-ați instalat. Un mare plus este alegerea aspectului (o coloană sau mai multe, aranjamente diferite în bloc).
• Wordmark - vă permite să selectați fontul instalat pe computerul utilizatorului pentru text, logo sau titlu. Când introduceți text într-un câmp, acesta îl arată în diferite fonturi. Puteți selecta dimensiunea, înregistrarea, afișarea în alb-negru sau invers. Opțiunile care vă plac sunt publicate pe Twitter sau pe Facebook - la alegerea utilizatorului. Poate fi trimis prin email.

Fotografii de stoc

• Unsplash este un stoc de fotografii actualizat constant. Colecțiile sunt împărțite pe teme. Puteți găsi orice, de la „afro-american” la „natură”. Fiecare fotografie are propria sa evaluare, le puteți vedea pe cele mai bune sau pe cele noi.
• FoodiesFeed – fotografii cu alimente. Imaginile sunt împărțite pe categorii. Puteți alege cele mai bune, exclusive, pictograme, machete etc.
• Fotografii gratuite de referință - o listă uriașă de imagini din „viața reală”. În principal fotografie de peisaj și natură. Navigare neplăcută, toate fotografiile de pe pagina principală apar la derulare.
• Little Visuals – fotografii de înaltă calitate ale peisajelor și clădirilor. Puteți descărca o arhivă cu cele mai bune fotografii postate în timpul săptămânii. Fotografiile sunt etichetate cu hashtag-uri, dar nu sunt clasificate.
• Gratisography este o bibliotecă imensă de fotografii gratuite. Toate fotografiile sunt împărțite în șase teme: oameni, grimase, orașe, obiecte, natură și animale. Puteți căuta după cuvinte.
• Moarte la Stock Photo – fotografii de stoc. Nu poți doar să te uiți și să alegi. Ei fac o selecție cu o lună în avans și vă permit să o descărcați după ce ați introdus e-mailul. Arhiva cântărește aproximativ 11 MB. Cele mai bune fotografii și un link de descărcare sunt trimise prin e-mail.
• Superfamous – o colecție mare de fotografii dintr-un unghi neobișnuit. Setul este mic, dar interesant.
• Biblioteca de modele - modele și texturi. Setul este destul de mare, șabloanele sunt neobișnuite. Ele sunt înlocuite prin defilare și treptat. Puteți vedea cum va arăta șablonul pe întregul ecran sau pe o parte a acestuia.
• Stoc vechi nou – fotografii de epocă din arhive. Sunt puține fotografii gratuite, dar apar în mod regulat altele noi.
• Pexels – un număr mare de fotografii pentru toate ocaziile. Sunt împărțite pe subiecte, foarte ușor de căutat.
• Jay Mantri - un set mare de fotografii. Nu există o clasificare ca atare, o puteți privi pe lună.

Grafică stoc

• Brusheezy – pensule, șabloane, texturi și multe altele gratuite pentru Photoshop. 12 categorii, fiecare cu subcategorii. Alegerea este uriașă.
• Iconfinder – pictograme, atât plătite, cât și gratuite. Puteți descărca în formate ICO, PNG, ICNS, SVG.
• Brushez este o colecție mare de pensule pentru Photoshop. Pe lângă acestea, există și primitive vectoriale, forme, șabloane, stiluri. Fiecare secțiune este împărțită în subsecțiuni. De exemplu, există mai mult de 20 de categorii pentru pensule.
• Vecteezy este o bibliotecă de grafică vectorială, inclusiv imagini și ilustrații. Un număr mare de categorii și un număr mare de grafică.
• Iconbird este un serviciu de căutare a pictogramelor în limba rusă. Puteți introduce un subiect și obține un set de pictograme sau puteți răsfoi după categorie.
• Icons8 este un serviciu în limba rusă care oferă peste 42.000 de pictograme pe diverse subiecte.

Infografice

• Vizualize este un serviciu online pentru crearea de infografice „Despre mine”. În esență, creează un CV grafic.
• Canva este un instrument simplu pentru a crea orice design. Vă permite să proiectați o prezentare, afiș, postare pe rețelele de socializare, cărți, scrisori, materiale și multe altele. Totul se face pe baza de șabloane, textul se schimbă. Dar există o mulțime de șabloane din care să alegeți.
• Easelly – crearea de infografice bazate pe șabloane. Editorul online încorporat vă permite să schimbați designul, să plasați elemente suplimentare și să schimbați textul.
• Infogram este un serviciu online pentru crearea de infografice și diagrame interactive. Nu toate funcțiile sunt disponibile, va trebui să cumpărați un cont.
• Visage este un instrument simplu pentru crearea oricărui conținut vizual (diagrame, infografice, imagini de blog etc.). O mulțime de șabloane, editor simplu. Unele caracteristici sunt plătite.
• Gliffy este un serviciu online pentru crearea de diagrame. Editorul funcționează pe principiul Microsoft Visio.
• Visme este un instrument online pentru crearea de prezentări și infografice. Peste 1000 de șabloane. Editorul vă permite să adăugați text (titluri, liste, citate și obișnuite), text animat și widget-uri. Într-un cont gratuit îl puteți descărca ca fișier JPG.
• Piktochart - Creați grafică de înaltă calitate - prezentări, infografice sau materiale tipărite. Încarcă PNG, JPG de diferite dimensiuni.
• Drawio este un serviciu online convenabil pentru crearea de diagrame. Puteți salva pe dropbox și servicii similare sau pe disc.
• Venngage – creare ușoară de infografice, postere, rapoarte, materiale pentru rețelele de socializare etc. În versiunea gratuită, oferă doar un link către publicație. Trebuie să plătiți pentru descărcare.
• Cacoo este un serviciu online pentru desenarea de diagrame și hărți de site. Poate cel mai bun din punct de vedere al capacităților. Un număr mare de instrumente și șabloane. Puteți exporta în PNG, PDF, SVG, PPT etc.
• Creately este un serviciu de diagrame online. Disponibil doar pentru publicare. Există o taxă pentru descărcare.
• Lucidchart este un serviciu online pentru crearea de diagrame și desene. Este posibil să importați o diagramă Microsoft Visio. Exportă în PDF, PNG și JPG. Funcționalitate plătită disponibilă.

Culori

• Color Hunt – selecție de combinații de culori. Puteți selecta până la patru culori. Există soluții gata făcute din care să alegeți.
• TinEye – analizează site-ul și afișează o listă de resurse care folosesc o imagine de pe site.
• ColorZilla – vă permite să creați culori și degrade. Afișează proprietățile css pentru ei.
• Adobe Color CC – crearea de scheme de culori.
• Colicious – apăsați bara de spațiu și generați o nouă culoare.
• Schema de culori - selecția de scheme de culori. Există o versiune în engleză și rusă. Vă permite să selectați culorile pentru site. Are reglaj fin și arată codul de culoare. În cele din urmă, vă permite să vizualizați pagina în schema de culori selectată. Cel mai mare avantaj este vizualizarea gamei în ceea ce privește abaterea percepției culorilor. De asemenea, vă permite să alegeți diferite modele de culoare. Salvează Gimp, CSS, PNG etc. în paletă. Are un convertor de culoare pentru conversia de la un model de culoare la altul.
• Paletton este un instrument pentru a crea combinații de culori. Nu este diferit de Colorscheme.
• Pictaculos – analizează paleta unei imagini PNG, JPG sau GIF. Încărcați o imagine și obțineți un set cu toate culorile prezente în ea.
• Hex Color Tool – instrument de selectare a culorii. Folosiți glisoarele pentru a regla culoarea și puteți alege luminozitatea. Culoarea selectată este apoi salvată. Puteți alege o paletă.
• (Un)clrd este un plugin de browser care elimină toate culorile și lasă site-ul în alb-negru.
• BrandColors - cea mai mare colecție de coduri de culoare oficiale ale mărcii. Selectați numele mărcii și descărcați numele culorilor sale, inclusiv fișierul css.
• Colortyper - selecție de culori dintr-un unghi neobișnuit. Ecranul arată simboluri multicolore care se intersectează. Rezultatul intersecției este o nouă culoare. Pare interesant.

Inspiraţie

• Dribbble - Cea mai mare comunitate de designeri. Muncă, comunitate, comunicare - puteți găsi orice aici.
• Freebbble - șabloane și modele de la Dribbble. Unele lucruri pot fi descărcate gratuit, altele pot fi achiziționate. Puteți găsi șabloane pentru CMS, designeri, pictograme, machete, șabloane pentru site-uri web proiectate și multe altele.
• Muzli - Inspirație zilnică pentru design. O resursă pentru designeri cu exemple ale celor mai neobișnuite lucrări.
• Awwwards - cele mai bune dezvoltări ale designerilor. Organizat ca un site de vot comunitar. Site-ul zilei, lunii, anului etc. este selectat un număr mare de modele, videoclipuri, dezvoltări.
• Design You Trust este o comunitate de designeri care împărtășesc cele mai recente tendințe, știri, portofolii, modele și anunțuri creative.
• E-mailuri foarte bune - O colecție imensă de e-mailuri bine concepute. Alegeți un șablon și obțineți codul său html, css și js. Puteți schimba textul, imaginile etc.
• Fubiz – publicații din domeniul designului și creativității. Puteți găsi fotografii, design, grafică, videoclipuri etc. Totul este împărțit pe categorii.
• Designspiration este o colecție de modele în stil Pinterest. Un număr mare de idei și exemple - tipografie, logo-uri, litere și multe altele.
• Behance este o colecție de portofolii de la profesioniști. Puteți lăsa un post vacant sau un CV.
• Mobile-patterns – bibliotecă de capturi de ecran iOS și Android. Totul este împărțit în secțiuni. Puteți găsi multe idei.
• One Page Love este o galerie cu cele mai bune modele de pagini web. Puteți cumpăra șabloane și teme. Există și gratuite.
• Uispace este o resursă pentru designeri. Puteți descărca gratuit PSD, schiță, fonturi, machete etc.

Editori grafici

• DAZ 3D - Modelare 3D. Înregistrați-vă și descărcați aplicația desktop.
• Gimp este un analog gratuit al Photoshop. Vă permite să personalizați o grilă modulară, să creați ghiduri, să lucrați cu straturi, să adăugați efecte etc. Este un bun înlocuitor gratuit pentru Photoshop. Este extensibil - puteți descărca pluginuri suplimentare.
• Blender - modelare 3D, animație, randare, sunet, video. Vă permite să creați jocuri. Editor cu creștere rapidă, foarte popular.
• Aviary este un serviciu de editare foto online. Multe opțiuni, inclusiv Efect de ochi roșii, redimensionare etc.
• Pixlr este un editor foto online și un editor grafic separat. Ultimul arată ca Photoshop. Salvează pe disc.
• BeFunky este un serviciu de editare foto online. Efecte, cadre, grafică, retușuri și multe altele. Există o interfață în limba rusă.
• Inkscape este un editor complet de grafică vectorială open source. Acceptă capabilitățile formatului SVG - lucrul cu forme, contururi, text, vectorizarea graficelor raster etc. Pe lângă procesarea imaginilor vectoriale, vă permite să creați un șablon de site web și să-l tăiați - este prezentă o grilă modulară. Vă permite să desenați fundaluri, bannere, logo-uri vectoriale etc.
• IconEdit2 este un program foarte simplu pentru desenarea pictogramelor. Are filtre. Vă permite să exportați o imagine pentru Android și Apple. Puteți regla adâncimea culorii, puteți roti și ajusta pictograma. Suportă transluciditate, mai multe imagini pentru fiecare fișier ICO și anti-aliasing în toate instrumentele de desen.
• Falco GIF Animator este un program pentru crearea de animații cadru cu cadru și pictograme animate. Puteți descărca multe programe diferite din resursă.
• Krita este un editor profesionist de desktop open source. Disponibil pentru diferite sisteme de operare.
• Boxy-SVG este un editor de grafică vectorială similar cu Adobe Illustrator, Sketch și Inkscape.
• Photopos este un program multifuncțional, cu funcții de editor foto, editor grafic și aplicație pentru crearea grafică pe computer.
• 5Dfly este o aplicație gratuită de procesare a fotografiilor în lot. Poate crea prezentări de diapozitive folosind PowerPoint. Puteți descărca separat convertizorul PDF.
• PaintStar este un editor de imagini gratuit. Interfața este foarte asemănătoare cu Paint, dar are mai multe opțiuni. Straturi, de exemplu.
• PhotoScape este un editor foto simplu. Are funcții de reglare a luminozității și culorii, balansul de alb, corectarea luminii de fundal, cadre, baloane, mod mozaic, adăugare de text, desen de imagini, decupare, filtre, eliminare ochi roșii, colorare, pensulă, ștampilă clonă, perie cu efect etc.

Salutare tuturor! Astăzi, ca parte a secțiunii de web design, vreau să vorbesc despre fonturile care ar trebui folosite la dezvoltarea unui site web.

De regulă, nu toată lumea se gândește la ce fonturi ar trebui folosite pentru partea de conținut a site-ului. Selectarea fonturilor frumoase pentru un site web este cea mai importantă parte a dezvoltării designului. Deoarece lizibilitatea informațiilor site-ului depinde de această parte, iar acesta, după cum știm, este cel mai important lucru de pe site. Din acest motiv, această problemă ar trebui luată foarte în serios.

Dar puteți utiliza doar fonturi în designul site-ului web care sunt disponibile viitorilor vizitatori ai site-ului. Acest lucru se face pentru a se asigura că paginile sunt afișate corect pentru toți utilizatorii, cu sisteme de operare și browsere diferite. În caz contrar, dacă utilizați fonturi non-standard, atunci majoritatea vizitatorilor vor vedea totul diferit și, în cele mai multe cazuri, într-un mod inestetic. Din acest motiv, se recomandă utilizarea fonturilor standard enumerate mai jos. Lista de fonturi include fonturi care sunt instalate pe sistemul de operare Windows XP și o versiune ulterioară.

În acest articol nu iau în considerare fonturile din alte sisteme de operare. Un designer de layout cu experiență ar trebui să cunoască compararea fonturilor în diferite sisteme de operare, iar în timpul aspectului va scrie acest punct în stiluri CSS.

Practic, la dezvoltarea părții de conținut a designului, sunt utilizate două tipuri de fonturi:

• fonturi serif
• fonturi sans serif

Fonturi serif- (serif în engleză - serif) fonturi al căror stil începe și se termină cu linii. De exemplu Times New Roman.

Fonturi sans serif(fonturi tocate) - (engleză sans-serif - sans serif) fonturi cu linii stricte, drepte, fără serif. De exemplu Arial.

Mai jos puteți vedea o captură de ecran a fonturilor serif și sans serif.

Fonturi pentru web design:

• Arial
• Arial Black
• Arial Narrow
• Cartea Antiqua
• Gotic de secol
• Comic Sans MS
• Curier Nou
• Franklin Gothic Mediu
• Georgia
• Impact
• Consola Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• Linotipul Palatino
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings (diverse simboluri și mărci)
• Aripi (diverse simboluri și semne)

De asemenea, aș dori să remarc un astfel de lucru precum absența caracterelor cursive într-un număr de fonturi, în loc de caractere cursive, acestea folosesc slant, ceea ce face textul dificil de citit;

Dintre fonturile standard din Windows care nu au cursive:

• Arial Black
• Comic Sans MS
• Franklin Gothic Mediu
• Impact
• Consola Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Deoarece am menționat fonturi care nu au cursive, aș dori să remarc și faptul că există fonturi care sunt inițial fonturi aldine. Din aceste motive, nu are rost să folosim stiluri care indică font aldine, deoarece rezultatul nu va fi cel de care avem nevoie.

Există un număr mare de moduri de a găsi fontul potrivit pentru site-ul dvs. web. De exemplu, puteți utiliza servicii cu biblioteci uriașe de fonturi care necesită un abonament plătit.

Dacă aveți un buget limitat sau experimentați cu un proiect mic, puteți utiliza fonturi web gratuite care sunt disponibile public. Găsirea fontului web potrivit pentru site-ul dvs. poate consuma mult timp, așa că vă prezentăm o selecție dintre cele mai bune dintre ele.

1. Montserrat

Pe măsură ce tipografia evoluează, se îndepărtează de afișele și semnele urbane de epocă. Creatorul acestui font a încercat să păstreze frumusețea tipografiei afișelor urbane pe care le-a văzut pe străzile din Buenos Aires.

2. Abril Fatface

Abril Fatface face parte dintr-o familie mare de fonturi care vine în 18 stiluri create în scopuri diferite. Acest font are o prezență puternică și elegantă, ceea ce îl face o soluție excelentă pentru a crea titluri atrăgătoare. Cel mai adesea este combinat cu Lato, Open Sans și Droid Sans.

3. Afișarea Playfair

Având în vedere înălțimea x semnificativă și indicele mici ale literelor, Playfair Display este potrivit și pentru scrierea unui titlu, mai ales dacă spațiul este limitat. Se potrivește bine cu Georgia și este adesea folosit cu Oswald, Lato și Arvo.

4. GT Walsheim

Folosit astăzi pe multe bloguri, GT Walsheim este un reprezentant al sans-serifului geometric și face parte din familia Grilli Type. Trebuie să plătiți pentru un set complet de fonturi, dar Grilli Type oferă o probă gratuită a GT Walsheim.

5. Merriweather

Dacă citirea pe ecran este o prioritate pentru proiectul dvs., consultați Merriweather, care a fost creat în acest scop. În plus, acest font este în mod constant îmbunătățit.

6. Josephine Sans

Josefin Sans este inspirat de designul suedez de epocă și prezintă o estetică elegantă, geometrică.

7. Gravitas One

Gravitas One se bazează pe „UK fat face”, un font publicitar îndrăzneț care a apărut în timpul revoluției industriale din Anglia. Acest font arată grozav la scară medie până la mare și este potrivit pentru titluri, titluri și file.

8. Jura

Literele acestui font repetă formele literei Kaya-li. Conține și glife ale alfabetului chirilic și grecesc. Este disponibil în greutăți ușoare, normale, medii și îndrăznețe.

9.Liga gotică

Proiectat inițial de Morris Fuller Benton pentru American Type Founders Company în 1903, League Gothic a găsit o nouă utilizare cu o actualizare și adăugarea de noi glife.

10. fiord

Fjord este un font serif creat inițial pentru cărți tipărite și este deosebit de potrivit pentru a încadra text lung într-un format de tipărire mic. Poate fi folosit pentru a crea o cantitate mare de conținut text pe site, deoarece fontul are o structură clară, serifi proeminente și capete și picioare lungi și elegante.

11. Nemuritoare

Familia de fonturi Amaranth are un design italic non-oblic, cu puțin contrast și curbe vizibile. Toate cele trei stiluri Amaranth se potrivesc bine cu aproape orice alt font. Vă puteți juca cu acest font - experimentați și alegeți cel mai bun.

12. Poli

Acest font cu contrast mediu a fost creat inițial pentru limba indigenă Wayuunaiki, care necesită glife largi. Are tulpini mici și o înălțime x mare, ceea ce îl face deosebit de util la dimensiuni mici.

13. Gentium Basic

Acest font a fost creat ca font multilingvistic, inclusiv litere latine și grecești, precum și suport chirilic și avansat în versiunea Gentium Plus. Gentium Basic și Gentium Book Basic sunt disponibile într-o versiune web gratuită, dar sunt limitate doar la alfabetul latin.

14. Deschide Sans

Open Sans este un reprezentant al grotescurilor umaniste. Acest font este foarte lizibil și se adaptează atât la interfețele web, cât și la cele mobile. Este un font neînclinat, cu un stil simplu de litere, care se caracterizează printr-un aspect neutru, dar suficient de plăcut încât să poată fi folosit într-o varietate de scopuri.

15. Registrul obișnuit

Este un font multifuncțional cu o înălțime x mare, contrast puternic de culoare și serif bine definite care contribuie la lizibilitatea textului. Acest font arată bine atât în ​​tipărire, cât și pe un ecran cu rezoluție scăzută.

16. Signika

Acest font web gratuit este reprezentativ pentru sans serif. Contrastul scăzut și înălțimea x ridicată permit Signika să se afișeze bine pe ecran. Selecția largă de pictograme include simboluri, pictograme și săgeți.

17. Josefin Slab

Creat după canoanele unui font geometric tipic anilor 1930, cu adaos de trăsături scandinave, Josefin Slab are caracteristicile unui font slab și amintește de fontul de mașină de scris. Interesant este că înălțimea sa x este jumătate din înălțimea unei majuscule.

18. Forum

După cum sugerează și numele, acesta este un font roman care este bun pentru titlurile cu majuscule, dar potrivit și pentru afișarea textului. Proporțiile elegante ale acestui font amintesc de arhitectura clasică cu arcade semicirculare, cornișe orizontale și coloane verticale.

Numit după unul dintre cele mai faimoase orașe mayașe, Tikal Sans are trăsături de glife care au fost folosite în scrierea civilizației sud-americane. Creatorul său a ales o înălțime x mare, care conferă fontului un aspect modern și are un efect benefic asupra lizibilității sale, iar selecția mare de stiluri îi permite să fie utilizat într-o varietate de scopuri.

20. Arvo

Potrivit atât pentru tipărire, cât și pentru web, acest font geometric este disponibil în romană, italic, roman bold și bold italic. Contrastul scăzut al Arvo îi îmbunătățește lizibilitatea pe ecran.

21. Bevan

Bevan a fost creat pe baza fontului tradițional al plăcii din anii 1930. Literele au fost digitizate, primite o nouă formă și optimizate pentru versiunea web. Acesta este unul dintre puținele fonturi super îndrăznețe care sunt potrivite pentru site-uri web.

22. Vechiul Standard TT

Old Standard TT s-a bazat pe fontul Modern serif, care a fost popular la sfârșitul secolului al XIX-lea și începutul secolului al XX-lea și apoi a fost uitat mult timp. Acest font este potrivit pentru a adăuga stil unui anumit tip de conținut, cum ar fi cercetări științifice sau texte în greacă sau chirilică.

23. Creon

Ideal pentru site-uri web de știri și bloguri, acest font serif împărtășește, de asemenea, caracteristicile unui font slab, dar echilibrul și contrastul scăzut îl fac pe Kreon mult mai personal.

24. Droid Sans

Droid Sans a fost optimizat pentru o lizibilitate maximă chiar și în interfețe mici, cum ar fi meniurile de pe ecranele telefonului mobil. Acesta este un font neutru, non-oblic, cu forme de litere simple și deschise.

25. Italiana

Creatorul acestui font a fost inspirat din caligrafia italiană clasică, așa că fontul va fi foarte util pentru proiectele în care trebuie să adăugați eleganță. Italiana este, de asemenea, potrivită pentru a scrie titluri de știri atât în ​​format tipărit, cât și în format electronic.

26. Vollkorn

Acest font serif detaliat, bogat în caracteristici este foarte popular. Claritatea și soliditatea sa transmit încredere și energie, făcând fontul la fel de eficient în dimensiuni mai mari pentru titluri și titluri, precum și cantități mari de text în formate mai mici.

27. Actor

Acest font are o înălțime x deosebit de mare, ceea ce necesită destul de mult spațiu. Actorul prezintă, de asemenea, un stil de modă veche pentru unele personaje, cum ar fi numerele 6 și 9.

Cu rădăcinile care datează din secolul al XVI-lea, caracterul umanist Garamond a devenit o adevărată icoană tipografică, servind adesea drept bază pentru crearea de fonturi moderne, inclusiv EB Garamond.

31. Ubuntu

Ubuntu Grotesque a fost creat pentru a personaliza textul web atât pe desktop-uri, cât și pe dispozitive mobile. Utilizatorii sunt încurajați să experimenteze cu acest font, să îl modifice și să-l îmbunătățească după cum consideră de cuviință.

32. Rozariu

Rosario este un sans serif umanist clasic, care este perfect pentru stilizarea paragrafelor de text.

33. Roboto Slab

Roboto Slab este unul dintre fonturile din familia Roboto. Versiunea bloc este deosebit de atrăgătoare cu formele geometrice și curbele deschise. Este la fel de potrivit pentru ecranele gadget și versiunile tipărite ale textelor.

34. Oswald

Fontul este o versiune reproiectată a clasicului Alternate Gothic sans serif. Oswald a fost actualizat recent pentru a veni într-o varietate de greutăți, un set de caractere extins și o kerning mai bună.

35. Impas

Stalemate este un font elegant, scris de mână, cu ceva fler vintage. Este potrivit pentru crearea de accente și personalizarea site-ului dvs.

36. Text Crimson

Acest font proporțional clasic conceput cu grijă poate fi folosit atât pentru afișarea unor cantități mari de text, cât și pentru scrierea titlurilor.