Den genomsnittliga mannen anser vilken smak Doritos kommer att smaka bra med sin Heineken. Den sofistikerade mannen anser vilken ost som kommer att para bra med sitt val av vin. Designern anser givetvis vilka två teckensnitt som kommer att se bra ut på samma sida.
Idag ska vi använda Google Font API som en lekplats för att blanda teckensnitt och hitta perfekta parningar. Du kommer att kunna skumma igenom och omedelbart ta tag i val som du tycker är lämpliga för dina projekt. Den bästa delen? Du behöver bara kopiera och klistra in vår kod för att implementera dessa teckensnitt på din webbplats. Det är helt gratis och det krävs inga nedladdningar.
Varför Google Fonts?
Webtextspelet var uppe i luften för några år sedan. Alla hade en idé och en lösning men ingen visste verkligen vilken skulle stå kvar när dammet bosatte sig. I mitt sinne är denna debatt över: @ font-face vann.
Här är varför @ font-face vinner. Först är en ren CSS-lösning en som utvecklare kan komma ombord med. Därefter innebär det faktum att @ font-face fullt ut stöder textval och åtgärder som kopiering och klistra in att användbarhetsexperter älskar det. Slutligen kan det faktum att du enkelt kan laga upp ett recept på recepten för nästan alla teckensnitt, innebär att designers älskar det eftersom de har ett brett utbud av rätt licensierade typsnitt att välja mellan. Om du får utvecklare, designers och användbarhet killar ombord, det är spelet över för Flash, JavaScript och bildbaserad lösning.
Nu, inom @ font-face-världen finns det många konkurrenter. Min personliga favoritlösning är bara att använda FontSquirrel's @ font-face-kits, oavsett om jag laddar ned en av sina förkonstruerade alternativ eller laddar upp en typsnittfil så att webbplatsen kan churn out resten för mig.
Jag har dock använt denna lösning flera gånger på Design Shack innan så jag ville byta saker idag och använda något annat. Eftersom Google Font Directory är gratis och har gott om alternativ, verkade det som en naturlig passform!
Snabba tips för att kombinera teckensnitt
Innan vi börjar, finns det några grundläggande regler som du kan komma ihåg när du kombinerar teckensnitt. Det här är inte absolutes som du måste följa vid varje tillfälle, men bara några riktlinjer för att hålla fast vid när du är i tvivel.
Använd fontfamiljer
Först och främst, när det är möjligt, kolla in de olika typsnitten inom en enda familj. Dessa teckensnitt har noggrant utformats för att fungera tillsammans och är därför den säkraste metoden för att ändra ditt teckensnitt utan att skapa visuellt diskord.
Kontrast är kung
När du kombinerar två teckensnitt ska du gå i kontrast. Försök para en djärv plåt med en ljus sans-serif. Om du blandar två teckensnitt som är ganska likartade, gör skillnaden att det ser ut som om något är lite av typografi snarare än det avsedda intrycket av två olika typsnitt. Gör det tydligt för designers och icke-designers att två olika stilar är närvarande.
Ta det lugnt
Begränsa dig också till några få tecken. Om du kan gå med med två, gör det, om inte, stanna vid tre. I alla utom de mest erfarna händerna spränger många olika teckensnitt kaos på en designs sammanhållning. Det är lätt att äntligen se ut som ett barn som just upptäckte teckensnittmenyn i Photoshop för första gången.
Tänk på vilka typsnitt som är lämpliga
Slutligen låt innehållet spela en stor roll i ditt typsnitt. Om ditt innehåll är modernt och professionellt, håll dig till teckensnitt som föreslår dessa egenskaper. Om det skulle se ut som något från 1700-talet, är Helvetica Neue Ultra Light kanske inte det bästa sättet att gå.
Teckensnitt!
Nog diskussion redan, låt oss gå ner till affärer. Kryssa över till Google Font Directory och leta efter följande alternativ.
Om du aldrig har arbetat med Google Font Directory före, oroa dig inte, det är den enklaste anpassade fontlösningen där ute. Allt du behöver göra är att släppa en länk i din sidhuvud och hänvisa sedan teckensnittet till din CSS-teckensnittsfamilj precis som du skulle något annat. För varje typsnittsparrering nedan ger jag dig alla nödvändiga kodstycken så att du bara måste kopiera och klistra in!
Hummer & Stuga
Hummer är en av mina favoritskript hela tiden. Den är djärv och vacker, medan den är ganska läsbar, attribut som inte lätt finns i andra skript.
För att komplettera detta starka uttalande vill du inte ha något som konkurrerar om uppmärksamhet. Välj istället något enkelt och enkelt som Cabin.
HTML
CSS
Raleway & Goudy Bookletter 1911
Raleway är en super attraktiv typsnitt, men den är så tunn att den inte alltid fungerar bäst på kroppskopia. Av den anledningen är det bäst att hålla den så stor som möjligt när du kan, vilket gör det till ett perfekt typsnitt för dina rubriker.
Jag tror att kombinationen av Raleway och den ganska utsmyckade gamla stye Goudy Bookletter 1911 gör ett superklart par. Var försiktig, men den här Goudy är lite för komplicerad för massor av kroppskopia och jag vill definitivt inte läsa en stor sida full av kopia skrivet i den. Denna kombination är troligen bäst för scenarier med minimal kopia.
HTML
CSS
Allerta & Crimson Text
Allerta är en måttligt fet sans-serif med en personlighet.Om du inte vill ha något tråkigt eller något galet, är det en bra mellanklass som ser bra ut både i en rubrik och en kopia av kroppen.
Crimson Text är en okomplicerad typsnitt med starka serifs men liten eller ingen differentiering mellan tinnar och tenn. Detta gör att behållaren är god läsbarhet även när den är liten.
HTML
CSS
Arvo & PT Sans
Inga teckensnittsval skulle vara komplett utan en bra plattserie. Google Font Directory har bara ett par av dessa och Arvo är för närvarande ett av de djärvaste alternativen. Jag gillar verkligen de flesta karaktärerna men erkänner att? S? känns lite besvärligt.
Jag parade detta med ännu en annan bra sans-serif: PT Sans. Det finns flera varianter av detta tillgängliga, men den vanliga versionen är bäst för kroppskopia. Jag gillar verkligen hur runda karaktärerna är, det ger en mycket vänlig känsla.
HTML
CSS
Dancing Script & Josefin Sans
Skript är svåra att genomföra korrekt, särskilt när de inte är lika vanliga som hummer. Dancing Script, som visas i exemplet ovan, är definitivt inte mitt favoritskript men det är en av de bättre som finns i Google Font Directory.
Eftersom Dancing Script är mycket mer feminint än Hummer, parar jag det med Joesfin, en riktigt tunn sans-serif för att vidareutveckla denna stil. Denna kombination är definitivt lämplig för produkter eller webbplatser med en kvinnlig skew.
HTML
CSS
Allan & Cardo
Jag hatar typiskt typsnitt, men Allan är verkligen iögonfallande och attraktiv. Jag älskar dristighet i teckensnittet och den kursiverade känslan.
Min parning med en gammal typsnitt (Cardo) verkar nästan en tidskonflikt men jag gillade verkligen hur de såg ut tillsammans. Känn dig fri att välja i stället för en ljus sans-serif.
HTML
CSS
Molengo & Lekton
Molengo och Lekton känner tillsammans som ett gammalt skolförsök på en teknisk känsla. Större på grund av skrivarens känsla av den senare av dessa.
Denna kombination är något jag förväntar mig att se på en webbplats med en perkamenttexturbakgrund tillsammans med bilder med en polaroid effekt och kanske även vissa fläckar.
HTML
CSS
Droid Serif & Droid Sans
En av våra tips ovan föreslogs att stanna inom en enda familj. Jag sätter detta i praktiken här med den naturliga kombinationen av Droid Serif och Droid Sans.
Som du kan se är båda vackra skrivvor som perfekt kompletterar varandra. Dessa kan enkelt bytas så att Droid Serif var karaktärstypen och Droid Sans huvudrubriken. Du kan upptäcka Droid i naturen på en viss väldigt populär designblogga.
HTML
CSS
Corbin & Nobile
Om du är ett fan av Cooper Black är Corben ett utmärkt gratis alternativ. Denna feta och toony serif är perfekt för allt som borde ha 1920-talets känsla för det.
Nobile är en modernare typsnitt med brevformar som uppträder vertikalt. Den minimala stylingen här håller ditt fokus på de djärva rubrikerna.
HTML
CSS
Ubuntu & Vollkorn
Ubuntu är en synnerligen rundad sans som har en modern känsla för det. Jag använde den djärva varianten här för att ge extra kontrast från kroppstexten.
Vollkorn är definitivt en väldigt annorlunda typsnitt som speglar en långvarig era. Återigen, var alltid försiktig om att blanda teckensnitt från olika tidsperioder. Se till att det är avsiktligt och med avsikt!
HTML
CSS
Berätta för dina favoriter!
Den här artikeln är avsedd att vara ett verktyg som du kan bokmärke och referera till varje gång du fastnar och behöver en bra typsnittskombination för webbplatsen du jobbar med. Både webbfonter och webbläsare har kommit långt och dessa lösningar ska fungera riktigt bra över hela linjen, men varje innehåller lämpliga backupfonter om Google-typsnittet inte laddas.
Lämna en kommentar nedan och berätta om dina favoritfria typsnittskombinationer.Googles katalog har ingen brist på grymma erbjudanden, så gärna också dela dina minsta favoriter!
Google-teckensnitt
Google Fonts är ett bibliotek med över 800 olika typsnitt, helt redo att vara inbäddade i ditt webbprojekt. Serien ser på vilka Google-teckensnitt och delar intressanta exempel och kombinationer av teckensnitt som kan ta ditt projekt till nästa nivå.