Hoe Google-lettertypen te gebruiken in uw volgende webproject en waarom u dat zou moeten doen

Lettertype keuze is een integraal ontwerpbesluit op elke website, maar meestal zijn we tevreden met dezelfde oude schreef- en schreefloze familie. Hoewel het hoofdgedeelte van de tekst altijd iets moet zijn dat geoptimaliseerd is voor leesbaarheid, tenzij je wilt dat lezers hoofdpijn krijgen, kunnen titels en opvallende tekst jouw plaats zijn om een ​​uniek ontwerp toe te voegen met een flair van lettertype.

Lees verder om erachter te komen hoe u een van de Google-weblettertypen op uw site kunt gebruiken.

Achtergrond

Met CSS kunt u een reeks lettertypen opgeven die moet worden gebruikt als de voorkeursletter niet beschikbaar is. Hiermee kunt u een eerste keuze maken - misschien een minder vaak maar gratis lettertype; dan hebben back-ups op zijn plaats die er altijd zullen zijn met Windows of Macs. Over het algemeen houden webdesigners vast aan de beproefde lettertypefamilieketens, zoals beschreven door w3-scholen.

Als in het verleden een ander lettertype gewenst was, moesten ontwerpers in plaats daarvan afbeeldingen voor de tekst maken - logo, koppen, enz. De nadelen waren:

• Afbeeldingen schalen niet goed.
• Afbeeldingen kunnen niet worden gelezen door schermlezers.
• U kunt de tekst in afbeeldingen niet markeren.
• Zoekmachines kunnen dat niet “lezen” afbeeldingen.
• Het laden van afbeeldingen vertraagt ​​de webpagina.

Dus is er een betere oplossing? Eén waarmee we een universeel beschikbare set van gratis lettertypen kunnen gebruiken, zonder gebruik te maken van afbeeldingen?

Google Web Fonts

Het antwoord komt van Google. Google Web Fonts is in wezen een verzameling (bij huidige telling, 489) geoptimaliseerde lettertypen die zijn opgeslagen in de cloud, die kunnen worden ingesloten in uw webprojecten (of zelfs worden gedownload om ze op uw computer te gebruiken).

Bovendien maakt de Google Web Fonts-site het gemakkelijk om te vergelijken en te kiezen, en krijgt u vervolgens alle code die u nodig hebt om het lettertype in te bedden via Javascript of CSS - meer hierover later.

Ermee beginnen

Ga naar de website Web Fonts en klik op begin met het kiezen van lettertypen beginnen.

De interface is redelijk duidelijk - aan de linkerkant kunt u zoeken naar specifieke trefwoorden; en filter op basislettertype; of filter voor specifieke factoren zoals letterdikte. De balk bovenaan past de voorbeeldtekst alleen aan. Als u een specifieke alinea van de tekst hebt waarop u deze wilt testen, schakelt u bijvoorbeeld naar het tabblad Alinea en plakt u de tekst in.

Zoals ik al zei, kun je beter niet kiezen voor de inhoud van de hoofdtekst, dus blijf bij een van de schreef- of schreefloze families als je echt iets unieks wilt doen daar.

Als je er een ziet die je leuk vindt, voeg je deze toe aan je verzameling.

Klik op de beoordeling om de beoordelingsmodus te openen en al uw keuzes te vergelijken.

In de revisiemodus ziet u verschillende lettergroottes en een alinea- of een koptekst. Het systeem maakt ook een intelligente keuze om u te laten zien, afhankelijk van het typische gebruik van dat lettertype; maar je kunt de voorbeeldmodus desgewenst wijzigen.

Blader naar rechts om andere lettertypen in uw huidige verzameling te bekijken; klik op de X rechtsboven om ze te weigeren.

Testrit is een bijzonder interessante modus waarin alle lettertypen in uw verzameling worden gecombineerd om te laten zien hoe deze eruit kunnen zien wanneer ze worden gecombineerd op een basispaginalay-out.

OK, gekozen. Hoe gebruik ik ze?

Klik met uw verzameling verkleind op de beoordeling knop op de grote blauwe balk. Als je overboord bent gegaan en er te veel hebt toegevoegd (echt, houd het maximaal op 2), waarschuwt de impactindicator voor het laden van de pagina je.

Scroll naar beneden om de relevante code te pakken. Er zijn 3 keuzes hier:

• Standaard (link rel = methode): dit moet in de HEAD-sectie van uw site worden geplakt, dus u zult op uw gemak moeten zijn met HTML om dit te doen. Voor WordPress voegt u het toe header.php als je op deze manier kiest. Ik raad het niet aan.
• @importeren: deze methode gaat rechtstreeks naar uw stylesheet-bestand, waar we de lettertypen voor verschillende pagina-elementen toch zullen specificeren, dus persoonlijk raad ik dit aan. Plaats het voor WordPress-thema's style.css net na het gedeelte met de thema-informatie
• Javascript: spreekt voor zich - plaats de code overal in uw thema. Het voordeel van het gebruik van deze methode is dat het lettertype asynchroon wordt geladen - de site wordt eerst weergegeven in het fallback-lettertype en schakelt vervolgens over wanneer het lettertype volledig is geladen. Hoewel de laadtijd van de eerste pagina sneller zal zijn, zal het voor de gebruiker een schokbrekende verandering veroorzaken die u misschien niet wilt.

Dat is stap 1. Stap 2 is om het lettertype op te geven waar u het wilt gebruiken. We hebben hier geen ruimte voor een volledige CSS-tutorial (ik raad deze 5 CSS-leersites aan Top 5 Sites om CSS te leren Online Top 5 Sites om CSS Online Lees meer te leren, en mijn eigen 5 babystappen in CSS tutorial 5 Baby Steps to CSS leren en een kick-ass worden CSS Sorcerer 5 Baby begint CSS te leren en een kick-ass te worden CSS Sorcerer CSS is de allerbelangrijkste verandering die webpagina's in het afgelopen decennium hebben gezien, en het maakte de weg vrij voor de scheiding van stijl en Op de moderne manier definieert XHTML de semantische structuur ... Lees meer), maar het volstaat om te zeggen dat je alles in je stylesheet zult aanpassen dat zegt: font-family, en vergeet niet de back-upstijl op te nemen zoals voorgesteld door Google.

geoptimaliseerde

Het gebruik van een niet-standaard lettertype dat de gebruiker moet downloaden, zal een kleine hoeveelheid tijd toevoegen aan het laden van uw pagina, dat is onvermijdelijk. Een standaard weblettertype van Google is echter ongeveer 100 KB, ter vergelijking is dit ongeveer de grootte van een middelgrote JPEG-afbeelding van goede kwaliteit. Net als afbeeldingen wordt het weblettertype in de cache opgeslagen in de browser van de gebruiker, dus alleen de eerste pagina die wordt geladen, wordt enigszins vertraagd.

Samenvatting

Ik geef het toe - ik hou echt van lettertypen. Ik verwacht net als velen van jullie dat ik ze op mijn harde schijf houd - voor het geval je het weet?! Nu kan ik eigenlijk gebruik maken van een aantal unieke lettertypen in mijn webprojecten - ik ben enthousiast. alsjeblieft, negeer de lettertypen op uw website niet!

Als u vragen heeft over het implementeren van weblettertypen op uw website, kunt u in de opmerkingen vragen en ik zal kijken of ik u kan helpen.