Share
Het koppelen van lettertypen kan een uitdaging zijn. Het selecteren van twee of meer lettertypen die goed werken, is één ding - het selecteren van twee die werken samen om je typografische doelen te bereiken, kan het zijn dat je naar de aspirine reikt. Laten we kijken of we eventuele hoofdpijn kunnen verlichten. Deze handleiding helpt u aan de slag met lettertypekoppelingen voor internet.
Gelukkig is typografie al heel lang geleden. Typografische regels en conventies hebben volop gelegenheid gehad om zichzelf te vestigen en er zijn veel middelen om u te helpen. Het enige probleem is dat je door te zoeken op internet alleen maar geconfronteerd zult worden met miljoenen tegenstrijdige meningen! Laten we kijken of we een paar dingen kunnen verduidelijken.
Hier volgt een kort overzicht van wat we in deze handleiding behandelen:
Houd de essentie in gedachten. Wanneer u meerdere lettertypen selecteert om samen te werken, is het van cruciaal belang dat u beide lettertypen onderhoudt eenheid en verscheidenheid.
Hoeveel lettertypen u in de mix gooit, is geheel aan u, maar houd rekening met het algemene effect dat u probeert te bereiken. Lettertypen, zoals mensen, hebben persoonlijkheden. En persoonlijkheden van lettertypen kunnen soms botsen, net als die van mensen. Denk aan je lettertypen als tafelgasten tijdens een huwelijksreceptie; één entertainer is meestal genoeg, omdat te veel sterke persoonlijkheden de sfeer onhandig kunnen maken, zoals een aflevering van Big Brother.
Zorg ervoor dat er is sommige charisma in de groep echter; acht mensen met weinig te zeggen, resulteren in een neuscurelle wacht op de speeches ...
Het is er niet meer, maar de bundel-site Fusion Ads 2011 sills in mijn hoofd als een geweldig voorbeeld van succes stack-em-high lettertype gebruiken.
Er zijn geen regels om te zeggen dat u een bepaald aantal lettertypen op een pagina-indeling wel of niet moet gebruiken. Het gebruik van meerdere lettertypen samen kan moeilijk zijn, harmonie bereiken is een uitdaging, maar als het je lukt, kan het resultaat decoratief en opvallend zijn. Gebruik minder lettertypen en uw taak is eenvoudiger. Probeer het beste van beide werelden te maken door lettertypen te selecteren met meerdere varianten en gewichten. Op deze manier kunt u profiteren van een reeks stijlen, veilig in de wetenschap dat ze elkaar prima zullen complimenteren.
Er zijn tal van gratis services waarmee u kunt profiteren van @ font-face: google fonts, fonts.com, de font kit-generator van fontsquirrel, maar geef niet meteen korting op het betalen voor lettertypen als het project dit vereist. De kosten van een licentie voor een enkel domein kunnen variëren, maar er zijn verschillende voordelen aan beschietingen.
Kwaliteit. De zorg en aandacht die besteed wordt aan de productie van commerciële lettertypen is meestal zichtbaar in de kwaliteit. Dat wil niet zeggen dat de ontwerpers achter gratis lettertypen gekooide apen zijn, verre van dat, maar er is vaak een kwalitatief verschil. Het is een verschil merkbaar in de fijnere details; de lijndiktes, de vormen, de witte ruimte en de tekenspatiëring (spatiëring tussen tekens).
Vergelijk deze twee vergelijkbare lettertypen ...
Drijfzand en Museo Sans afgerond De kerning uitgevoerd met Museo is superieur. Zonder wat sleutelen is de tekenspatiëring in Quicksand onvolmaakt (focus op de 'o' en de 'i' bijvoorbeeld) en sleutelen aan kerning op het web is niet enorm intuïtief. Er zijn tools, kern.js bijvoorbeeld, waarmee je kerning per karakter kunt specificeren, maar grote hoeveelheden tekst maken dit onpraktisch.
"Grote deal, het verschil is nauwelijks waarneembaar!" je zou kunnen zeggen, maar de duivel zit in de details. Dus mijn Nan vertelt het me.
oorspronkelijkheid. Een ander voordeel is de mogelijkheid om op te vallen met origineel werk. Nadat u heeft betaald voor uw lettertypen, is de kans groter dat uw ontwerp een element van uniekheid behoudt.
Gemeenschap. Uw hand in uw zak steken is ook een manier om de groei van de industrie te stimuleren. Gieterijen vertrouwen op gezonde handel om hun ambacht voort te zetten. In elk geval kijken we naar een kost die in het project kan worden meegewogen en aan de klant kan worden doorberekend.
Envato Market biedt meer dan 1.500 premium-lettertypen voor gebruik in uw projecten, dus neem gerust een kijkje en kijk wat er beschikbaar is.
Lettertypen op Envato Market Bij het selecteren van lettertypen is het belangrijk om rekening te houden met de aard van de lay-out waarmee u te maken hebt. Hebben we het voornamelijk over body-copy? Zijn er meerdere rubrieken, sub-rubrieken? Misschien is het een lay-out van tijdschriften met decks, blockquotes? Zorg er bij het gebruik van meerdere lettertypen voor dat de rollen duidelijk zijn vastgesteld; als een lettertype wordt gebruikt als een subkop, schakel dan niet naar een ander lettertype voor een subkop elders. Houd het doel van een lettertype duidelijk.
Voorlopig houden we dingen recht en selecteren we enkele lettertypeparen. We zullen kijken naar de omstandigheden waaronder ze goed zullen samenwerken en ons afvragen waarom.
Je hebt dit misschien al gehoord; succesvolle koppeling is afhankelijk van verdrag, of contrast, maar niet conflict. Dat wil zeggen dat uw geselecteerde lettertypen goed kunnen samenwerken door bepaalde eigenschappen te delen, of door volledig van elkaar te verschillen. Lettertypeparen kunnen echter op verschillende manieren conflicteren: te veel op elkaar lijken door er slechts één te zijn.
Laten we elk van de succesvolle mogelijkheden bekijken.
Beschrijven van twee lettertypen als hebben concordantie suggereert de aanwezigheid van dezelfde eigenschap in beide. Misschien is hun tekenspatiëring vergelijkbaar, hun verhoudingen, hun dophoogte. Bekijk deze voorbeelden van Kerry Scott Jenkins en je zult duidelijke proportionele overeenkomsten zien.
Een manier om concordantie tussen lettertypen te bereiken, is door twee van dezelfde familie te koppelen. Als ze familie zijn, kunnen ze zich wel goed redden, toch ?! In elk geval bestaat de Droid-familie, ontworpen door Steve Matteson voor gebruik op de Android-apparaten van Google, uit verschillende gewichten en stijlen, met schreefloze en schreefloze gezichten. Misschien een beetje vindingrijk, maar deze twee werken heel goed samen. De een of de ander neemt de leiding over de koppen, de ander de lichaamstekst.
Droid Serif en Droid Sans Hoe dan ook is een geweldige combinatie.
Droid Sans en Droid Serif Ze zijn schoon en modern, plus (zoals je zou verwachten) ze zijn goed geschikt voor het web en kleinere apparaten vanwege hun grote x-hoogte.
De x-hoogte van een lettertype beschrijft de hoogte van de basislijn tot de bovenloop van de kleine letters, zoals de x. Een verhoudingsgewijs grote x-hoogte helpt bij de leesbaarheid. En deze twee delen beide die kwaliteit.
Lettertypen van dezelfde ontwerper delen vaak ook eigenschappen die hen helpen harmonie te bereiken. Kijk naar de verrassend vergelijkbare verhoudingen die deze twee lettertypen weergeven (bekijk de 'o') ...
Cowboyslang en Supria Sans Condensed door Hannes von Döhren Besteed aandacht aan de lijnkwaliteit van twee lettertypen. Ze lijken in eerste instantie niets gemeen te hebben, maar twee duidelijk uitgevoerde lettertypen werken misschien beter samen dan je zou denken:
Bevan en Arapey Cursief Zachtere lijnen samen kunnen net zo effectief zijn:
Anodyne en Poulaire 
Contrast tussen lettertypen biedt vaak een winnende combinatie, maar op welke manieren kunnen lettertypen contrasteren? Hier zijn slechts enkele eigenschappen om naar te zoeken:
Overweeg eenvoudigweg het contrast tussen schreefletters en schreefloze lettertypen.
Het is een klassieke manier van koppelen; neem een decoratief embleem voor de kop en een vastzittende schreefloze voor het lichaam. Of neem een no-nonsense schreefloze voor de rubrieken, met een aangenaam leesbare serif voor het lichaam. In veel gevallen een winnaar. Laten we er een paar bekijken, beginnend met twee systeemlettertypen. Dat klopt, zelfs zij kunnen goed samenwerken.
Georgia en Arial Waar kun je deze twee in actie zien? Bekijk de geraamte van het skelet. Ontdaan van alle overbodige vormgeving, werken Georgia en Arial perfect in deze omgeving.
Voor een beetje meer verfijning ...
PT Serif en PT Sans Vergeet niet de rol van de tekst waarvoor u lettertypen kiest. In de bovenstaande gevallen hebben we de hiërarchie weergegeven met behulp van de lettergrootte; de koppen zijn groter dan de hoofdtekst. Er zijn andere manieren om vast te stellen wie de baas is, het gewicht ligt voor de hand.
Lora Bold en Istok Web Laten we zeggen dat we ons niet bezighouden met een volledig tekstuele paginalay-out. Misschien hebben we te maken met twee rubrieken en niets meer (een Under Construction-bericht, bijvoorbeeld). We kunnen het ons veroorloven een beetje meer avontuurlijk te zijn, omdat we geen rekening hoeven te houden met lange maatregelen of grote hoeveelheden tekst. Wat dacht je van een opvallende h1, gekoppeld aan een versterkende h2?
Gecondenseerde lettertypen werken altijd goed om uw aandacht te trekken, omdat ze veel verticaal onroerend goed in beslag nemen.
Bebas Neue en Alex Brush Hier is een voorbeeld van een vergelijkbare combinatie die heel goed werkt:
Het onderscheidende werk van Gerren Lamson en Simon Walker En voor degenen die geïnteresseerd zijn, is hier een uitsplitsing van wat die lettertypen zijn:
En nogmaals, volkomen contrasterende eigenschappen, maar toch een duidelijke hiërarchie door kleur die voorkomt dat er op de tenen van de ander wordt gestapt ...
Of wat dacht je van twee straight-playing sans-serif-vrienden? De volgende hoofdkop (Conqueror) is een inline lettertype dat nadrukkelijk is ontworpen voor titels. Omdat het een hoofdlettertype is, moet u mogelijk de letterspatiëring een beetje uitbreiden, zoals in het onderstaande voorbeeld.
In lijn beschrijft een letterbeeld met witte lijnen die verschijnen in de tekenslagen. - fonts.com
Helaas is het (nog) niet beschikbaar als een weblettertype, dus je zult het moeten doen voor pixelontwerp op het moment ... Het is absoluut een van mijn favoriete lettertypen op dit moment.
AW Conqueror Inline en Gudea Neem dit slab serif-lettertype; minimale inspanning, maximale impact.
Alpha Slab One en Mako Slabschilders zijn zeer effectieve aandachtstrekkers, maar kunnen een beetje opdringerig zijn als u niet voorzichtig bent. Stier in een soort winkel in China. Het bovenstaande voorbeeld werkt eigenlijk heel goed met zijn fijnere partner, omdat het contrasteert en tegelijkertijd enkele persoonlijkheidskenmerken deelt. Ze lijken heel verschillende lettertypen te zijn, maar als je de rondingen bekijkt, zie je dat ze niet zo ongelijk zijn als je eerst zou denken.
Sommige lettertypen zijn gewoon zo heerlijk dat je bijna niet kunt falen. Neem Buttermilk bijvoorbeeld; weelderig, uitgebreid en decoratief. Het zal er geweldig uitzien, waar je het ook mee verbindt (zolang je niet probeert om zijn donder te stelen!) Hier hebben we een koppeling met Georgië:
Karnemelk en Georgië En met Aller een even subtiele schreefloze schreef:
Karnemelk en Aller Dan zou dit mijn voorbeeld zijn van een koppeling met een botsende persoonlijkheid - te sterk op zichzelf. Maar weet je wat? Ik kan hiermee leven, het is eigenlijk best leuk! Ik vermoed dat je het soms nooit kunt vertellen ...
Karnemelk en excentriek Laten we niet teveel focussen op wat niet goed werkt, we willen de vrolijke combinaties in de rest van deze gids niet bederven, of wel? Dat gezegd hebbende, laten we even illustreren hoe twee lettertypen, die waarschijnlijk te veel op elkaar lijken, ongemakkelijk bij elkaar kunnen staan.
Almendra en Stoke Maar waarom werken ze niet goed samen? Ik dacht dat het idee was om te contrasteren en tegelijkertijd een element van eenheid te waarborgen?
Het zijn verschillende stijlen; het is een Blackletter, de andere Romeinse serif, check.
Ze hebben verschillende verhoudingen; de een is gecondenseerd met een relatief grote x-hoogte, de andere is meer uitgestrekt met langere stijgbogen, controleer.
Toch delen ze het gewicht en de grootte, en beide delen die vreemde sporen aan het einde van elk personage.
Daarin ligt het probleem. Door deze laatste drie details (gewicht, grootte en decoratie) die ze zijn geworden te delen te alike. Ze voeren zeer vergelijkbare rollen uit, maar de kleine verschillen zijn tegenstrijdig, wat voor een ongemakkelijk totaaleffect zorgt.
De krommingen van de sporen bijvoorbeeld, staan volledig op gespannen voet met elkaar:
Hun assen zijn gewoon 'uit':
En de manier waarop een Blackletter is gevormd geeft het een kleine richting, in tegenstelling tot de verticale aard van de Romein:.
Deze verschillen zijn misschien geen probleem in andere voorbeelden, maar hier hebben we twee lettertypen die (op het eerste gezicht) hetzelfde lijken. Het is een beetje zoals wanneer je een beroemdheid ziet staan naast hun wasmodel bij Madame Toussauds. Het is nooit comfortabel om naar te kijken.
Het is moeilijk om 'werken' of 'niet werken' toe te schrijven aan feiten en cijfers, normaal gesproken zal het een gevoel zijn dat je krijgt, je zult het gewoon weten. Als je eenmaal hebt besloten dat je een lettertype-koppeling niet leuk vindt, probeer dan uit te zoeken waarom en het zal je helpen om sneller beslissingen te nemen in de toekomst.
Als u vandaag naar de map Weblettertypen van Google gaat, vindt u suggesties voor het koppelen van elk lettertype. ordelijk.
Ik hoop dat je aanpak van het koppelen van lettertypen is vereenvoudigd door deze beginnershandleiding. Als er één belangrijke regel is die je hieruit zou moeten verwijderen, dan is het "Je zult het niet weten totdat je het probeert!"
Wees avontuurlijk. Als webontwerpers hebben we een steeds groter wordende repository met lettertypen beschikbaar voor gebruik in onze ontwerpen. Overweeg de grondbeginselen en experimenteer. Je zult ongetwijfeld verrast worden door wat je vindt.
Als u echt iets unieks wilt voor uw website-typografie, kunt u een van de Envato Studio-experts vragen om een aangepast lettertype voor u te maken.
Accentsconagua