Forståelse Typografi 10 Nyttige værktøjer og ressourcer
I min sidste artikel om Forståelse Typografi skrev jeg om, hvad der går ind i design af typografi og hvordan man manipulerer det for at forbedre dit website layout og for at forbedre brugeroplevelsen. I denne artikel er jeg notering 10 af mine yndlingsværktøjer til typografi på nettet.
Disse kan hjælpe med at opbygge HTML-net og indholdsområder, skabe CSS-stilarter, generere skrifttypenavne og en flok andre cool ting. Tjek nogle af nedenstående links, og sørg for at lade os vide dine tanker i det efterfølgende diskussionsområde.
Anbefalet læsning: Forståelse Typografi: Skrivning til internettet
Font Matrix
Denne online guide blev udgivet af 24ways design blog. Den indeholder en matrix tabel af alle standard web skrifttyper, du finder som standard fra forskellige software leverandører. Populære titler omfatter Windows, Mac OS X, Microsoft Office og Adobe Creative Suite-programmer.
Kontrol af farvekontrast
Farvekontrast er ofte et problem, når du går uden for den standard sort-hvide model. Når du finder en kamp, føles det som design perfektion. Endnu en dårlig farvekombination vælger meget dårligt og vil påvirke det overordnede design negativt. Dette lille webværktøj kan hjælpe dig med at vælge et sæt farver, der passer til hinanden for ethvert stillayout.
HTML-Ipsum
Har du brug for et Lorem Ipsum-værktøj, der kan gøre mere end blot at udgive tekst? Denne online HTML-generator vil oprette kodeblokke for de mest almindelige sideelementer. Nogle eksempler omfatter uordnede lister, definitionslister, webformularer, tabeller og masser af andre løsninger.
Typechart
Typeskart er et af mine yndlingsværktøjer som CSS-udvikler. Jeg søger ofte at matche en bestemt skrifttype på mit system til et webprojekt, men jeg har bare ikke tid til at vende gennem hele min samling. Dette fantastiske værktøj giver dig mulighed for at sejle gennem populære valg af skrifttypefamilier og endda downloade den korrekte CSS-kode!
PX-to-EM.com
Medmindre du nulstiller standard browsertekststørrelse, har du sandsynligvis problemer med at matche ems med pixels. Denne app i browser indeholder både en konverteringstabel og brugergrænseflade til px til em. Det er et meget simpelt værktøj sikkert, men det giver en praktisk vejledning med meget enkel funktionalitet - og du kan ikke slå den gratis pris.
CSS Type Set
Jeg anbefaler ikke at holde fast med CSS Type Indstil for længe, da det virkelig er en begynderværktøj. Det giver dig mulighed for at generere CSS kode baseret på specifikke skrifttype egenskaber, du vælger. Selvom det er meget nyttigt først, bliver det over tid en krykke at lænne sig på. Og du vil ikke være i stand til at beherske CSS egenskaberne selv. Men hvis du skal spare tid på et projekt, kan dette værktøj ikke overses.
vende typisk
Her er et virkelig unikt eksempel på et skrifttype preview bibliotek. flipping typisk omfatter en håndfuld skrifter, der er indfødte til dit operativsystem. Det scanner automatisk din skrifttype bibliotek for at hente de mest web-sikre løsninger. Du kan sammenligne dem side om side og nemt vælge mellem dine yndlingsmuligheder. Dette er en anden fantastisk tid, du sparer dit bogmærke og tænker ikke på indtil sidste øjeblik.
Typografisk net
Der er meget snak om at designe rundt i nettet i HTML og CSS. Du forstår sandsynligvis begrebet, hvordan netværker arbejder, og måling af et websted i pixels er ikke anderledes. Denne grid tutorial af CSS-Tricks er mere som en guidet indsats for at introducere det grundlæggende i typografi til den digitale æra. Det er et meget mere avanceret emne inden for webdesign. Men hvis du har lidt tålmodighed, anbefaler jeg at gå gennem detaljerne for at se, hvordan disse netegenskaber faktisk kan påvirke dit layout.
WhatTheFont!
Vi har alle fundet et logo eller et billede med nogle virkelig kølige, uidentificerbare skrifttyper. WhatTheFont har lavet runder på internettet i et par år, og det er stadig en favorit af mine. Du vælger et billede, der skal uploades, og deres script vil analysere tekst inden for billedet for at matche eventuelle lignende skrifttyper. App'en vil endda forbinde dig med eksterne produkter, hvor du kan købe hver skrifttype til din bekvemmelighed.
Baseline / Line-Height Calculator
Endelig et rigtig kraftfuldt værktøj til generering af linjens højde og rytmegenskaber. Indtast blot værdier for basis skrifttypestørrelse og linjens højde, eller medtag din egen brugerdefinerede CSS-kode ud til siden. App'en vil generere forhåndsvisninger i et par forskellige stilarter, så du kan få en ide om, hvordan disse egenskaber ville se på din egen hjemmeside.
