Povezivanje web fontova pomoću @font-face. Pravno pitanje korištenja fontova

Bold text

Bold text

Više nego inače

Manje nego inače

Kurziv

Kurziv

Sa donjom crtom

Precrtano

Mogućnosti stilskih atributa

Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje atributa generičkog stila. Koristeći vrijednosti njegovih svojstava, možete postaviti stil prikaza fontova:

1) font-family – svojstvo postavlja porodicu fontova. Moguće je navesti više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost će se dogoditi ako prethodna porodica nije instalirana na korisnikovom operativnom sistemu.

Sintaksa pisanja:

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

2) font-size – veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u HTML-u.
Sintaksa pisanja:

font-size: apsolutna veličina | relativna veličina | značenje | interes | naslijediti

Također možete postaviti veličinu fonta:

• U pikselima;
• U apsolutnom smislu ( xx-mali, x-mali, mali, srednji, veliki);
• U postocima;
• U bodovima (pt).

Veličina fonta:7

Veličina fonta: 24px

Veličina fonta: x-large

Veličina fonta: 200%

Veličina fonta: 24pt

stil fonta: normalan | kurziv | koso | naslijediti

vrijednosti:

• normalan – normalan pravopis;
• kurziv – kurziv;
• koso – font nagnut udesno;
• naslijediti – nasljeđuje pravopis nadređenog elementa.

Primjer kako promijeniti font u html-u koristeći ovo svojstvo:

font-style:inherit

font-style:italic

font-style:normal

font-style: oblique

font-varijanta: normalna | mala slova | naslijediti

Primjer kako promijeniti font u html-u sa ovim svojstvom:

font-variant:inherit

font-variant:normal

font-variant:small-caps

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

vrijednosti:

• bold – postavlja html font na podebljan;
• podebljano – podebljanije u odnosu na normalno;
• lakši – manje zasićen u odnosu na normalan;
• normalan – normalan pravopis;
• 100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

html svojstvo fonta i boja fonta

Font je još jedno svojstvo kontejnera. U sebi je kombinirao vrijednosti nekoliko svojstava namijenjenih za promjenu fontova. sintaksa fonta:

font: font-size font-family | naslijediti

Vrijednost se također može postaviti na fontove koje sistem koristi u oznakama na raznim kontrolama:

• natpis – za dugmad;
• ikona – za ikone;
• meni - meni;
• message-box – za dijaloške okvire;
• small-caption – za male kontrole;
• status-bar – font statusne trake.

U ovom vodiču za članak reći ću vam kako da kreirate vlastiti font za web stranicu koristeći ikone koje ste sami kreirali. Sve što nam treba za ovo je program za kreiranje vektorske grafike (Adobe Illustrator ili Inkspcape) i pristup Internetu! Sve slike, ikone i css font koji se koriste za ovo možete preuzeti na kraju članka.

Za ovaj tutorijal ćemo uraditi nešto jednostavno. Za prvu ikonu nacrtaćemo običnu zvijezdu. Za drugu ikonu - orao sa slovom W unutra. Prilično je lako crtati i možete kreirati bilo koje oblike i kombinacije. Koristio sam ilustrator za ove svrhe.

Nakon što završite kreativni dio, vaša kreacija mora biti sačuvana u SVG formatu. Kliknite na "Sačuvaj kao" i odaberite vrstu datoteke kao SVG. Sada možete nastaviti direktno sa kreiranjem fonta.

U te svrhe koristimo popularnu i besplatnu uslugu IcoMoon.

Prvo što treba da uradite je da kreirate novi projekat, pa kliknite na meni u gornjem levom uglu i kliknite na „Novi projekat“. Zatim učitavamo naše gotove svg datoteke nakon što kliknemo na dugme „Uvezi ikone“. Nakon što završite ove korake, trebali biste vidjeti sliku poput ove na vašem monitoru:

Sada imamo mogućnost da promijenimo kod za svaku ikonu (u našem slučaju to će biti e600 i e601), naziv našeg fonta, CSS prefiks i tako dalje. Sve se to radi u “Preferences”. Takođe, možemo vidjeti font u akciji klikom na link “Omogući brzu upotrebu” – što će nam omogućiti da dobijemo privremenu vezu do našeg fonta, kao i opciju za pregled koda u CodePen-u.

Nakon što ste sve konfigurisali, kliknite na dugme "Preuzmi" na dnu stranice i preuzmite arhivu. U ovoj arhivi ćete pronaći svoj font u ttf, eot, svg i woff formatima + demo stranicu sa fontom.

Korišćenje ikona na sajtu

Sada, sve što trebamo je da uključimo CSS font koristeći @font-face, i navedemo druge parametre (svi su zapisani u css datoteci u arhivi koju ste preuzeli.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; govori: none-style: normalna visina: 1. Bolje renderiranje fontova; -uglađivanje: nijansi sive ) .wdm-star:prije (sadržaj: "\e600"; ) .wdm-eagle:prije ( sadržaj: "\e601"; )

Sada možemo koristiti naš font u HTML kodu ovako:

Određivanje naziva klase za oznaku dobijamo našu ikonu.

Predstavljamo vam izbor besplatnih usluga za dizajnere. Ovo je prva opcija, planiramo je proširiti u budućnosti dodavanjem novih sekcija i alata.

Fontovi

• Google Fontovi su svima omiljena biblioteka fontova. Omogućuje vam odabir i preuzimanje različitih fontova za sve prilike.
• 1001 besplatnih fontova - biblioteka fontova. Ima jednostavnu navigaciju - fontovi su sortirani i po abecednom redu i po vrsti. Postoji dio ruskih fontova.
• Fontstruct je online dizajner fontova. Vrlo jednostavan alat koji će vam omogućiti da kreirate vlastiti font. Možete crtati ne samo standardnim kvadratima, već i drugim oblicima - tačkama, zaobljenim uglovima itd. Za početnike, to je idealan alat da isprobate tipografiju na djelu.
• Font Squirrel je jedna od najvećih biblioteka fontova. Osim toga, možete postaviti sliku i dobiti nazive fontova koji se koriste u njoj. Postoji prodavnica fontova, pa čak i prodavnica odeće sa logotipima.
• Type light je potpuno opremljen uređivač fontova. Omogućava kreiranje, uređivanje i pretvaranje OpenType, TrueType i PostScript fontova. Potrebno je preuzeti i instalirati. Besplatna verzija ima ograničenu funkcionalnost u odnosu na besplatnu verziju. Ali dovoljno je napraviti jednostavan font.
• Što je Font je online usluga za odabir fontova za web stranicu. Preuzimamo datoteku fontova, označavamo url stranice i vidimo kako će preuzeti font izgledati na stranici. Pogodna usluga.
• 1001 Fontovi – biblioteka fontova (više od 15.000). Jednostavna navigacija – font se može odabrati po veličini, vrsti, temi, dizajnu itd. Izbornik vam omogućava da prilagodite izlaz, što vam omogućava da vidite svaki font u različitim opcijama: veličini, stilu itd.
• Font Flame je online usluga za odabir para kompatibilnih fontova. Radi vrlo jednostavno - na glavnoj stranici nalazi se list s dva natpisa napravljena u različitim fontovima. Ako vam se svidjelo, kliknite na "Love" ako vam se ne sviđa, kliknite na "Hate". Zatim možete ponovo pogledati odabrane. Klikom na naziv fonta otvara se Google Fontovi.
• Typecast – odabir fonta za prototip. Možete vidjeti kako će font izgledati na bilo kojem uređaju. Potrebno je identifikovati različite vrste teksta - naslove, navodnike itd. Možete odabrati font, veličinu, stil i postaviti uvlake. Vidjet ćete svoju buduću stranicu u fontovima koje ste instalirali. Veliki plus je izbor rasporeda (jedna kolona ili više, različiti rasporedi blokova).
• Wordmark - omogućava vam da odaberete font instaliran na korisnikovom računaru za tekst, logotip ili naslov. Kada unesete tekst u polje, ono ga prikazuje u različitim fontovima. Možete odabrati veličinu, registrirati, prikazati crno-bijelo ili obrnuto. Opcije koje volite objavljuju se na Twitteru ili Facebooku - po izboru korisnika. Može se poslati emailom.

Stock Photos

• Unsplash je zaliha fotografija koja se stalno ažurira. Kolekcije su podijeljene na teme. Možete pronaći bilo šta od "afroamerikanca" do "prirode". Svaka fotografija ima svoju ocjenu, možete vidjeti najbolje ili nove.
• FoodiesFeed – fotografije hrane. Slike su podijeljene u kategorije. Možete odabrati najbolje, ekskluzivne, ikone, makete itd.
• Besplatne Refe fotografije - ogromna lista slika iz "stvarnog života". Uglavnom fotografija pejzaža i prirode. Nezgodna navigacija, sve fotografije na glavnoj stranici se pojavljuju prilikom skrolovanja.
• Little Visuals – visokokvalitetne fotografije pejzaža i zgrada. Možete preuzeti arhivu najboljih fotografija objavljenih tokom sedmice. Fotografije su označene hashtagovima, ali nisu kategorizirane.
• Gratisography je ogromna biblioteka besplatnih fotografija. Sve fotografije su podijeljene u šest tema: ljudi, grimase, gradovi, objekti, priroda i životinje. Možete pretraživati ​​po riječima.
• Smrt Stock Photo – Stock fotografije. Ne možete samo gledati i birati. Oni prave odabir mjesec dana unaprijed i dozvoljavaju vam da ga preuzmete nakon što unesete svoju e-poštu. Arhiva je teška oko 11 MB. Najbolje fotografije i link za preuzimanje šalju se e-poštom.
• Superfamous – velika kolekcija fotografija iz neobičnog ugla. Set je mali ali zanimljiv.
• Biblioteka uzoraka - uzorci i teksture. Set je prilično velik, šabloni su neobični. Zamjenjuju se pomicanjem, i to postepeno. Možete vidjeti kako će šablon izgledati na cijelom ekranu ili njegovom dijelu.
• New Old Stock – vintage fotografije iz arhive. Malo je besplatnih fotografija, ali se redovno pojavljuju nove.
• Pexels – veliki broj fotografija za sve prilike. Podijeljeni su po temama, vrlo lako pretraživati.
• Jay Mantri - veliki skup fotografija. Ne postoji klasifikacija kao takva, možete je pogledati po mjesecima.

Stock graphics

• Brusheezy – besplatni kistovi, šabloni, teksture i još mnogo toga za Photoshop. 12 kategorija, svaka sa podkategorijama. Izbor je ogroman.
• Iconfinder – ikone, plaćene i besplatne. Možete preuzeti u ICO, PNG, ICNS, SVG formatima.
• Brushez je velika kolekcija kistova za Photoshop. Pored njih, tu su i vektorski primitivi, forme, šabloni, stilovi. Svaki odjeljak podijeljen je na pododjeljke. Na primjer, postoji više od 20 kategorija za četke.
• Vecteezy je biblioteka vektorske grafike, uključujući slike i ilustracije. Veliki broj kategorija i ogroman broj grafika.
• Iconbird je usluga pretraživanja ikona na ruskom jeziku. Možete unijeti temu i dobiti skup ikona, ili možete pretraživati ​​po kategoriji.
• Icons8 je usluga na ruskom jeziku koja nudi više od 42.000 ikona na različite teme.

Infografika

• Vizualize je online usluga za kreiranje infografike „O meni“. U suštini stvara grafički životopis.
• Canva je jednostavan alat za kreiranje bilo kojeg dizajna. Omogućava vam da dizajnirate prezentaciju, poster, objavu na društvenim mrežama, knjige, pisma, materijale i još mnogo toga. Sve se radi na osnovu šablona, ​​tekst se menja. Ali postoji mnogo šablona za odabir.
• Lako – kreiranje infografike na osnovu šablona. Ugrađeni online uređivač omogućava vam da promijenite dizajn, postavite dodatne elemente i promijenite tekst.
• Infogram je online servis za kreiranje infografika i interaktivnih dijagrama. Nisu sve funkcije dostupne; morat ćete kupiti račun.
• Visage je jednostavan alat za kreiranje bilo kakvog vizualnog sadržaja (grafikone, infografike, slike za blog, itd.). Mnogo šablona, ​​jednostavan uređivač. Neke funkcije se plaćaju.
• Gliffy je online servis za kreiranje dijagrama. Editor radi na principu Microsoft Visio.
• Visme je online alat za kreiranje prezentacija i infografika. Više od 1000 šablona. Editor vam omogućava da dodate tekst (naslovi, liste, citati i obični), animirani tekst i widgete. Na besplatnom računu možete ga preuzeti kao JPG datoteku.
• Piktochart - Kreirajte visokokvalitetne grafike - prezentacije, infografike ili štampane materijale. Učitava PNG, JPG različitih veličina.
• Drawio je zgodan online servis za kreiranje dijagrama. Možete spremiti na dropbox i slične usluge ili na disk.
• Venngage – jednostavno kreiranje infografika, postera, izvještaja, materijala za društvene mreže itd. U besplatnoj verziji daje samo link do publikacije. Morate platiti preuzimanje.
• Cacoo je online servis za crtanje dijagrama i mapa sajta. Možda i najbolji u smislu mogućnosti. Veliki broj alata i šablona. Možete izvesti u PNG, PDF, SVG, PPT, itd.
• Creately je online servis dijagrama. Dostupno samo za objavljivanje. Preuzimanje se naplaćuje.
• Lucidchart je online servis za kreiranje dijagrama i crteža. Moguće je uvesti Microsoft Visio dijagram. Izvozi u PDF, PNG i JPG. Dostupna plaćena funkcionalnost.

Boje

• Colour Hunt – izbor kombinacija boja. Možete odabrati do četiri boje. Na raspolaganju su vam gotova rješenja.
• TinEye – analizira stranicu i prikazuje listu resursa koji koriste sliku sa stranice.
• ColorZilla – omogućava vam da kreirate boje i gradijente. Prikazuje css svojstva za njih.
• Adobe Color CC – kreiranje šema boja.
• Colicious – pritisnite razmaknicu i generirajte novu boju.
• Colorscheme - izbor shema boja. Postoji verzija na engleskom i ruskom jeziku. Omogućava vam da odaberete boje za stranicu. Ima fino podešavanje i prikazuje kod boje. Na kraju, omogućava vam da vidite stranicu u odabranoj shemi boja. Najveća prednost je gledanje gamuta u smislu devijacije percepcije boja. Također vam omogućava da odaberete različite modele boja. Sprema Gimp, CSS, PNG, itd. u paletu. Ima pretvarač boja za pretvaranje iz jednog modela boja u drugi.
• Paletton je alat za kreiranje kombinacija boja. Ne razlikuje se od Colorscheme.
• Pictaculous – analizira paletu PNG, JPG ili GIF slike. Otpremite sliku i nabavite skup svih boja koje su prisutne na njoj.
• Hex Color Tool – alat za odabir boje. Koristite klizače za podešavanje boje i možete odabrati svjetlinu. Odabrana boja se zatim pohranjuje. Možete odabrati paletu.
• (Un)clrd je dodatak za pretraživač koji uklanja sve boje i ostavlja stranicu crno-bijelom.
• BrandColors - najveća zbirka službenih marki boja brenda. Odaberite naziv marke i preuzmite nazive njegovih boja, uključujući css datoteku.
• Colortyper - izbor boja iz neobičnog ugla. Na ekranu se prikazuju raznobojni simboli koji se ukrštaju. Rezultat raskrsnice je nova boja. Izgleda zanimljivo.

Inspiracija

• Dribbble - Najveća zajednica dizajnera. Posao, zajednica, komunikacija - ovdje možete pronaći sve.
• Freebbble - predlošci i dizajni iz Dribbblea. Neke stvari se mogu besplatno preuzeti, neke se mogu kupiti. Možete pronaći predloške za CMS, dizajnere, ikone, makete, dizajnirane šablone za web stranice i još mnogo toga.
• Muzli - Dnevna dizajnerska inspiracija. Resurs za dizajnere s primjerima najneobičnijih radova.
• Awwwards - najbolji razvoj dizajnera. Organizirano kao mjesto za glasanje u zajednici. Odabrana je lokacija dana, mjeseca, godine itd. Veliki broj dizajna, videa, razvoja.
• Design You Trust je zajednica dizajnera koji dijele najnovije trendove, vijesti, portfelje, dizajne i kreativne najave.
• Stvarno dobre e-poruke - ogromna kolekcija dobro dizajniranih e-poruka. Odaberite šablon i preuzmite njegov html, css i js kod. Možete mijenjati tekst, slike itd.
• Fubiz – publikacije iz oblasti dizajna i kreativnosti. Možete pronaći fotografije, dizajne, grafike, video zapise itd. Sve je podijeljeno u kategorije.
• Designspiration je kolekcija dizajna u Pinterest stilu. Ogroman broj ideja i primjera - tipografija, logotipi, slova i još mnogo toga.
• Behance je zbirka portfelja profesionalaca. Možete ostaviti slobodno radno mjesto ili životopis.
• Mobile-patterns – biblioteka iOS i Android snimaka ekrana. Sve je podijeljeno na dijelove. Možete pronaći mnoge ideje.
• One Page Love je galerija najboljih dizajna web stranica. Možete kupiti šablone i teme. Ima i besplatnih.
• Uispace je resurs za dizajnere. Možete besplatno preuzeti psd, skice, fontove, makete, itd.

Grafički uređivači

• DAZ 3D - 3D modeliranje. Registrirajte se i preuzmite desktop aplikaciju.
• Gimp je besplatni analog Photoshopa. Omogućava vam prilagođavanje modularne mreže, kreiranje vodiča, rad sa slojevima, dodavanje efekata itd. Dobra je besplatna zamjena za Photoshop. Proširiv je - možete preuzeti dodatne dodatke.
• Blender - 3D modeliranje, animacija, renderiranje, zvuk, video. Omogućava kreiranje igara. Brzorastući urednik, veoma popularan.
• Aviary je online usluga za uređivanje fotografija. Mnoge opcije, uključujući efekat crvenih očiju, promjenu veličine itd.
• Pixlr je online uređivač fotografija i poseban grafički uređivač. Posljednji izgleda kao Photoshop. Snima na disk.
• BeFunky je online servis za uređivanje fotografija. Efekti, okviri, grafika, retuširanje i još mnogo toga. Postoji interfejs na ruskom jeziku.
• Inkscape je kompletan open source uređivač vektorske grafike. Podržava mogućnosti SVG formata - rad sa oblicima, konturama, tekstom, vektorizacijom rasterske grafike itd. Osim obrade vektorskih slika, omogućava vam da kreirate šablon web stranice i izrežete ga - prisutna je modularna mreža. Omogućava vam crtanje pozadina, banera, vektorskih logotipa itd.
• IconEdit2 je vrlo jednostavan program za crtanje ikona. Ima filtere. Omogućava vam da izvezete sliku za Android i Apple. Možete podesiti dubinu boje, rotirati i podesiti ikonu. Podržava prozirnost, više slika po ICO datoteci i anti-aliasing u svim alatima za crtanje.
• Falco GIF Animator je program za kreiranje animacije okvir po kadar i animiranih ikona. Na resursu možete preuzeti mnogo različitih programa.
• Krita je profesionalni desktop editor otvorenog koda. Dostupno za različite OS.
• Boxy-SVG je uređivač vektorske grafike sličan Adobe Illustratoru, Sketchu i Inkscapeu.
• Photopos je multifunkcionalni program, sa funkcijama foto editora, grafičkog uređivača i aplikacije za kreiranje kompjuterske grafike.
• 5Dfly je besplatna aplikacija za grupnu obradu fotografija. Može kreirati projekcije slajdova koristeći PowerPoint. PDF konverter možete preuzeti zasebno.
• PaintStar je besplatni uređivač slika. Interfejs je vrlo sličan Paintu, ali ima više opcija. Slojevi, na primjer.
• PhotoScape je jednostavan uređivač fotografija. Ima funkcije za podešavanje svjetline i boje, balans bijele boje, korekciju pozadinskog osvjetljenja, okvire, balone, mozaik mod, dodavanje teksta, crtanje slika, izrezivanje, filtere, uklanjanje crvenih očiju, kolorizaciju, četkicu, pečat za kloniranje, četkicu za efekte itd.

Zdravo svima! Danas, kao dio web dizajna, želim govoriti o fontovima koje treba koristiti prilikom izrade web stranice.

U pravilu ne razmišljaju svi o tome koje fontove treba koristiti za sadržajni dio stranice. Odabir prekrasnih fontova za web stranicu najvažniji je dio razvoja dizajna. Pošto od ovog dela zavisi čitljivost informacija sa sajta, a to je, kao što znamo, najvažnije na sajtu. Iz tog razloga, ovo pitanje treba shvatiti vrlo ozbiljno.

Ali u dizajnu web stranice možete koristiti samo fontove koji su dostupni budućim posjetiteljima stranice. Ovo se radi kako bi se osiguralo da se stranice ispravno prikazuju za sve korisnike, s različitim operativnim sistemima i pretraživačima. Inače, ako koristite nestandardne fontove, većina posjetitelja će sve vidjeti drugačije i, u većini slučajeva, na ružan način. Iz tog razloga, preporučuje se korištenje standardnih fontova navedenih u nastavku. Lista fontova uključuje fontove koji su instalirani na operativnom sistemu Windows XP i novijim.

U ovom članku ne razmatram fontove iz drugih operativnih sistema. Iskusni layout dizajner bi trebao znati poređenje fontova u različitim operativnim sistemima, a tokom layout-a će napisati ovu tačku u CSS stilovima.

U osnovi, pri razvoju sadržajnog dijela dizajna koriste se dvije vrste fontova:

• serif fontovi
• sans serif fontovi

Serif fontovi- (engleski serif - serif) fontovi čiji stil počinje i završava se potezima. Na primjer Times New Roman.

Sans serif fontovi(usitnjeni fontovi) - (engleski sans-serif - sans serif) fontovi sa strogim, ravnim linijama bez serifa. Na primjer Arial.

Ispod možete vidjeti snimak ekrana serif i sans serif fontova.

Fontovi za web dizajn:

• Arial
• Arial Black
• Arial Narrow
• Book Antiqua
• Century Gothic
• Comic Sans MS
• Courier New
• Franklin Gothic Medium
• Georgia
• Uticaj
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotype
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings (razni simboli i oznake)
• Krila (razni simboli i znakovi)

Želeo bih da primetim i odsustvo kurziva u velikom broju fontova umesto kurziva, što otežava čitanje teksta.

Od standardnih fontova u Windowsu koji nemaju kurziv:

• Arial Black
• Comic Sans MS
• Franklin Gothic Medium
• Uticaj
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Pošto sam spomenuo fontove koji nemaju kurziv, želio bih napomenuti i činjenicu da postoje fontovi koji su u početku podebljani. Iz ovih razloga, nema smisla koristiti stilove koji označavaju podebljani font, jer rezultat neće biti ono što nam treba.

Postoji ogroman broj načina da pronađete pravi font za svoju web stranicu. Na primjer, možete koristiti usluge s ogromnim bibliotekama fontova za koje je potrebna plaćena pretplata.

Ako imate budžet ili eksperimentirate s malim projektom, možete koristiti besplatne web fontove koji su javno dostupni. Pronalaženje pravog web fonta za vašu web stranicu može biti dugotrajno, pa vam predstavljamo izbor najboljih među njima.

1. Montserrat

Kako se tipografija razvija, ona se udaljava od starinskih urbanih plakata i znakova. Kreatorka ovog fonta pokušala je da sačuva ljepotu tipografije urbanih plakata koje je viđala na ulicama Buenos Airesa.

2. Abril Fatface

Abril Fatface je dio velike porodice fontova koja dolazi u 18 stilova kreiranih za različite svrhe. Ovaj font ima snažnu, elegantnu prisutnost, što ga čini odličnim rješenjem za kreiranje naslova koji upadaju u oči. Najčešće se kombinuje sa Lato, Open Sans i Droid Sans.

3. Playfair Display

S obzirom na značajnu visinu x i male indekse slova, Playfair Display je također pogodan za pisanje naslova, posebno ako je prostor ograničen. Dobro se slaže sa Gruzijom i često se koristi sa Osvaldom, Latom i Arvom.

4. GT Walsheim

Danas se koristi na mnogim blogovima, GT Walsheim je predstavnik geometrijskih bez serifa i dio je porodice Grilli Type. Morate platiti za cijeli set fontova, ali Grilli Type nudi besplatnu probnu verziju GT Walsheima.

5. Merriweather

Ako je čitljivost na ekranu prioritet za vaš projekat, pogledajte Merriweather, koji je kreiran za ovu svrhu. Osim toga, ovaj font se stalno poboljšava.

6. Josephine Sans

Josefin Sans je inspirisan starinskim švedskim dizajnom i odlikuje se elegantnom, geometrijskom estetikom.

7. Gravitas One

Gravitas One je baziran na “UK fat face”, podebljanom reklamnom fontu koji se pojavio tokom industrijske revolucije u Engleskoj. Ovaj font izgleda sjajno u srednjem do velikom obimu i pogodan je za naslove, naslove i kartice.

8. Jura

Slova ovog fonta ponavljaju oblike slova Kaya-li. Sadrži i znakove ćiriličnog i grčkog pisma. Dostupan je u laganim, normalnim, srednjim i podebljanim težinama.

9.League Gothic

Prvobitno dizajniran od strane Morrisa Fullera Bentona za American Type Founders Company 1903. godine, League Gothic je pronašao novu upotrebu uz ažuriranje i dodavanje novih glifova.

10. Fjord

Fjord je serif font originalno kreiran za štampane knjige i posebno je pogodan za uklapanje dugačkog teksta u format male štampe. Može se koristiti za kreiranje velike količine tekstualnog sadržaja na stranici, jer font ima jasnu strukturu, istaknute serife i duge, elegantne glave i stopala.

11. Amarant

Familija fontova Amaranth ima nekosi kurzivni dizajn sa malim kontrastom i uočljivim krivinama. Sva tri Amarant stila dobro se slažu s gotovo bilo kojim drugim fontom. Možete se igrati s ovim fontom - eksperimentirajte i odaberite najbolji.

12. Poly

Ovaj font srednjeg kontrasta izvorno je kreiran za autohtoni jezik Wayuunaiki, koji zahtijeva široke glifove. Ima male stabljike i veliku x visinu, što ga čini posebno korisnim u malim veličinama.

13. Gentium Basic

Ovaj font je kreiran kao višejezički font, uključujući latinična i grčka slova, kao i ćirilicu i naprednu podršku u Gentium Plus verziji. Gentium Basic i Gentium Book Basic dostupni su u besplatnoj web verziji, ali su ograničeni samo na latinično pismo.

14. Otvori Sans

Open Sans je predstavnik humanističkih groteski. Ovaj font je vrlo čitljiv i prilagođava se web i mobilnim sučeljima. Riječ je o neukošenom fontu s jednostavnim stilom slova, kojeg karakterizira neutralan, ali dovoljno ugodan izgled da se može koristiti u različite svrhe.

15. Ledger Regular

Riječ je o višenamjenskom fontu s velikom x-visinom, jakim kontrastom boja i dobro definiranim serifima koji doprinose čitljivosti teksta. Ovaj font izgleda dobro i na štampi i na ekranu niske rezolucije.

16. Signika

Ovaj besplatni web font je reprezentativan za sans serif. Nizak kontrast i velika x visina omogućavaju Signiki da se dobro prikazuje na ekranu. Širok izbor ikona uključuje simbole, piktograme i strelice.

17. Josefin Slab

Kreiran prema kanonima geometrijskog fonta tipičnog za 1930-te, uz dodatak skandinavskih karakteristika, Josefin Slab ima karakteristike pločastog fonta i podsjeća na font pisaće mašine. Zanimljivo je da je njegova x visina polovina visine velikog slova.

18. Forum

Kao što ime govori, ovo je rimski font koji je dobar za caps lock naslove, ali i za prikaz teksta. Elegantne proporcije ovog fonta podsjećaju na klasičnu arhitekturu sa svojim polukružnim lukovima, horizontalnim vijencima i vertikalnim stupovima.

Nazvan po jednom od najpoznatijih gradova Maja, Tikal Sans ima karakteristike glifova koji su korišteni u pisanju južnoameričke civilizacije. Njegov kreator je odabrao veliku x-visinu, koja fontu daje moderan izgled i blagotvorno utiče na njegovu čitljivost, a veliki izbor stilova omogućava da se koristi u različite svrhe.

20. Arvo

Pogodan i za štampu i za web, ovaj geometrijski font za ploče dostupan je u rimskom, kurzivnom, rimskom podebljanom i podebljanom kurzivu. Arvoov nizak kontrast poboljšava njegovu čitljivost na ekranu.

21. Bevan

Bevan je nastao na osnovu tradicionalnog fonta ploča iz 1930-ih. Slova su digitalizirana, dobila novi oblik i optimizirana za web verziju. Ovo je jedan od rijetkih super podebljanih fontova koji su pogodni za web stranice.

22. Stari standardni TT

Old Standard TT je baziran na modernom serif fontu, koji je bio popularan krajem 19. i početkom 20. vijeka, a potom dugo zaboravljen. Ovaj font je pogodan za dodavanje stila određenoj vrsti sadržaja, kao što su naučna istraživanja ili tekstovi na grčkom ili ćiriličnom pismu.

23. Kreon

Idealan za web stranice s vijestima i blogove, ovaj serif font također dijeli karakteristike pločastog fonta, ali njegova ravnoteža i nizak kontrast čine Kreon znatno osobnijim.

24. Droid Sans

Droid Sans je optimizovan za maksimalnu čitljivost čak i u malim interfejsima, kao što su meniji na ekranima mobilnih telefona. Ovo je neutralan, nekosi font s jednostavnim, otvorenim slovima.

25. Italiana

Kreator ovog fonta je inspirisan klasičnom italijanskom kaligrafijom, tako da će font biti veoma koristan za projekte kojima treba dodati eleganciju. Italiana je također pogodna za pisanje naslova vijesti u štampanom i elektronskom formatu.

26. Vollkorn

Ovaj detaljan, bogat funkcijama serif font je veoma popularan. Njegova jasnoća i čvrstoća prenose samopouzdanje i energiju, čineći font jednako efikasnim u većim veličinama za naslove i naslove, kao i velike količine teksta u manjim formatima.

27. Glumac

Ovaj font ima posebno veliku x-visinu, što zahtijeva dosta prostora. Glumac također ima staromodan stil za neke likove, kao što su brojevi 6 i 9.

Sa korijenima koji datiraju iz 16. stoljeća, humanistički tip slova Garamond postao je prava tipografska ikona, često služeći kao osnova za kreiranje modernih slova, uključujući EB Garamond.

31. Ubuntu

Ubuntu Grotesque je kreiran da personalizuje web tekst i na desktopu i na mobilnim uređajima. Korisnici se ohrabruju da eksperimentišu s ovim fontom, mijenjaju ga i poboljšavaju kako im odgovara.

32. Rosario

Rosario je klasični humanistički sans serif koji je savršen za stiliziranje pasusa teksta.

33. Roboto Slab

Roboto Slab je jedan od fontova iz porodice Roboto. Blok verzija posebno upada u oči svojim geometrijskim oblicima i otvorenim oblinama. Podjednako je pogodan za ekrane gadžeta i štampane verzije tekstova.

34. Oswald

Font je prerađena verzija klasičnog alternativnog gotičkog sans serifa. Oswald je nedavno ažuriran tako da dolazi u različitim težinama, proširenom skupu karaktera i boljem kerningu.

35. Zastoj

Stalemate je elegantan rukopisni font s nekim vintage stilom. Pogodan je za kreiranje akcenta i personalizaciju vaše web stranice.

36. Crimson Text

Ovaj pažljivo dizajnirani klasični proporcionalni font može se koristiti i za prikaz velikih količina teksta i za pisanje naslova.