Forstå typografi 10 Nyttige verktøy og ressurser
I min siste artikkel om Forståelse Typografi skrev jeg om hva som går inn i utformingen av typografi og hvordan man kan manipulere den for å forbedre nettstedet ditt og forbedre brukeropplevelsen. I denne artikkelen er jeg oppført 10 av mine favorittverktøy for typografi på internett.
Disse kan hjelpe til med å bygge HTML-grensesnitt og innholdsområder, lage CSS-stiler, generere skriftnavn og en mengde andre kule ting. Ta en titt på noen av koblingene nedenfor, og vær sikker på å gi oss beskjed om dine tanker i det etterfølgende diskusjonsområdet.
Anbefalt lesing: Forstå typografi: Skrive på nettet
Font Matrix
Denne nettveiledningen ble lagt ut av 24ways design bloggen. Den har en matrisetabell over alle standardwebfonene du finner som standard fra forskjellige programvareleverandører. Populære titler inkluderer Windows, Mac OS X, Microsoft Office og Adobe Creative Suite-programmer.
Fargekontrastkontroll
Fargekontrast er ofte et problem når du våger utenfor den vanlige sort / hvite modellen. Når du finner en kamp, føles det som design perfektion. Likevel ser det ut som et dårlig fargekombinasjonsvalg veldig dårlig og vil påvirke den generelle utformingen negativt. Dette lille nettverktøyet kan hjelpe deg med å velge et sett med farger for å matche hverandre for alle stiloppsett.
HTML-Ipsum
Har du behov for et Lorem Ipsum-verktøy som kan gjøre mer enn bare utskriftstekst? Denne online HTML-generatoren vil opprette kodeblokker for de vanligste sidene. Noen eksempler inkluderer uordnede lister, definisjonslister, webskjemaer, tabeller og mange andre løsninger.
Typechart
Typechart er et av mine favorittverktøy som CSS-utvikler. Jeg ser ofte på å matche en bestemt skrift på systemet mitt til et webprosjekt, men jeg har ikke tid til å bla gjennom hele min samling. Dette fantastiske verktøyet lar deg sile gjennom populære valg av skriftfamilier og til og med laste ned riktig CSS-kode!
PX-to-EM.com
Med mindre du tilbakestiller standard nettlesertekststørrelse, vil du sannsynligvis ha problemer som samsvarer med ems med piksler. Denne appen i nettleseren inneholder både en konverteringstabell og brukergrensesnitt for px til em. Det er et veldig enkelt verktøy for sikker, men det gir en praktisk guide med veldig enkel funksjonalitet - og du kan ikke slå den gratis prislappen.
CSS Type Set
Jeg anbefaler ikke å stikke med CSS Type Sett for lenge siden det er virkelig en nybegynners verktøy. Den lar deg generere CSS-kode basert på bestemte skriftegenskaper du velger. Mens det er veldig nyttig først, blir det over tid en krykke å lene seg på. Og du vil ikke være i stand til å mestre CSS-egenskapene selv. Men hvis du trenger å spare tid på et prosjekt, kan dette verktøyet ikke overses.
flipping typisk
Her er et virkelig unikt eksempel på et forhåndsvisningsbibliotek. Flipping typiske inkluderer en håndfull skrifttyper som er innfødt til operativsystemet. Den skanner automatisk skriftboken for å hente de mest websikre løsningene. Du kan sammenligne dem side ved side og enkelt velge mellom favorittalternativene dine. Dette er en annen flott tid sparer deg på bokmerke og tenker ikke til siste minutt.
Typografisk grid
Det er mye snakk om å designe rundt rutenettet i HTML og CSS. Du forstår sannsynligvis konseptet om hvordan nettverket fungerer, og måling av et nettsted i piksler er ikke annerledes. Denne nettveiledningen av CSS-Tricks er mer som en guidet innsats for å introdusere grunnleggende om typografi for den digitale tidsalderen. Det er et mye mer avansert emne i ruten for webdesign. Men hvis du har litt tålmodighet, anbefaler jeg at du går gjennom detaljene for å se hvordan disse gridegenskapene faktisk kan påvirke sidelayouten.
WhatTheFont!
Vi har alle funnet en logo eller et bilde med noen veldig kule, uidentifiserbare skrifttyper. WhatTheFont har gjort runder på internett i noen år, og det er fortsatt en favoritt av meg. Du velger et bilde som skal lastes opp, og deres skript vil analysere tekst innenfor bildet for å matche eventuelle lignende skrifttyper. Appen vil til og med koble deg til eksterne produkter der du kan kjøpe hver skrifttype når det passer deg.
Baseline / Line-Height Kalkulator
Endelig et veldig kraftig verktøy for generering av linjehøyde og rytmegenskaper. Bare skriv inn verdier for basestørrelsen og linjens høyde, eller ta med din egen tilpassede CSS-kode ut til siden. Appen vil generere forhåndsvisninger i noen få forskjellige stiler, slik at du kan få en ide om hvordan disse egenskapene vil se på ditt eget nettsted.
