En guide til at kombinere skrifttyper

Kombination af skrifttyper er en af ​​de vanskeligste dele af typografien. Her er en guide kombineret med et eksempel, der hjælper dig med at få skrifttypekombinationer rigtige.

Denne vejledning er baseret på kapitel 5 fra bogen Better Web Typography for a Better Web af Matej Latin. Bogen består af 13 kapitler, gennem hvilke læseren designer og bygger et eksempel på et websted.

Denne guide er også tilgængelig på traditionel kinesisk.

Har du virkelig brug for mere end en skrifttype?

Dårlig typografi på Internettet i de første år af internettet fik ofte skylden for det dårlige udvalg af tilgængelige skrifttyper. Men vi lærte allerede, at typografi ikke kun handler om valg af skrifttyper. Et af dens mål (sandsynligvis det vigtigste) er at præsentere information på en måde, der er læsbar og let at forbruge. Inden vi begynder at lede efter en skrifttype, der kan føjes til vores design og kombinere den med vores kropsteksttype, er vi nødt til at spørge os selv: har vi virkelig brug for mere end en skrifttype? Tilføj ikke bare en af ​​dem for det. Der er ingen regel i typografi, der siger, at jo flere skrifttyper, der er bedre, det modsatte er sandsynligvis mere sandt. Der er ingen garanti for, at tilføjelse af en anden skrifttype til dit websted vil forbedre dens typografi. Jeg kan godt lide at holde min typografi enkel og solid. Som en maskine - jo færre bevægelige dele, jo mindre sandsynligt er det for at bryde sammen.

Dårlig typografi på Internettet i de første år af internettet fik ofte skylden for det dårlige udvalg af tilgængelige skrifttyper. Men vi lærte allerede, at typografi ikke kun handler om valg af skrifttyper. Et af dens mål (sandsynligvis det vigtigste) er at præsentere information på en måde, der er læsbar og let at forbruge. Inden vi begynder at lede efter en skrifttype, der kan føjes til vores design og kombinere den med vores kropsteksttype, er vi nødt til at spørge os selv: har vi virkelig brug for mere end en skrifttype? Tilføj ikke bare en af ​​dem for det. Der er ingen regel i typografi, der siger, at jo flere skrifttyper, der er bedre, det modsatte er sandsynligvis mere sandt. Der er ingen garanti for, at tilføjelse af en anden skrifttype til dit websted vil forbedre dens typografi. Jeg kan godt lide at holde min typografi enkel og solid. Som en maskine - jo færre bevægelige dele, jo mindre sandsynligt er det for at bryde sammen.

1700-tals typografisk arbejde i en enkelt skrifttype - Baskerville - af John Baskerville selv.
Det er en sikker regel at ikke blande forskellige stilarter af bogstaver på den samme side eller forskellige ansigter af typen i den samme bog.
- Eric Gill

Eric Gill, en ganske kontroversiel mand, men en stor typograf (blandt mange andre ting, han gjorde), havde en lignende opfattelse. Der er ikke meget, du kan gøre bedre med flere skrifttyper, end du kan med en enkelt. Forsøg at udfordre dig selv og oprette et websted ved hjælp af kun en skrifttype. Hvis det kun er til eksperiment og sjov, synes jeg, at alle burde prøve det, da der er masser at lære af det.

For nylig redesignet matejlatin.co.uk. Typografifokuseret, men kun ved hjælp af en enkelt skrifttype.

Jeg har for nylig redesignet min personlige hjemmeside. En af de ting, jeg ønskede at skille sig ud, var minimalismen, der er en så stor del af mit liv. For bedst at gøre det, besluttede jeg at bruge en enkelt skrifttype. Jeg ønskede også, at webstedet skulle være typografifokuseret (bogstaveligt talt 95% af det er typografi) ovenpå, hvilket gjorde udfordringen endnu sværere. Jeg ledte efter en ren, sprød og enkel sans-serif-font, der ville understrege det endnu mere. I sidste ende valgte jeg Gibson fra Canada Type. Det har en moderne, men lidt venlig fornemmelse. Og det fungerer godt, når det er indstillet på enorme størrelser. Det var lidt af en udfordring at få typografien til det websted, men det lykkedes mig kun ved at bruge forskellige størrelser, vægte og kun to farver - mørk og mellemgrå.

Jeg inkluderede det eksempel i bogen, fordi det er fantastisk at vise, hvor meget der kan gøres med en enkelt skrifttype. Ikke kun af typografimestre som John Baskerville, men også af selvlærte designere som mig. Tror du, at du stadig har brug for en anden skrifttype til dit projekt? Ingen bekymringer, læs videre.

En fire-trins proces til at kombinere skrifttyper

Hvis du stadig tror, ​​du har brug for mere end en skrifttype til dit websted, har du brug for en systematisk proces for at guide dig. Den, jeg beskriver her, er en tilpasset version af den, der er beskrevet i Tim Browns bog Combining Typefaces. Her er de fire trin:

  1. Find en anker skrifttype til din hovedtekst
  2. Find et par sekundære skrifttyper til mulige kombinationer
  3. Evaluer kombinationen
  4. Fjern / vælg skrifttypekombination.
Fremgangsmåden ovenfor antager, at du starter med den allerede valgte skrifttype. Processen kan let vendes, hvis du først vil starte med en titelskrift.

Der er to tilgange til at kombinere skrifttyper og fem retningslinjer, der kan hjælpe dig med trin 3 fra diagrammet ovenfor. Lad os se.

To tilgange til evaluering af skrifttypekombinationer

Kontrast og harmoni er de to mest grundlæggende principper, når det kommer til design, arkitektur og kunst. Begge er også afgørende, når det kommer til typografi. Nogle evalueringer beskrevet i denne proces fungerer kun som en kontrastkombination, nogle kun som en harmonisk og nogle som begge. Lad os se på et eksempel i det virkelige liv.

Kontrastive kombinationer

Se på billedet af kontoret ovenfor. Hvordan vil du beskrive det? Det føles moderne, ikke? Men der er noget andet. Det føles også varmt. Usædvanligt for kontorer med moderne, næsten futuristiske møbler. Alligevel gør denne. Murstenen bringer denne følelse af varme og hygge til et rum, der ville se koldt uden. Det samme kan bruges til at kombinere skrifttyper.

Hvordan kan vi anvende dette til typografi? Lad os tage Baskerville-skrifttypen til vores hovedteksttekst. Baskerville blev designet af John Baskerville i 1754. Det var en moderne skrifttype på det tidspunkt, da det skubbede grænserne for hvad der var muligt i typografi. Det opleves dog som en klassiker i disse dage. Det fremkalder følelser af tillid og varme. Baseret på et eksperiment udført af Errol Morris er det den mest pålidelige skrifttype omkring. Lad os nu komplementere det med en store bogstaver Futura til overskrifter. Futura blev designet af Paul Renner i 1927. Det er en geometrisk font fra sans-serif. Det var en moderne geometrisk sans-serif-skrifttype, da den først blev designet, og den føles stadig moderne i dag.

Vores design ser rig ud. Luksuriøs. Det har en historie at fortælle. Men vigtigst af alt - det fungerer. Den bruger to skrifttypeklassikere fra forskellige tidsperioder. Hver kommer fra det modsatte af skalaen mellem moderne / kolde og klassiske / varme. Sammen er de som ild og is, der forvandles til flydende vand.

Harmoniske kombinationer

Harmoni er nøjagtigt det modsatte af kontrast. Så hvis du ser på billedet af kontoret ovenfor, vil du bemærke, hvor moderne det ser ud overalt. Minimalistisk rum uden dekorationer kombineret med moderne møbler. Hvordan kunne vi gentage noget lignende i typografi?

Vi brugte Din Alternate til titlen og Helvetica til body font i kombinationen ovenfor. Begge har en let industriel og moderne fornemmelse. Der er mange funktioner, der gør de to skrifttyper ens, men alligevel er de forskellige nok til at fungere godt som en kombination.

Fem retningslinjer for kombination af skrifttyper

Kombination af skrifttyper med lignende x-højde

Kan du huske, da jeg bad dig huske x-højde i kapitlet om skrifttypes anatomi? Det er her, det kommer godt med. En anden måde at evaluere en skrifttypekombination på er at se nærmere på deres x-højder for at se, om de stemmer overens. De skulle være meget tæt på værst. Skrifttyper med lignende x-højde fungerer bedre sammen, da de har en lignende visuel vægt. Især når det kommer til lodret rytme (noget vi vil dække i det næste kapitel).

Over: Futura og Baskerville har en lignende x-højde, som forstærker dem som en god skrifttypekombination.

Denne kombination fungerer med enten kontrast eller harmoni. Vælg enten skrifttyper, der har matchende x-højde, eller skrifttyper, der har meget forskellige x-højder. Gå ikke med noget imellem.

Kombination af skrifttyper fra samme støberi

Jeg bemærkede noget gennem alt det typografiske arbejde, jeg gjorde indtil videre. Ved at vælge skrifttyper er jeg tilbøjelig til at vende tilbage til et bestemt par type støberier, der producerede dem. Tyskland-baseret FontFont er en af ​​dem - Jeg er fan af Erik Spiekermanns arbejde. London-baserede Dalton Maag er en anden. Der var lejligheder, hvor jeg tog mig tid til blot at udforske alle skrifttyper fra disse to støberier, og der var næppe nogen, som jeg ikke kunne lide. Det ser ud til, at deres stilarter matcher det, jeg oftest ser efter. Og det er ikke tilfældigt.

Du ser, når en type designer begynder at arbejde på en ny font, starter de sjældent fra bunden. Det er mere almindeligt, at de begynder at designe en ny font oven på en eksisterende. De bruger den samme struktur, men har stadig et design, der er originalt. Men på grund af den delte underliggende struktur, kan skrifttyperne normalt fungere godt sammen. Det er derfor en god indsats at kombinere skrifttyper, der stammer fra samme støberi.

Kombination af skrifttyper fra den samme forfatter

Ligesom at kombinere skrifttyper baseret på støberiet, der designede dem, er det at kombinere dem baseret på deres forfatter. Som nævnt bruger støberier typisk en underliggende basisstruktur til at fremstille forskellige skrifttyper. Det er sandsynligvis endnu mere almindeligt, at fontforfattere gør det. At kombinere fx skrifttyper, som Adrian Frutiger designet, er næsten en sikker satsning.

Over: Univers i baggrunden og Apollo skitseret i forgrunden (begge designet af Adrian Frutiger). Bemærk, hvor forskellige de er i stil, men mange nøglepunkter krydser næsten perfekt.

Jeg anbefaler stadig at placere de to skrifttyper ved siden af ​​hinanden og sammenligne dem, ligesom vi gjorde med Apollo og Univers ovenfor. Prøv at finde ud af, om en kombination fungerer eller ej, på en lignende måde som vi sammenlignede skrifttyper baseret på x-højde, men fokuser mere på de samlede proportioner. På dette tidspunkt skal du virkelig studere de to skrifttyper. Jeg sagde, at det tager tid, kan du huske? Denne kombination skal bruges som en harmonisk, ikke en kontrast.

Kombination af skrifttyper baseret på den historiske æra

Evaluering af skrifttyper baseret på tidsperioden fungerer godt med kontrast eller harmoni. Du kan vælge to skrifttyper, der ligger meget langt fra hinanden eller fra den samme tidsperiode. Begge skal arbejde.

Der er næsten 200 år, der adskiller oprettelsen af ​​Baskerville og Futura.

Jeg finder ud af, at denne tilgang fungerer bedst med skrifttyper, der blev designet før den digitale revolution. Der er lige for mange skrifttyper, der designes i øjeblikket. Det er muligvis ikke nok at parre dem udelukkende på det faktum, at de er fra samme tidsperiode.

Brug af super skrifttyper

Der er de såkaldte super skrifttyper. Skrifttyper, der kommer i både sans-serif og serif-stilarter. Merriweather og Merriweather Sans er gode eksempler. Det samme gælder Roboto og Roboto Slab. Du kan simpelthen ikke gå galt ved at bruge typografierne i en superfamilie. Dette kan være en god måde at begynde at udvikle dine font-kombination færdigheder.

Nogle skrifttyper findes i både serif og sans serif (eller endda flere stilarter). Du kan ikke gå galt, hvis du kombinerer disse.

Et eksempel på at kombinere skrifttyper

Denne vejledning er en tilpasning af kapitel 5 fra Better Web Typography til en Better Web-bog, så på dette trin er læserne 4 kapitler i og allerede gennemgik processen med at vælge hovedtypen (anker).

Anker font

OK, vi lærte meget i det sidste kapitel. Lad os bruge den nyligt erhvervede viden til brug. Efter den ovenfor beskrevne proces skal vi starte med ankerstypen. Det har vi, da vi allerede besluttede, hvad vi ville bruge i kapitel 3, da vi valgte FF Meta. Lad os gå lige til trin 2.

Eksemplet på indhold til webstedet, der er angivet i FF Meta - skrifttypen vi valgte tidligere i bogen.

Find kandidater til mulige kombinationer

Vi leder efter en skrifttype, vi kan bruge til overskrifter. Lad os gennemgå de vigtigste punkter, vi skrev ned fra briefen, da vi ledte efter skrifttypen:

  • webstedet skal føles moderne og opdateret; dens indhold skal være let at læse for at imødekomme den travle, men nysgerrige teknologientusiast
  • webstedet skal være indholdsfokuseret med meget få, men af ​​høj kvalitet og målrettet annoncer
  • som ethvert websted med den slags trafik og publikum, skal det arbejde på tværs af forskellige enheder.

Lad os skrive ned et par nøglepunkter, der kan hjælpe os med at finde overskriftsskrifttypen, ligesom vi gjorde for brødtekst:

  • bestemt sans-serif (vi har brug for noget, der vil være i høj kontrast sammenlignet med vores kropstekst font)
  • har brug for at føle sig moderne, hvilket betyder større x-højde
  • har brug for at fungere godt med større skriftstørrelser
  • jo flere vægte og stilarter, jo bedre
  • OpenType-funktioner kræves ikke (udover ligaturer bruger jeg sjældent andre OpenType-funktioner med overskrifter)
  • har kun brug for den engelske delmængde af tegn
  • skal gengives godt på de fælles skærme (både mobil og desktop).

Med det nedskrevet er vi klar til at begynde at søge. Lad os affyre TypeKit og finde et par kandidater. Lad os indstille filtrene, så vi kun kan se sans-serif, anbefalet til overskrifter, tung vægt og stor x-højde. Den store x-højde matcher det, vi leder efter, men også x-højden på FF Meta, vi valgte til brødtekst.

Jeg gennemgår de 40 resultater, der kom igennem, og kortlister følgende: Korolev, FF Enzo, Quatro, Camingodos og JAF Facit. Kun fem; Jeg har vel en god idé om, hvad jeg leder efter.

Evaluering af fontkombinationer

Fordi der kun er fem, kan vi dykke direkte ind og begynde at eksperimentere med dem. Lad os føje dem til vores projekt i TypeKit og indlæse dem på vores eksempelwebsted. Derefter kopierer vi nogle af titlerne fra vores eksempelindholdsartikel og tilføjer dem ind.

Kodeeksempel fra dette kapitel kan ses på CodePen.

Lad os først vurdere kandidaterne ved deres standardstørrelse og farve. Måske kan vi fjerne nogle af dem uden at grave for dybt. Der er faktisk noget, der ikke føles rigtigt ved JAF Facit, så vi kan fjerne det. Nogle tegn, som “w” og “y”, i Quatro er ret unikt designet, og de skiller sig ud. På en dårlig måde. Lad os krydse det fra listen. Nogle gange er det virkelig så enkelt. Når man ser nærmere på FF Enzo afslører det klart humanistisk stil (mærkbar kontrast og let skrånende), som ikke er noget, vi leder efter. Det er den tredje fra vores liste.

Fjernelse af skrifttypekombinationer

Vi var i stand til at eliminere tre kombinationer i evalueringsfasen, så det efterlader os to mulige kandidater: Korolev og Camingodos. Lad os se nærmere på disse to og eksperimentere videre.

Camingodos har også en svag humanistisk fornemmelse, men det er ikke så tydeligt som det var med FF Enzo. Karaktererne er lidt smalere og x-højden er stor. Der er en bestemt firkantet fornemmelse, som jeg ikke er sikker på. Det føles som om det prøver at være teknisk men ikke gå hele vejen (på grund af den humanistiske side). Lad os se nærmere på Korolev.

Korolev føles unik. Meget smalle tegn, stor x-højde, og det ser ud til, at de er lidt kondenseret. Det har også en firkantet fornemmelse, men ikke så indlysende som Camingodos. Lad os prøve de to i den farve, de sandsynligvis vil blive brugt - rød.

Lad os prøve en lidt lettere vægt også - medium i stedet for fed.

Nu er det interessant. Korolev kommer bogstaveligt talt til live, når den er lidt lettere. Det står nu i fuld kontrast til skrifttypen til brødteksten. Camingodos ser derimod mærkelig ud. Det mangler identitet, og med det står det ikke godt imod brødteksten. Det største problem med det er, at det er på hegnet - det ligner for kropstekstfonten til at være virkelig kontrasterende og alligevel kontrasterende til en vis grad. Sagen med kontrast i typografi er, at den skal være klar eller ikke-eksisterende. Dette gør Korolev til en klar vinder. Vores slutresultat ser sådan ud:

Se liveeksemplet på betterwebtype.com/book/c5.

Mere om bedre webtypografi i bogen

Herefter undersøger bogen rytme i webtypografi, modulskalaer, og hvad "meningsfuld typografi" betyder, at komponere sider, responsiv webtypografi og dykke også i 4 yderligere kapitler om mikrotypografi. Dette er det levende eksempelwebsted, der bliver bygget som dit fremskridt gennem kapitlerne.

Kombination af skrifter snyderark

Jeg oprettede et udskrivbart, tosidet snyderi om at kombinere skrifttyper baseret på denne vejledning. Hent det, udskriv det og start med at oprette fantastiske skrifttypekombinationer.

Hent dit snyderi til kombination af skrifttyper →

Andre seje ting fra Better Web Type

Der er flere seje ting på Better Web Type-webstedet: et gratis webtypokursus, et fonthukommelsespil, et læringsspil til at forme perfekte afsnit, en quiz osv.

Besøg betterwebtype.com →