CodePen Challenge # 3 favoriete Google Font-paren

Nog een maand, nog een CodePen-uitdaging! De vorige keer hebben we je gevraagd een aanmeldingsformulier te stylen en maar liefst 68 van jullie namen deel. Deze keer willen we zien welke Google-lettertypecombinaties u aanbevelen, de beste voorbeelden worden over een week of zo tentoongesteld!

De uitdaging

We willen dat u uw typografische spieren buigt en laat ons zien welke lettertypeparen van Google u denkt dat het het beste werkt! Heb je zin in een beetje Lato met wat Merriweather? Laat Unool One met Vollkorn je kwijlen? 

Neem de pen die we hebben voorbereid en behandel hem twee Google-lettertypen. Pas de lettertypen op elke gewenste manier toe; mogelijk moet u andere typografische stijlen aanpassen, zoals lijnhoogte, lettertypegrootte en letterafstand, plus je kunt de kleuren veranderen als je denkt dat het de persoonlijkheid verbetert van het type dat je hebt gebruikt. 

Raak de opmaak gewoon niet aan!

Terug naar jou

Dit is wat je moet doen, in een paar doodeenvoudige stappen.

Stap 1

Ga eerst naar de demo op CodePen. U herkent het misschien als de eerste pagina die door CERN op het internet wordt gepubliceerd. Dit is hoe het eruit ziet:

Stap 2

Druk op de Vork om uw eigen kopie ervan te maken en vervolgens zo veel wijzigingen aan de CSS aan te brengen als u wilt.

De snelste manier om Google-lettertypen te gebruiken, is door ze rechtstreeks te importeren. Grijp de relevante @importeren snippet van Google:

Plak het dan in het CSS-paneel op CodePen om het in uw stijlen te gebruiken:

@import url (http://fonts.googleapis.com/css?family=Lato); p font-family: 'Lato', sans-serif; 

Stap 3 (optioneel)

Als u bent aangemeld bij CodePen, kunt u de beschrijving bewerken door op de info knop. Gebruik dit om mensen een idee te geven van wat je hebt gedaan.

Stap 4

Raken Opslaan, u bent klaar. Laat het ons weten in de comments als je klaar bent - en laat het ons gerust weten door ons ook twewdt tweeting.

Dat is het! Alle gegevens worden in CodePen aan deze verzameling toegevoegd en de beste voorbeelden worden binnen een week getoond op Tuts +!

Veel succes en vergeet niet om Tuts + op Codepen te volgen!

Tips

• Een beginnershandleiding voor het koppelen van lettertypen aan Tuts+
• http://fontpair.co (helpt ontwerpers Google-lettertypen aan elkaar te koppelen)
• Vier technieken voor het combineren van lettertypen door Hoefler & Co.
• 100 dagen lettertypen 100 dagen, elk met een paar Google-lettertypen
  
• Open source-project met lettertypenbibliotheek om Google-lettertypen te labelen en te ordenen