Opas fonttien yhdistämiseen

Fonttien yhdistäminen on typografian vaikeimpia osia. Tässä on opas yhdistettynä esimerkkiin, jotka auttavat sinua saamaan fonttiyhdistelmät oikein.

Tämä opas perustuu Matej Latin -yrityksen teoksen Better Web Typography for Better Web -kappaleen lukuun 5. Kirja koostuu 13 luvusta, joiden kautta lukija suunnittelee ja rakentaa esimerkkisivuston.

Tämä opas on saatavana myös perinteisen kiinan kielellä.

Tarvitsetko todella useampaa kuin yhtä kirjasinta?

Verkon huonoa typografiaa Internetin alkuvuosina syytettiin usein saatavilla olevasta kirjasintyypistä. Mutta olemme jo oppineet, että typografia ei ole pelkästään fonttien valintaa. Yksi sen tavoitteista (todennäköisesti tärkein) on tietojen esittäminen luettavalla ja helppo kuluttaa tavalla. Ennen kuin aloitamme etsimällä fonttia, jota voimme lisätä suunnitteluun ja yhdistää sen tekstitekstiimme, meidän on kysyttävä itseltämme: tarvitsemmeko todella useampaa kuin yhtä kirjasinta? Älä lisää vain sitä sen vuoksi. Tyypografiassa ei ole sääntöä, jonka mukaan mitä enemmän fontteja käytetään, sitä parempi (päinvastoin, totta todennäköisemmin). Ei ole takuuta, että uuden fontin lisääminen verkkosivustollesi parantaa sen typografiaa. Tykkään pitää typografiani yksinkertaisena ja vankkana. Kuten kone - mitä vähemmän liikkuvia osia, sitä epätodennäköisempi se on.

Verkon huonoa typografiaa Internetin alkuvuosina syytettiin usein saatavilla olevasta kirjasintyypistä. Mutta olemme jo oppineet, että typografia ei ole pelkästään fonttien valintaa. Yksi sen tavoitteista (todennäköisesti tärkein) on tietojen esittäminen luettavalla ja helppo kuluttaa tavalla. Ennen kuin aloitamme etsiä kirjasintyyppiä, jota voimme lisätä suunnitteluun ja yhdistää sen kehotekstifonttiin, meidän on kysyttävä itseltämme: tarvitsemmeko todella useampaa kuin yhtä kirjasinta? Älä lisää vain sitä sen vuoksi. Tyypografiassa ei ole sääntöä, jonka mukaan mitä enemmän fontteja käytetään paremmin (päinvastoin, totta todennäköisemmin). Ei ole takuuta, että uuden fontin lisääminen verkkosivustollesi parantaa sen typografiaa. Tykkään pitää typografiani yksinkertaisena ja vankkana. Kuten kone - mitä vähemmän liikkuvia osia, sitä epätodennäköisempi se on.

John Baskerville itse kirjoitti 1700-luvun typografisen teoksen yhdellä kirjasimella - Baskerville.
On turvallinen sääntö olla sekoittamatta saman tyyppisiä kirjaintyylejä tai saman tyyppisiä kirjaintyyppejä samalle sivulle.
- Eric Gill

Eric Gill, melko kiistanalainen mies, mutta suuri typografia (muun muassa hän teki), oli samanlainen mielipide. Ei ole paljon mitä voit tehdä paremmin useammalla fontilla kuin voit yhdellä. Yritä haastaa itseäsi ja luoda verkkosivusto vain yhdellä fontilla. Jos vain kokeiluun ja hauskanpitoon, mielestäni kaikkien tulisi kokeilla sitä, koska siitä on paljon opittavaa.

Äskettäin uusittu matejlatin.co.uk. Typografiakeskeinen, mutta käyttää vain yhtä kirjasinta.

Suunnittelin hiljattain henkilökohtaisen verkkosivustoni. Yksi asioista, jotka halusin erottua oli minimalismi, joka on niin suuri osa elämääni. Parhaan tekemiseksi päätin käyttää yhtä kirjasinta. Halusin myös, että verkkosivusto olisi typografiaan keskittynyt (kirjaimellisesti 95 prosenttia siitä on typografiaa), joka vaikeutti haasteta vieläkin. Etsin puhdasta, terävää ja yksinkertaista sans-serif-kirjasinta, joka korostaisi sitä vielä enemmän. Lopulta valitsin Gibson Kanadan tyypistä. Sillä on moderni, mutta hieman ystävällinen tunnelma. Ja se toimii hienosti, kun se asetetaan suuriin kokoihin. Oli haaste saada typografia oikein kyseiselle verkkosivustolle, mutta onnistin tekemään sen käyttämällä vain erikokoisia, painoisia ja vain kahta väriä - tummaa ja keskiharmaata.

Lisäsin kyseisen esimerkin kirjaan, koska se näyttää hienolta kuinka paljon voidaan tehdä yhdellä fontilla. Ei vain typografia mestareiden, kuten John Baskerville, vaan myös itseni opettamien suunnittelijoiden kuten minä. Uskotko, että tarvitset vielä toisen kirjasimen projektiisi? Ei hätää, lue eteenpäin.

Nelivaiheinen prosessi fonttien yhdistämiseksi

Jos uskot silti, että tarvitset useita fontteja verkkosivustollesi, tarvitset järjestelmällisen prosessin opastamaan sinua. Tässä kuvailemasi on mukautettu versio Tim Brownin teoksessa Yhdistämällä kirjasintyyppejä kuvatusta versiosta. Tässä on neljä vaihetta:

  1. Etsi ankkurifontti päätekstillesi
  2. Etsi muutama toissijainen fontti mahdollisille yhdistelmille
  3. Arvioi yhdistelmä
  4. Poista / valitse fonttiyhdistelmä.
Yllä oleva prosessi olettaa, että aloitat jo valitun tekstin fontilla. Prosessi voidaan helposti kääntää, jos haluat aloittaa ensin otsikon kirjasimella.

Fonttien yhdistämisessä on kaksi lähestymistapaa ja viisi ohjeistoa, jotka voivat auttaa sinua yllä olevan taulukon vaiheessa 3. Katsotaanpa.

Kaksi lähestymistapaa fonttiyhdistelmien arviointiin

Kontrasti ja harmonia ovat kaksi perusperiaatetta suunnittelussa, arkkitehtuurissa ja taiteessa. Molemmat ovat tärkeitä myös typografian suhteen. Jotkut tässä prosessissa kuvatut arvioinnit toimivat vain kontrastina yhdistelmänä, toiset vain harmonisena ja toiset molemmina. Katsotaanpa tosielämän esimerkkiä.

Kontrastiset yhdistelmät

Katso yllä oleva toimistokuva. Kuinka kuvailisit sitä? Tuntuu modernilta, eikö? Mutta siellä on jotain muuta. Se on myös lämmin. Epätavallinen toimistoihin, joissa on modernit, melkein futuristiset huonekalut. Silti tämä tekee. Tiiliseinä tuo tämän lämmön ja viihtyisyyden huoneeseen, joka näyttää kylmältä ilman sitä. Samaa voidaan soveltaa fonttien yhdistämiseen.

Kuinka voimme soveltaa tätä typografiaan? Oletetaan Baskerville-kirjasin päätekstiin. Baskerville on suunnitellut John Baskerville vuonna 1754. Se oli tuolloin moderni kirjasinlaji, koska se työnsi typografian mahdolli- suuden rajoja. Sitä pidetään kuitenkin nykyään klassikkana. Se herättää luottamuksen ja lämmön tunteita. Errol Morrisin suorittaman kokeilun perusteella se on luotettavin fontti ympärillä. Nyt täydennetään sitä vain isoilla Futura-otsakkeilla. Futura on suunnitellut Paul Renner vuonna 1927. Se on geometrinen sans-serif-fontti. Se oli moderni geometrinen sans-serif-fontti, kun se suunniteltiin ensimmäisen kerran, ja se tuntuu edelleen modernilta tänäkin päivänä.

Suunnittelu näyttää rikkaalta. Ylellinen. Sillä on tarina kertoa. Mutta mikä tärkeintä - se toimii. Se käyttää kahta fonttiluokitusta eri ajanjaksoilta. Jokainen niistä tulee vastakkaisesta asteikosta modernin / kylmän ja klassisen / lämpimän välillä. Yhdessä he ovat kuin tuli ja jää, jotka muuttuvat virtaamaan veteen.

Harmoniset yhdistelmät

Harmonia on täysin vastakohta kontrastille. Joten jos tarkastelet yllä olevaa toimiston kuvaa, huomaat kuinka moderni se näyttää koko. Minimalistinen tila ilman koristeita yhdistettynä moderniin huonekaluihin. Kuinka voimme toistaa jotain tällaista typografiassa?

Käytimme otsikossa Din Alternate ja kehon kirjasimessa Helveticaa yllä olevassa yhdistelmässä. Molemmilla on heihin lievä teollisuus ja moderni tunnelma. On monia ominaisuuksia, jotka tekevät kirjasimista samanlaisia, mutta silti ne ovat riittävän erilaisia ​​toimimaan hyvin yhdistelmänä.

Viisi ohjeita fonttien yhdistämiseen

Fonttien yhdistäminen samanlaisella x-korkeudella

Muista, kun käskin muistaa x-korkeuden kirjasintyyppien anatomiaa koskevassa luvussa? Täältä se on kätevä. Toinen tapa arvioida fonttiyhdistelmää on tarkastella tarkkaan niiden x-korkeuksia ja nähdä niiden vastaavuus. Niiden pitäisi olla pahimmassa paikassa hyvin lähellä. Fonttit, joilla on samanlainen x-korkeus, toimivat paremmin yhdessä, koska niiden visuaalinen paino on samanlainen. Varsinkin kun kyse on pystysuorasta rytmistä (jota käsittelemme seuraavassa luvussa).

Yllä: Futuralla ja Baskervillellä on samanlainen x-korkeus, mikä vahvistaa niitä hyvällä kirjasinkombinaatiolla.

Tämä yhdistelmä toimii joko kontrastin tai harmonian kanssa. Joko valitse kirjasimet, joilla on vastaava x-korkeus, tai fontit, joilla on hyvin erilainen x-korkeus. Älä mene jonkun väliin.

Yhdistetään saman valimon fontit

Huomasin jotain kaikesta tähän mennessä tekemästä typografiatyöstä. Valitsemalla fontteja pyrin palaamaan takaisin tiettyihin tyyppeihin, jotka tuottivat niitä. Saksalainen FontFont on yksi heistä - olen Erik Spiekermannin työn fani. Lontoossa sijaitseva Dalton Maag on toinen. Toisinaan otin aikaa tutkia yksinkertaisesti näiden kahden valimon tulevia fontteja, ja tuskin oli niitä, joista en pitänyt. Näyttää siltä, ​​että heidän tyylinsä vastaavat sitä mitä etsin yleisimmin. Eikä se ole sattumaa.

Kun tyyppisuunnittelija alkaa työskennellä uudella kirjasimella, ne alkavat harvoin tyhjästä. On tavallisempaa, että he alkavat suunnitella uutta kirjasinta olemassa olevan päälle. He käyttävät samaa rakennetta, mutta keksivät silti alkuperäisen mallin. Mutta jaetun taustalla olevan rakenteen vuoksi fontit voivat yleensä toimia hyvin yhdessä. Samasta valimosta peräisin olevien fonttien yhdistäminen on siis hyvä veto.

Yhdistetään saman kirjailijan fontit

Samanlainen kuin fonttien yhdistäminen niitä suunnitelleen valimoon perustuen, yhdistää ne niiden tekijän perusteella. Kuten mainittiin, tyyppivalimot käyttävät yleensä perusrakennetta eri kirjasimien tuottamiseksi. On todennäköisesti vielä tavallisempaa, että fonttien tekijät tekevät niin. Yhdistämällä esimerkiksi Adrian Frutigerin suunnittelemia fontteja on melkein varma veto.

Ylä: taustalla Univers ja etualalla Apollo (molemmat suunnitteli Adrian Frutiger). Huomaa kuinka erilaisia ​​ne ovat tyyliltään, mutta monet avainkohdat leikkaavat melkein täydellisesti.

Suosittelen silti, että asetat nämä kaksi kirjasinta vierekkäin ja vertaat niitä, samoin kuin edellä Apollon ja Universin kanssa. Yritä selvittää, toimiiko yhdistelmä vai ei, samalla tavalla kuin kuinka vertailimme fontteja x-korkeuteen perustuen, mutta keskity enemmän enemmän yleisiin mittasuhteisiin. Tässä vaiheessa sinun on todella tutkittava nämä kaksi kirjasinta. Sanoin, että tämä vie aikaa, muistatko? Tätä yhdistelmää tulisi käyttää harmonisena, ei kontrastina.

Yhdistä fontit historiallisen aikakauden perusteella

Fonttien arviointi ajanjakson perusteella toimii hyvin kontrastin tai harmonian kanssa. Voit valita kaksi fonttia, jotka ovat hyvin kaukana toisistaan ​​tai samasta ajanjaksosta. Molempien pitäisi toimia.

Baskervillen ja Futuran luomisesta on kulunut lähes 200 vuotta.

Mielestäni tämä lähestymistapa toimii parhaiten kirjasimilla, jotka on suunniteltu ennen digitaalista vallankumousta. Aivan liian monta fonttia on suunnitteilla tällä hetkellä. Pariliitos vain sen vuoksi, että he ovat samasta ajanjaksosta, ei ehkä riitä.

Superkirjojen käyttäminen

On olemassa ns. Super-kirjasintyyppejä. Kirjasintyypit, jotka tulevat sekä sans-serif- että serif-tyyleinä. Merriweather ja Merriweather Sans ovat hienoja esimerkkejä. Samoin ovat Roboto ja Roboto Slab. Et voi yksinkertaisesti mennä pieleen käyttämällä yhden superperheen tyylejä. Tämä voi olla loistava tapa aloittaa fonttien yhdistämistaitojen kehittäminen.

Jotkut kirjasintyypit ovat sekä serif- että sans serif-muotoisia (tai jopa enemmän tyylejä). Et voi mennä pieleen, jos yhdistät nämä.

Esimerkki fonttien yhdistämisestä

Tämä opas on kappaleen 5 mukautus Better Web Typography for Better Web -kirjalle, joten lukijat ovat tässä vaiheessa 4 lukua ja ovat jo käyneet läpi pää (ankkuri) kirjasimen valintaprosessin.

Ankkuri fontti

OK, opimme paljon viimeisessä luvussa. Laitetaan tämä äskettäin hankittu tieto käytettäväksi. Edellä kuvatun prosessin jälkeen meidän on aloitettava ankkurifontilla. Meillä on se, kuten olemme jo päättäneet, mitä halusimme käyttää luvussa 3, kun valitsimme FF Meta. Siirrytään suoraan vaiheeseen 2.

Esimerkki verkkosivuston sisällöstä, joka on asetettu FF Meta - fontti, jonka valitsimme aikaisemmin teoksesta.

Ehdokkaiden löytäminen mahdollisille yhdistelmille

Etsimme kirjasinta, jota voimme käyttää otsikoihin. Tarkastellaan tärkeimpiä kohtia, jotka kirjoitimme lyhyeltä ajalta etsiessäsi tekstitekstiä:

  • verkkosivuston on oltava modernin ja ajan tasalla olevan; sen sisällön on oltava helppolukuinen kiireisen, mutta utelias tekniikan harrastajan palvelemiseksi
  • verkkosivuston on oltava sisältökeskeistä, ja siinä on vain vähän, mutta korkealaatuisia ja hyvin kohdistettuja mainoksia
  • kuten minkä tahansa verkkosivuston, jolla on tällaista liikennettä ja yleisöä, sen on toimittava eri laitteiden välillä.

Kirjoita muutamia avainkohtia, jotka auttavat meitä löytämään otsikkotyypin, aivan kuten teimme tekstitekstin:

  • ehdottomasti sans-serif (tarvitsemme jotain, jonka kontrasti on suuri verrattuna kehoteksti fontini)
  • täytyy tuntea olevansa moderni, mikä tarkoittaa suurempaa x-korkeutta
  • on toimittava hyvin suurempien kirjasinkokojen kanssa
  • mitä enemmän painoja ja tyylejä, sitä parempi
  • OpenType-ominaisuuksia ei vaadita (ligatuurien lisäksi käytän harvoin muita OpenType-ominaisuuksia otsikoilla)
  • tarvitsee vain englannin merkistöjä
  • täytyy näyttää hyvin yleisillä näytöillä (sekä mobiililaitteilla että työpöydällä).

Kun tämä kirjoitetaan, olemme valmiit aloittamaan etsinnän. Palataan TypeKit ja löydetään muutama ehdokas. Asetetaan suodattimet niin, että näemme vain sans-serif-suositukset, joita suositellaan otsakkeille, painaville painoille ja suurelle x-korkeudelle. Suuri x-korkeus vastaa etsimäämme, mutta myös runkotekstiin valitun FF Meta -korkeuden x-korkeus.

Kävin läpi tulokset 40 tuloksesta ja valin seuraavat listat: Korolev, FF Enzo, Quatro, Camingodos ja JAF Facit. Vain viisi; Luulen, että minulla on hyvä idea siitä, mitä etsin.

Arvioidaan fonttiyhdistelmiä

Koska niitä on vain viisi, voimme sukeltaa suoraan sisään ja alkaa kokeilla niitä. Lisäämme heidät TypeKit-projektiimme ja lataa ne esimerkkisivustollemme. Sitten kopioimme joitain otsikoita sisältöesimerkistämme ja lisäämme ne.

Tämän luvun koodimallia voi tarkastella CodePenissä.

Aluksi arvioidaan ehdokkaita oletuskoollaan ja värinsä mukaan. Ehkä voimme poistaa joitain niistä kaivaamatta liian syvälle. Itse asiassa on jotain, joka ei tunnu oikealta JAF Facitista, jotta voimme poistaa sen. Jotkut Quatron merkit, kuten “w” ja “y”, ovat varsin yksilöllisesti suunniteltuja ja erottuvat. Huonolla tavalla. Ylitetään se pois luettelosta. Joskus se todella on niin yksinkertaista. Kun tarkastelemme FF Enzoa tarkemmin, paljastamme sen selvästi humanistisen tyylin (huomattava kontrasti ja hieman viistot), mikä ei ole jotain mitä etsimme. Se on kolmas listaltamme.

Fonttiyhdistelmien poistaminen

Pystyimme eliminoimaan kolme yhdistelmää arviointivaiheessa, joten meillä on kaksi mahdollista ehdokasta: Korolev ja Camingodos. Katsotaanpa tarkemmin näitä kahta ja kokeillaan edelleen.

Camingodolla on myös lievä humanistinen tunne siitä, mutta se ei ole niin selkeää kuin se oli FF Enzon kanssa. Merkit ovat hieman kapeampia ja x-korkeus on suuri. Sillä on tietty neliön tunne, josta en ole varma. Tuntuu siltä, ​​että se yrittää olla tech-y, mutta ei mennä loppuun asti (sillä humanistisella puolella). Katsotaanpa tarkemmin Korolevia.

Korolev tuntuu ainutlaatuiselta. Erittäin kapeat merkit, suuri x-korkeus ja näyttää siltä, ​​että se on hieman tiivistynyt. Siinä on myös neliömäinen tunnelma, mutta ei niin ilmeinen kuin Camingodos. Kokeillaan näitä kahta värissä, jota todennäköisimmin käytetään - punainen.

Kokeillaan myös hieman kevyempää painoa - keskipitkällä rohkean sijaan.

Nyt se on mielenkiintoista. Korolev herää kirjaimellisesti, kun se on kevyempi. Se on nyt täysin ristiriidassa tekstitekstin kanssa. Toisaalta Camingodos näyttää oudolta. Sillä ei ole identiteettiä, ja se ei kestä hyvin tekstitekstiä. Suurin ongelma siinä on, että se on aidalla - se on liian samankaltainen runkotekstin kanssa, jotta se olisi todella kontrasti ja silti jossain määrin vastakkaissa. Typografiassa on vastakohtana se, että sen on oltava joko selkeä tai olematon. Tämä tekee Korolevista selvän voittajan. Lopputuloksemme näyttää tältä:

Katso live-esimerkki osoitteessa betterwebtype.com/book/c5.

Lisätietoja kirjan paremmasta web-typografiasta

Tästä eteenpäin kirjassa tutkitaan verkkotyypityksen rytmiä, modulaarisia asteikkoja ja mitä ”merkityksellinen typografia” tarkoittaa, säveltämällä sivuja, reagoiva web-typografia ja sukeltaen myös 4 lisäosaan mikrotyypografiasta. Tämä on live-esimerkkisivusto, joka rakennetaan edistykseksi lukujen läpi.

Yhdistämällä fontteja huijata arkki

Loin tämän oppaan perusteella tulostettavan, kaksipuolisen huijauskoodin fontien yhdistämisestä. Hanki se, tulosta ja ala luomaan mahtavia fonttiyhdistelmiä.

Hanki huijarilehti fonttien yhdistämiseen →

Muut hienot jutut Better Web Typeltä

Better Web Type -verkkosivustolla on enemmän hienoja juttuja: ilmainen verkkotypografiakurssi, kirjasinmuistipeli, oppimispeli täydellisten kappaleiden muotoiluun, tietokilpailu jne.

Käy osoitteessa betterwebtype.com →