Vodič za kombiniranje fontova

Kombiniranje fontova jedan je od najtežih dijelova tipografije. Evo vodiča u kombinaciji s primjerom koji će vam pomoći ispraviti kombinacije fontova.

Ovaj se vodič temelji na petom poglavlju iz knjige Bolja web tipografija za bolji web Mateja Latina. Knjiga se sastoji od 13 poglavlja kroz koja čitatelj dizajnira i gradi primjer web stranice.

Ovaj je vodič dostupan i na tradicionalnom kineskom.

Da li vam stvarno treba više fontova?

Loša tipografija na webu u ranim godinama interneta često se krivila za loš raspon dostupnih fontova. Ali već smo saznali da se tipografija ne odnosi samo na odabir fontova. Jedan od njegovih ciljeva (vjerojatno glavni) je predstavljanje informacija na način koji je čitljiv i jednostavan za konzumiranje. Prije nego što počnemo tražiti font koji ćemo dodati svom dizajnu i kombinirati ga s fontom našeg tijela, trebamo se zapitati: je li nam stvarno potrebno više od jednog fonta? Ne dodajte samo jedan zarad toga. Ne postoji pravilo u tipografiji koje kaže da što je više fontova korišteno to bolje (naprotiv je vjerovatno više istine). Nema garancije da će dodavanje drugog fonta na vašu web lokaciju poboljšati tipografiju. Volim održati svoju tipografiju jednostavnom i čvrstom. Poput stroja - što je manje pomičnih dijelova, to je manja vjerojatnost da će se pokvariti.

Loša tipografija na webu u ranim godinama interneta često se krivila za loš raspon dostupnih fontova. Ali već smo saznali da se tipografija ne odnosi samo na odabir fontova. Jedan od njegovih ciljeva (vjerojatno glavni) je predstavljanje informacija na način koji je čitljiv i jednostavan za konzumiranje. Prije nego što počnemo tražiti font koji ćemo dodati svom dizajnu i kombinirati ga s fontom našeg tijela, trebamo se zapitati: je li nam stvarno potrebno više od jednog fonta? Ne dodajte samo jedan zarad toga. Ne postoji pravilo u tipografiji koje kaže da što je više fontova korišteno to bolje (naprotiv je vjerovatno više istine). Nema garancije da će dodavanje drugog fonta na vašu web lokaciju poboljšati tipografiju. Volim održati svoju tipografiju jednostavnom i čvrstom. Poput stroja - što je manje pomičnih dijelova, to je manja vjerojatnost da će se pokvariti.

Tipografsko djelo 18. stoljeća u jednom fontu - Baskerville - sam John Baskerville.
Sigurno je pravilo da se na istoj stranici ne miješaju različiti stilovi slova ili različita lica u istoj knjizi.
- Eric Gill

Eric Gill, prilično kontroverzan čovjek, ali sjajan tipograf (između ostalog i ono što je učinio), imao je slično mišljenje. Ne možete bolje raditi s više fontova nego sa jednim. Pokušajte izazvati sebe i stvorite web stranicu samo jednim fontom. Ako samo za eksperiment i zabavu, mislim da bi svi trebali to pokušati jer ima puno toga naučiti.

Nedavno redizajnirani matejlatin.co.uk. Tipografija je fokusirana, ali koristeći samo jedan font.

Nedavno sam redizajnirao svoju osobnu web stranicu. Jedna od stvari kojom sam se želio istaknuti bio je minimalizam koji je tako velik dio mog života. Da bih to najbolje učinio, odlučio sam upotrijebiti jedan font. Također sam htio da web lokacija bude fokusirana na tipografiju (doslovno 95% to je tipografija), što je izazov učinilo još težim. Tražio sam čist, svjež i jednostavan sans-serif font koji bi to još više naglasio. Na kraju sam odabrao Gibsona iz Canada Typea. Ima moderan, ali pomalo prijateljski osjećaj. I izvrsno djeluje kada su postavljene na ogromne veličine. Bilo je pomalo izazov ispraviti tipografiju za tu web stranicu, ali uspio sam to koristeći različite veličine, težinu i samo dvije boje - tamnu i srednje sivu.

Uključio sam taj primjer u knjigu, jer je sjajno pokazati koliko se može postići jednim fontom. Ne samo majstora tipografije poput Johna Baskervillea, već i dizajnere samouke poput mene. Mislite li da vam još treba drugi font za vaš projekt? Bez brige, čitajte dalje.

Proces u četiri koraka za kombiniranje fontova

Ako i dalje mislite da vam je potrebno više fontova za vaše web mjesto, trebat će vam sistematski postupak koji će vas voditi. Ovdje opisujem prilagođenu verziju one koja je opisana u knjizi Tim Braun kombinirajući tipove. Evo četiri koraka:

  1. Pronađite font sidra za vaš glavni tekst teksta
  2. Pronađite nekoliko sekundarnih fontova za moguće kombinacije
  3. Procijenite kombinaciju
  4. Uklonite / odaberite kombinaciju fontova.
Gornji postupak pretpostavlja da započinjete s fontom tijela već odabranim. Proces se lako može preokrenuti ako želite najprije započeti s naslovnim fontom.

Postoje dva pristupa za kombiniranje fontova i pet smjernica koji vam mogu pomoći u koraku 3 s gornjeg grafikona. Pogledajmo.

Dva pristupa procjeni kombinacija fontova

Kontrast i sklad su dva najosnovnija načela kada je u pitanju dizajn, arhitektura i umjetnost. Oboje je ključno i kada je u pitanju tipografija. Neke ocjene opisane u ovom procesu djeluju samo kao kontrastna kombinacija, neke samo kao harmonične, a neke kao obje. Pogledajmo primjer iz stvarnog života.

Kontrastne kombinacije

Pogledajte gornju fotografiju ureda. Kako biste to opisali? Osjeća se moderno, zar ne? Ali ima i nešto drugo. I to se osjeća toplo. Neobično za urede s modernim, gotovo futurističkim namještajem. Ipak, ovaj ima. Zid od opeke donosi ovaj osjećaj topline i ugode u sobu koja bi bez nje izgledala hladno. Isto se može primijeniti na kombiniranje fontova.

Kako to možemo primijeniti na tipografiji? Uzmimo Baskerville font za naš glavni tekst. Baskerville je dizajnirao John Baskerville 1754. Tada je to bio moderan font, jer je gurao granice onoga što je bilo moguće u tipografiji. No danas se to doživljava kao klasično Ona izaziva osjećaje povjerenja i topline. Na temelju eksperimenta, koji je izveo Errol Morris, riječ je o najpouzdanijem fontu. Sada ga dopunimo s Futura-om samo velikim slovima za naslove. Futuru je dizajnirao Paul Renner 1927. To je geometrijski sans-serif font. Bio je to moderan geometrijski sans-serif font kada je prvi put dizajniran i do danas se osjeća moderno.

Naš dizajn izgleda bogato. Luksuzan. Ima to za ispričati. Ali najvažnije - djeluje. Koristi dva klasika fonta iz različitih vremenskih razdoblja. Svaka osoba dolazi od suprotne ljestvice između modernog / hladnog i klasičnog / toplog. Zajedno su poput vatre i leda koji se pretvaraju u tekuću vodu.

Harmonične kombinacije

Harmonija je upravo suprotnost kontrastu. Ako pogledate fotografiju ureda iznad, vidjet ćete kako moderno izgleda u cijelom. Minimalistički prostor bez ukrasa, u kombinaciji s namještajem modernog izgleda. Kako smo mogli takvo što ponoviti u tipografiji?

Koristili smo Din Alternate za naslov i Helvetica za font teksta u gornjoj kombinaciji. Oboje imaju blagi industrijski i moderan osjećaj prema njima. Mnoge su značajke zbog kojih su dva slova slična, ali ipak su dovoljno različiti da mogu funkcionirati kao kombinacija.

Pet smjernica za kombiniranje fontova

Kombiniranje fontova sa sličnom visinom x

Sjećate se kad sam vam rekao da se sjećate visine x u poglavlju o anatomiji tipova? Ovo je zgodno. Drugi način procjene kombinacije fontova je pomno pogledati njihove visine x da biste vidjeli podudaraju li se. Oni bi u najgorem slučaju trebali biti vrlo blizu. Fontovi slične visine x djeluju bolje zajedno jer imaju sličnu vizualnu težinu. Posebno kad je riječ o vertikalnom ritmu (nešto ćemo opisati u sljedećem poglavlju).

Gore: Futura i Baskerville imaju sličnu visinu x koja ih ojačava kao dobru kombinaciju slova.

Ova kombinacija djeluje bilo s kontrastom ili harmonijom. Ili odaberite fontove koji imaju podudaranje x visine ili fontove vrlo različitih x-visina. Nemoj ići s nečim između

Kombiniranje fontova iz iste livnice

Nešto sam primijetio kroz sve tipografske radove koje sam do tada radio. Odabirom fontova, uvijek se vraćam određenom broju vrsta ljevaonica koje su ih proizvele. Njemački FontFont jedan je od njih - ljubitelj sam rada Erika Spiekermanna. Dalton Maag iz Londona je još jedan. Bilo je slučajeva kada sam trebao vremena da jednostavno istražim sve fontove koji dolaze iz ove dvije ljevaonice i gotovo da nije bilo nijednog što mi se nije svidjelo. Čini se da njihovi stilovi odgovaraju onome što najčešće tražim. A to nije slučajnost

Vidite, kad dizajner tipa počne raditi na novom fontu, rijetko počinju ispočetka. Češće je to što počinju dizajnirati novi font na vrhu postojećeg. Koriste istu strukturu, ali još uvijek dolaze do originalnog dizajna. Ali zbog te zajedničke osnovne strukture, fontovi obično mogu dobro raditi zajedno. Stoga je dobra kombinacija fontova koji potječu iz iste livnice.

Kombiniranje fontova istog autora

Slično kao i kombiniranje fontova temeljenih na ljevaonici koja ih je dizajnirala kombinira ih prema autoru. Kao što je spomenuto, ljevaonice vrsta obično koriste baznu temeljnu strukturu za proizvodnju različitih fontova. Vjerojatno je još češće da to rade autori fontova. Kombiniranje, na primjer, fontova koje je Adrian Frutiger dizajnirao, gotovo je sigurna opklada.

Iznad: Univers u pozadini i Apollo istaknut u prvom planu (Oba dizajnirao Adrian Frutiger). Primjetite koliko su različiti u stilu, ali mnoge se ključne točke gotovo savršeno presijecaju.

I dalje preporučujem da dva fonta stavite jedan pored drugog i da ih uspoređujem, baš kao što smo to radili s Apollo i Univers iznad. Pokušajte utvrditi djeluje li neka kombinacija ili ne, na sličan način na koji smo uspoređivali fontove na temelju x-visine, ali više se usredotočite na ukupne proporcije. U ovom trenutku vam je potrebno stvarno proučiti dva slova. Rekao sam ti da za to treba vremena, sjećaš se? Ovu kombinaciju treba koristiti kao harmoničnu, a ne kontrastnu.

Kombiniranje fontova temeljenih na povijesnoj eri

Procjena fontova na temelju vremenskog razdoblja dobro funkcionira s kontrastom ili harmonijom. Možete odabrati dva slova koja su vrlo udaljena ili su iz istog razdoblja. Oboje bi trebali raditi.

Skoro 200 godina razdvaja stvaranje Baskervillea i Future.

Smatram da ovaj pristup najbolje funkcionira sa fontovima koji su osmišljeni prije digitalne revolucije. Trenutno je dizajnirano previše previše fontova. Uparivanje isključivo na činjenici da su iz istog razdoblja možda nije dovoljno.

Korištenje super sučelja

Postoje takozvani super tipki. Slojevi koji dolaze u oba sans-serif i serif stila. Merriweather i Merriweather Sans su sjajni primjeri. Tako su i Roboto i Roboto Slab. Jednostavno ne možete pogriješiti upotrebom stilova jedne super obitelji. Ovo može biti odličan način za početak razvijanja vještina kombiniranja fontova.

Neki seftovi dolaze u serif i u serif (ili čak u više stilova). Ne možete pogriješiti ako ih kombinirate.

Primjer kombiniranja fontova

Ovaj je vodič prilagođavanje petog poglavlja iz knjige Better Web Typography za bolju web stranicu, tako da su u ovoj fazi čitatelji 4 poglavlja i već su prošli kroz postupak odabira glavnog (sidranog) fonta.

Font sidra

OK, u prošlom smo poglavlju puno naučili. Stavimo to novo stečeno znanje na upotrebu. Slijedom gore opisanog postupka moramo započeti s fontom sidra. To imamo, kao što smo već odlučili što želimo koristiti u 3. poglavlju kada smo odabrali FF Meta. Krenimo ravno na korak 2.

Primjer sadržaja za web mjesto postavljen u FF Meta - font koji smo odabrali ranije u knjizi.

Pronalaženje kandidata za moguće kombinacije

Tražimo font koji možemo koristiti za naslove. Pogledajmo ključne točke koje smo zapisali iz kratkog teksta kada smo tražili font teksta teksta

  • web stranica se treba osjećati moderno i suvremeno; njegov sadržaj treba biti lagan za čitanje kako bi se udovoljilo zauzetom ali znatiželjnom entuzijastu
  • web stranica mora biti usmjerena na sadržaj, s vrlo malo, ali kvalitetnim i dobro ciljanim oglasima
  • kao i svaka web lokacija s takvom vrstom prometa i publike, ona mora raditi na različitim uređajima.

Zapišemo nekoliko ključnih točaka koja će nam pomoći pronaći tekst zaglavlja, baš kao što smo to učinili sa tekstom tijela:

  • definitivno sans-serif (trebamo nešto što će biti visokog kontrasta u odnosu na naš tekst teksta)
  • treba se osjećati moderno što znači veće x-visine
  • mora dobro raditi s većim veličinama fonta
  • što više tegova i stilova to bolje
  • Značajke OpenType-a nisu potrebne (osim ligatura, rijetko koristim i druge OpenType značajke s naslovima)
  • treba samo engleski podskup znakova
  • mora se dobro prikazati na uobičajenim ekranima (i mobilnim i desktop).

Sa napisanim napisom, spremni smo započeti pretragu. Otpustimo TypeKit i pronađite nekoliko kandidata. Postavimo filtre tako da možemo vidjeti samo sans-serif, preporučuje se za naslove, veliku težinu i veliku x visinu. Velika visina x odgovarat će onome što tražimo, ali i x-visina FF Meta kojeg smo odabrali za tekst teksta.

Prolazim kroz 40 rezultata koji su stigli i izborim za uži izbor sljedeće: Korolev, FF Enzo, Quatro, Camingodos i JAF Facit. Samo pet; Valjda imam dobru predstavu o tome što tražim.

Procjena kombinacija fontova

Budući da nas ima samo pet, možemo zaroniti ravno i započeti eksperimentirati s njima. Dodajmo ih u naš projekt u TypeKitu i učitajmo ih u našu web stranicu primjera. Zatim kopiramo neke naslove iz našeg primjera članka o sadržaju i dodajemo ih u.

Primjer koda iz ovog poglavlja može se pogledati na CodePen-u.

U početku neka ocjenjuju kandidate prema njihovoj zadanoj veličini i boji. Možda možemo neke od njih eliminirati bez dubokog kopanja. Zapravo, nešto o kome JAF Facit nije u redu pa bismo to mogli eliminirati. Neki su znakovi, poput "w" i "y", u Quatru sasvim jedinstveni dizajn i ističu se. Na loš način. Prebacimo to s popisa. Ponekad je zaista tako jednostavno. Pogledavši bliže FF Enzo otkriva da je jasno humanistički stil (primjetljiv kontrast i blago nagnut) koji nije nešto što tražimo. To je treći na našem popisu.

Eliminiranje kombinacija fontova

U fazi ocjenjivanja uspjeli smo eliminirati tri kombinacije, tako da nas ostavljaju dva moguća kandidata: Korolev i Camingodos. Pogledajmo bliže ovo dvoje i eksperimentirajmo dalje.

Camingodos također ima blagi humanistički osjećaj, ali to nije tako jasno kao što je to bio slučaj s FF Enzo. Likovi su malo uži, a visina x je velika. Postoji određeni kvadratni osjećaj u to nisam siguran. Osjeća se kao da pokušava biti tehnološki, ali ne ide skroz (zbog te humanističke strane). Pogledajmo bliže Korolev.

Korolev se osjeća jedinstveno. Vrlo uski znakovi, velike x visine i čini se da je malo sažet. Također ima kvadratni osjećaj, ali ne tako očit kao Camingodos. Isprobajmo ovo dvoje u boji koju će se najvjerojatnije upotrijebiti - crvenoj.

Pokušajmo i malo lakšu težinu - srednju umjesto podebljanih.

Sada je to zanimljivo Korolev doslovno oživi kad je malo svjetlije. Sada je u potpunoj suprotnosti s fontom teksta tijela. Camingodos, s druge strane, izgleda čudno. Nedostaje identitet i s tim se ne slaže sa fontom teksta teksta. Glavni problem s njim je u tome što je na ogradi - previše je sličan fontu tijela, da bi bio istinski kontrast, a u određenoj mjeri i kontrast. Ono što kod kontrasta postoji u tipografiji je da ono mora biti jasno ili nepostojeće. Time je Korolev jasan pobjednik. Naš konačni rezultat izgleda ovako:

Pogledajte primjer uživo na bestwebtype.com/book/c5.

Više o boljoj web tipografiji u knjizi

Od ovog trenutka, knjiga istražuje ritam web tipografije, modularne ljestvice i što znači „smislena tipografija“, sastavljajući stranice, reagirajući tipografiju na webu, a također se udubljavaju u četiri dodatna poglavlja o mikro tipografiji. To je web-stranica uživo primjera koja se izgrađuje kao vaš napredak kroz poglavlja.

Kombinirajući varalice za fontove

Na temelju ovog vodiča stvorio sam dvostrani varalica o ispisu o kombiniranju fontova. Nabavite, isprintajte i počnite stvarati fenomenalne kombinacije fontova.

Nabavite varalica za kombiniranje fontova →

Ostale cool stvari iz kategorije Better Web

Na web mjestu Better Web Type ima više zgodnih stvari: besplatni tečaj web tipografije, igra s memorijom fonta, igra za učenje za oblikovanje savršenih odlomaka, kviz itd.

Posjetite betterwebtype.com →