Prekrasna tipografija u web dizajnu. Lijepa tipografija u web dizajnu prekrasna tipografija

Kustos resursa na Typewolf fontovima Jeremy Schoaf odabrao je primjere web lokacija sa zanimljivim rješenjima fonta i opisali svoje prednosti i nedostatke.

U kombinaciji s tankim teksturom papira, ova tipografija stvara osjećaj koji pročitate knjigu.

Jednostavno guma.

Zahvaljujući web fontovima, pomažući da odgovara tipografiji ambalaže proizvoda na tipografiju proizvođača. To se događa sve češće. Simption Simply Gum izabrao je Gotham u crtanju svog branda, koji zadržava identitet konstantnog i na mreži i offline kanala.

Ova je stranica dobar primjer kako je samo jedan remi ponekad jedini potreban. Upotreba različite zasićenosti Gothama i postavljanje zaglavlja u velikoj mjeri, jednostavno je gum instalirao jasnu hijerarhiju svega sa jednim intenzitetom.

Logotipi u zaglavlju i podnožju stoje u PNG formatu, tako da gube jasnoću i skalabilnost web fonta. Upotreba web fonta za logotip nije uvijek izvediva, posebno ako vam je potrebna dobra kontrola nad curlingom; Međutim, slika u SVG-u će u ovom slučaju biti bolje od PNG-a, jer može skalirati i istovremeno održavati svoju jasnoću.

Sažetak

Srećom, primjeri su gore pokazali kao određena rješenja u tipografiji mogu utjecati na dizajn. Ovdje imate neke ključne misli:

Ako ćete koristiti nekoliko poteza, a zatim razviti stalni sistem u određenoj tipografiji i pridržavajte se toga.
Za glavni tekst odaberite font s normalnim kurzivnim, masnim natpisom i podebljanim fitnesom.
Ako ćete odabrati popularni dizajn, pokušajte ga kombinirati s manje donesenim za izradu izračunavanja.
Napravite vodič u stilu na samom početku projekta da garantujete uzastopnu upotrebu fontova među članovima vašeg tima.
Koristite kontrast, a ne sličan dizajnu.
Ne koristite fontove na ekranu za glavni tekst. Koristite dizajn na odredištu.
Ne bojte se koristiti samo jedan izvlačenje. Hijerarhiju možete postaviti uz pomoć različite zasićenosti i stila jedne porodice.
Ako vaš logo omogući vam da u SVG napravite definiciju i skalabilnost.

Odlična web stranica započinje prekrasnom tipografijom. I iako se neka pravila mogu podijeliti, ponekad će se vratiti na osnovna načela onoga što je dobra tipografija i kako to stvoriti.

Ovaj podsjetnik će vam pomoći u svježem pogledu na vaše projekte, razmislite o novim pristupima ili se vratite u jednostavniji dizajn.

Dakle, danas zanemarujemo modne trendove, fokusiramo se na teoriju tipografije i o tome kako "pravila" može pomoći u stvaranju prekrasnih tekstova.

Veličina i hijerarhija

Veličina je pitanja. Da bi se stvorila tipografija za pročitavanje potrošne, to može biti presudan faktor. Mali tekst je teško razmotriti, a ne nešto čitati, ali prevelika, premašit će visinu linije i dovesti do zbrke.

Čitljiva tipografija ima nekoliko slojeva hijerarhije. Ovi slojevi sugeriraju korisnik koji treba pročitati u prvom, u drugom, i na trećem mjestu. Takođe, postoji očigledna hijerarhija u veličinama teksta - jedna veličina naslova, druga, na glavnom tekstu, a treća u titlovima.

Praćenje i kerning

Praćenje i kerning često su zbunjeni. Kerning je selektivna promjena u intervalu između slova ovisno o njihovom obliku. Praćenje je promjena intervala između skupova slova, I.E., odlomka ili sav blok teksta.

Kerning se često primjenjuje na specifične elemente za stvaranje jasnoće, poboljšanje čitljivosti, i, čak, u elegantne velike odlomke teksta. Praćenje se često koristi za sužavanje previše širokog fonta glavnog teksta.

Ograničite broj stilova primijenjenog stila

Za većinu projekata postoje dva ili tri stila. Da ne biste pogriješili u odabiru, pronađite porodicu fontova sa velika količina Dostupne varijacije crtanja. Najkvalitetniji fontovi imaju širok izbor stilova - masti, uobičajeni, kurzivni, kondenzirani, crni itd.

Mix i usporedite stilove

Preporučujem da odaberete dva različita stila. Najčešći par je Serif i Sans Serif. Povezivanje raznih stilova i remija potražite slova iste visine i oblika zdjele (prostor unutar zatvorenih slova, poput "O").

Ovi mali detalji značajno će utjecati na to kako će ovi fontovi pogledati zajedno i na praktičnosti za čitanje teksta.

Transfer i isključivanje

U većini slučajeva transferi niza i ne trebaju ga. U slučaju internetskog teksta, ove tehnike zamućuju samo brzo asimiranje i razumijevanje. Transferi se miješaju u čitanje, a potpuna snaga često ne vode do nečitljivog oblikovanja.

Ne mijenjajte fontove

Nikada ne mijenjajte font. Ne pokušavajte da ga učinite gušćim, tanjim ili višim. Bolje je odabrati drugu.

Dizajneri razvoja fontova provode puno vremena da ovaj font savjetuje i zadovoljava stil stila. Ne treba ništa mijenjati. Nećete ga moći poboljšati, a u većini slučajeva to će sve pokvariti.

Ako vam font ne odgovara, potražite nešto drugo. Koristite identifikaciju sličnog alata za font, alat koji definira slične fontove.

Kontrast

Koristite tipografiju za stvaranje kontrasta. Takođe, kako stvoriti hijerarhiju, koristite različite veličine, stvarajte vizualni interes promjenom težine, boje i stila fonta.

Boja je jedna od najefikasnijih i jednostavni načini Stvaranje kontrasta. Savršen kontrast - tamni tekst na svjetlojskoj pozadini (ili obrnuto). Imate gotovo neograničen skup boja koji će vam pomoći da postignete ovaj cilj. Igranje sa bojom i tipografijom, imajte na umu da neke kombinacije boja, na primjer, jarko crvena na svijetloj plavoj boji, može biti prilično poteškoća.

Kada je u pitanju kontrast, da biste stvorili ručni čitljivi tekst najboljim koristeći jednostavnu pozadinu. Ali ako sadrži takve vizualne elemente kao slike ili uzorke, zatim povećajte veličinu slova - to će stvoriti odvajanje između pozadine i tekstualnih elemenata prvog plana.

Format sakupljanja trake

Format trake biranja je veličina teksta spremnika. Može biti širina cijelog tekstualnog okvira ili jedinog stupca.

Format niza je važan jer je broj znakova (uključujući razmake, posebne znakove i interpunkcijske znakove) na ekranu utiču na čitljivost. Ako su redovi predugi ili prekratki, izgled korisnika bit će teški za pomicanje.

Iz elemenata tipografskog stila: "Bilo koji broj znakova, u rasponu od 45 do 75, smatra se zadovoljavajućim dužinom niza za set jednokupne stupce. 66-znakovni niz (uključujući slova i prostore) smatra se savršenim. Za višebojni set idealni prosjek bit će niz, dugim 40-50 simbola. "

Čak i uprkos činjenici da u vrijeme objave ove knjige niko nije razmišljao o mobilnoj tipografiji, preporuka koja se odnosi na višekolon nije izgubila relevantnost. U slučajevima sa malim ekranima možete koristiti čak 35 znakova po nizu.

Prevod članka Carrie Carsins

Ova lista sastavljena je u skladu s rezultatima II. 2008. Prethodne "Hit Parade" može se naći i.

Svaki je primjer popraćen kratkim komentarima i pritiskom na snimku zaslona dovodi do originalne stranice.

Sjemena konferencija

Nema bljeskalice, nema slika, nema buke; Samo dobro stilizirani font i dobro pisani tekst: pravi dokaz da se sa samo font može dobiti veliki rezultat. Volio bih vidjeti još nekoliko primjera ove vrste.

Dizajniranje vesti.

Veliki kontrast između naslova i glavnog sadržaja, puno čistog prostora i dobre organizacije.

Omniti.

Ugodan logo, jasan tekst i vrlo lijepa shema boja. Saznajte više o dizajnerskom razvoju može se čitati.

Designr.it.

Veličanstveni suitivirani logo (zna li neko kakav font?) I mnogi rafinirani dijelovi.

Pogled na dizajn.

Andy Ratdlezh - dizajner koji u praksi primjenjuje isti principe koji promoviraju. Sviđa mi se kako on mijenja veličinu luka, ovisno o datumu objave članka, tako da najslanji tekst odgovara najvećem kehalu.

Wordpress.org & WP 2.5.x admin

Iako se Wordpress Blogger platforma ne temelji na web mjestu, ali njihova web stranica prikazuje se na hiljade, ako ne i milioni, naši ekrani svaki dan. Volio bih kao i više i offline aplikacije.

Ourtype.

Zaista nisam htio uključiti ovu stranicu u pregled, jer se na njemu koristi blic. Međutim, na njemu su prikazane neke odlične fontove (a neki moji favoriti moraju dodati).

Paluba.

Još jedna web lokacija koja se temelji samo na fontovima u svemu. Odličan primjer hijerarhije i obilježavanja. Ko je rekao da "fotografija kaže više od hiljadu riječi"? Ne, font kaže bolje.