Typografie begrijpen 10 Handige hulpmiddelen en bronnen

In mijn laatste artikel over Understanding Typography schreef ik over wat er gaat in het ontwerp van typografie en hoe je het kunt manipuleren om de lay-out van je website te verbeteren en de gebruikerservaring te verbeteren. In dit artikel vermeld ik 10 van mijn favoriete tools voor typografie op internet.

Deze kunnen helpen bij het bouwen van HTML-rasters en inhoudsgebieden, het maken van CSS-stijlen, het genereren van lettertypenamen, en een hoop andere coole dingen. Bekijk enkele van de onderstaande links en laat ons uw mening weten in het discussiegebied.

Aanbevolen lezing: Typografie begrijpen: schrijven voor internet

Font Matrix

Deze online gids werd gepost door de 24ways design blog. Het bevat een matrixtabel met alle standaard weblettertypen die u standaard zult vinden bij verschillende softwareleveranciers. Populaire titels zijn onder andere Windows, Mac OS X, Microsoft Office en Adobe Creative Suite-programma's.

Kleurcontrastcontrole

Kleurcontrast is vaak een probleem wanneer u zich buiten het standaard zwart-witmodel begeeft. Wanneer je een match vindt, voelt het als ontwerpperfectie. Toch ziet een slechte kleurencombo-keuze er slecht uit en heeft een negatieve invloed op het totale ontwerp. Met deze kleine webtool kunt u een set kleuren kiezen die bij elkaar passen voor elke stijllay-out.

HTML-Ipsum

Heeft u behoefte aan een Lorem Ipsum-tool die meer kan dan alleen tekst uitvoeren? Deze online HTML-generator maakt codeblokken voor de meest voorkomende pagina-elementen. Enkele voorbeelden zijn ongeordende lijsten, definitielijsten, webformulieren, tabellen en tal van andere oplossingen.

Typechart

Typechart is een van mijn favoriete tools als een CSS-ontwikkelaar. Ik probeer regelmatig een specifiek lettertype op mijn systeem aan een webproject te koppelen, maar ik heb niet de tijd om mijn hele verzameling door te bladeren. Met deze geweldige tool kun je populaire keuzes van lettertypefamilies doorzoeken en zelfs de juiste CSS-code downloaden!

PX-to-EM.com

Tenzij u de standaardgrootte van de browsertekst opnieuw instelt, heeft u waarschijnlijk problemen die overeenkomen met ems met pixels. Deze in-browser app biedt zowel een conversietabel als een gebruikersinterface voor px tot em. Het is een heel eenvoudige tool, maar het biedt een handige gids met heel eenvoudige functionaliteit - en je kunt het gratis prijskaartje niet verslaan.

CSS Type Set

Ik raad het niet aan om te lang met CSS Type Set te blijven werken omdat het echt een instrument voor beginners is. Hiermee kunt u CSS-code genereren op basis van specifieke lettertype-eigenschappen die u selecteert. Hoewel het in eerste instantie zeer nuttig is, wordt het na verloop van tijd een steunpilaar om op te leunen. En u zult niet gemotiveerd zijn om de CSS-eigenschappen zelf onder de knie te krijgen. Maar als u tijd wilt besparen op een project, kan deze tool niet over het hoofd worden gezien.

typisch flippen

Hier is een echt uniek voorbeeld van een bibliotheek met lettertypevoorbeelden. typisch flippen omvat een handvol lettertypen die eigen zijn aan uw besturingssysteem. Het scant automatisch uw lettertypemap om de meest webveilige oplossingen op te halen. Je kunt ze naast elkaar vergelijken en eenvoudig kiezen tussen je favoriete opties. Dit is een geweldige tijdsbesparing om je bladwijzer te maken en denk pas op het laatste moment na.

Typografisch raster

Er wordt veel gesproken over ontwerpen rond het raster in HTML en CSS. U begrijpt waarschijnlijk het concept van hoe rasters werken en het meten van een website in pixels is niet anders. Deze rastertutorial van CSS-Tricks is meer een begeleide poging om de basisbeginselen van typografie voor het digitale tijdperk te introduceren. Het is een veel geavanceerder onderwerp op het gebied van webdesign. Maar als u wat geduld heeft, raad ik u aan door de details te gaan om te zien hoe deze rastereigenschappen uw paginalay-out daadwerkelijk kunnen beïnvloeden.

Wat het lettertype!

We hebben allemaal een logo of afbeelding gevonden met een aantal echt coole niet-identificeerbare lettertypen. WhatTheFont maakt al een paar jaar rondjes op internet en het is nog steeds een favoriet van mij. U kiest een afbeelding om te uploaden en hun script analyseert tekst binnen de afbeelding om vergelijkbare lettertypen aan elkaar te passen. De app zal u zelfs naar externe producten linken waar u elk lettertype op uw gemak kunt kopen.

Basislijn / lijnhoogte-rekenmachine

Eindelijk een echt krachtige tool voor het genereren van lijnhoogte en ritme-eigenschappen. Voer eenvoudig waarden in voor de basislettergrootte en -hoogte, of voeg uw eigen aangepaste CSS-code aan de zijkant toe. De app genereert voorbeelden in een paar verschillende stijlen, zodat u een idee krijgt van hoe deze eigenschappen eruit zouden zien op uw eigen website.