30 av de beste webtypografiressursene på nettet
Det virker som det er to leire blant webdesignere: de som omfavner webtypografi , eksperimenterer med det og prøver nye ting i nesten alle deres design; og de som unngår det som pesten, velger å bruke standard, trygge fontstabler med liten variasjon.
Det virker også som mange designere som faller inn i den andre gruppen ønsker at de var mer som de første.
Ressursene nedenfor kan hjelpe deg med å forbedre webtypografi, uavhengig av hvilken leir du faller inn i.
Det finnes verktøy for å skape unik typografi, referanser og artikler som kan lære deg typografiske prinsipper, og mye inspirasjon og nyheter for å holde deg oppdatert om tilstanden til webtypografi.
Typografiverktøy
Typetester
Typetester lar deg sammenligne opptil tre fonter, side om side, med hvilken prøvetekst du vil ha. Du kan angi baseline skriftstørrelse, skrift, størrelse, ledende, sporing, justering, ordavstand, dekorasjon, farge og bakgrunnsfarge for å få et veldig nøyaktig bilde av hva typene dine vil se ut på selve nettsiden. Da, når du har alt som ser akkurat slik du vil ha det, kan du ta tak i CSS.
HTML Ipsum
HTML-Ipsum er en lorem ipsum generator spesielt for webdesign. I stedet for å bare gi deg biter av tekst, kan HTML-Ipsum gi deg forhåndsformatert tekst som avsnitt, bestilte lister, tomme tabeller, skjemaer og navigasjonslister. Forformatert tekst som dette er en fin måte å spare tid på når du oppretter nettsideoppslag og innledende design.
Typechart
Typeskjema lar deg bla gjennom forhåndsformaterte, nettsikkerte skrifter og vise dem som de vil vises på både en Windows-PC og en Mac. Du kan sortere gjennom skriftene som er inkludert, basert på størrelse, skrift og vekt.
WP-Typografi
WP-Typography er et WordPress-plugin som bidrar til å gjøre standard WP-typografi mer attraktiv. Den støtter orddeling, mellomromskontroll, intelligent tegnutskifting (inkludert sitatkarakterer, bindestreker, ellipser og matte symboler), og CSS-kroker for styling bestemte ting (inkludert ampersands, akronymer og tall).
CSS Type Set
CSS Type Set lar deg stilere en blokk med tekst og deretter kopiere CSS. Det er en enkel CSS-generator som er flott for styling en skrift om gangen. Den lar deg kontrollere skrift, størrelse, mellomrom, ledende, dekorasjon og farge.
Flipping Typisk
Flipping Typical viser deg prøvetekst i en rekke fontene du har installert på datamaskinen. Det er en fin måte å sammenligne en haug med skrifter, side om side, alt på en gang. Den eneste advarselen: Bare noen av de viste skriftene er websikker.
Typografisk grid
En etablert vertikal rytme er en av de tingene som skiller seg fra god typografi fra god typografi. Typografisk grid bidrar til å etablere den vertikale rytmen for deg. Den inneholder også et vertikalt rutenett som en veiledning for posisjonering av både typografi og andre elementer.
WhatTheFont
WhatTheFont gir en enkel måte å finne ut hva en bestemt skrifttype er. Bare last opp et bilde (eller spesifiser en URL) og WhatTheFont vil avgjøre hvilken font som skal brukes. Dette er en fin måte å finne skrifter som har blitt brukt i bilder eller Flash-filer.
CSS med vertikal rytme
Som allerede nevnt setter en konsistent vertikal rytme god typografi bortsett fra det som bare er "bra". Dette verktøyet kan hjelpe deg med å lage CSS for typografi som har en konsistent vertikal rytme. Bare skriv inn skriftfamilien, basestørrelsesstørrelsen, baselinehøyde og mål skriftstørrelser og beregne for å få CSS for en konsistent vertikal rytme.
Baseline Rhythm Calculator
En annen stor vertikal rytme kalkulator. Dette vil imidlertid vise deg hvilke forskjellige skriftstørrelser som ser ut til hverandre når de settes opp med din etablerte vertikale rytme. Det er en fin måte å sørge for at alle skriftstørrelsene du bruker, vil se bra ut.
Font brenner
Font Burner lar deg legge inn fonter på nettstedene dine ved hjelp av sIFR, ved hjelp av et grafisk grensesnitt. Det er for øyeblikket mer enn 1000 skrifter tilgjengelig via Font Burner, og det finnes også et WordPress-plugin. Alt du trenger å gjøre for å bruke det, er å finne skrifttypen du vil bruke, kopiere embedkoden, og lim den inn i nettstedets kode.
Blind Text Generator
Denne dummy tekstgeneratoren lar deg lage ikke bare lorem ipsum, men også en rekke andre dummy teksttyper. Samtidig kan du også formatere teksten rett innenfor generatoren (klikk på Avanserte alternativer), og kopier deretter CSS.
Grunnlinje
Baseline er et grid og typografi rammeverk som inneholder filer for å tilbakestille nettleserens standard og bygge et grunnleggende typografisk layout. Det er et godt alternativ for designere som vil bruke en rutenettoppsett, og vil også ha litt hjelp med å designe nettstedets typografi. Typografisk oppsett inkluderer overskrifter, lister, avsnitt, blokkeringer og tabeller, samt en annen merkingskode.
Font Matrix
Font Matrix viser skrifter som følger med Mac- og Windows-operativsystemer, Microsoft Office og Adobe Creative Suite, alt i et rutenett som gjør det enkelt å se hvilke skrifter som mest sannsynlig finnes på hvilke typer datamaskiner. For eksempel, hvis nettstedet ditt hovedsakelig henvender seg til designere, kan du gjøre det første skrifttypen i fontstacken noe som følger med Adobe Creative Suite, men hvis nettstedet er rettet mot bedriftsbrukere, kan den første fonten som er inkludert, være noe fra Microsoft Office.
Typograph
Typografi lar deg eksperimentere med forskjellige skalaer og andre elementer av vertikal rytme. Den inneholder en rekke tradisjonelle skalaer (inkludert Le Corbusier og Fibonacci), samt andre layoutalternativer.
Web Font Services
Typekit
Typekit tilbyr fonter fra en rekke typer selgere og støperier, inkludert The League of Movable Type, FontFont og Veer (du kan se hele listen over skrifter uten å måtte registrere deg for en konto). De tilbyr også avanserte kontrollalternativer for styling av skrifttyper, uendelig skalerbarhet og en kolofon som forteller de besøkende hvilke fonter nettstedet ditt bruker. Prissetting for Typekit er rimelig, alt fra gratis til delvis tilgang opp til $ 100 / år for nettsteder med høy trafikk.
Kernest
Kernest er en web skrifttype tjeneste som bruker OFL, GPL, GUST og Creative Commons skrifttyper, så vel som de med kommersielle lisenser. Mange av deres skrifttyper er gratis å bruke (selve tjenesten er gratis), mens andre har abonnementsavgifter som starter med noen få dollar.
Fonter Live fra Ascender
Ascender tilbyr sin egen web skrifttype tjeneste, Fonts Live. De har over 110 skrifttyper tilgjengelig, med skrifttyper fra Monotype, Microsoft, Bigelow & Holmes, og andre, samt deres egne skrifter.
Google Font API
Google tilbyr et begrenset utvalg av åpen kildekode-fonter. Selv om valget ikke er stort, er det gratis og støttet av Google, noe som betyr at det ikke er sannsynlig at du får problemer med kapasitet eller lagringstid.
TypeFront
TypeFont nærmer seg webfonter litt annerledes. I stedet for å tilby et bibliotek med nettvennlige fonter, lar de deg laste opp dine egne skrifter som har et nettvennlig lisens. Dette er et flott alternativ hvis skrifttypene du vil bruke ikke er tilbudt for øyeblikket av noen av de andre webtypetjenestene. Det er en gratis plan for nettsteder med lav trafikk, samt betalte planer.
Typoteque Web Fonts
Typotheque tilbyr sin egen web skrifttype tjeneste for å gjøre skrifttyper tilgjengelige for @ font-face implementeringer. Fordelen er at det bare er en engangs lisenskostnad som kan dekke både utskrifts- og webapplikasjoner. Ulempen er at valget er begrenset til bare deres skrifter.
Typografi Ressurser og artikler
Elementene av typografisk stil anvendt på nettet
Dette er en veldig grundig referanseveiledning for alle som ønsker å lære ikke bare grunnleggende om god webtypografi, men også mer avanserte teknikker og prinsipper. Den er delt inn i kapitler og underkapitler, inkludert horisontal og vertikal bevegelse, blokker og avsnitt, paginering, størrelse og mye mer. Det er et arbeid pågår, så forvent mer informasjon å vises i fremtiden.
Hyggelig webtype
Nice Web Type har tonnevis av informasjon om implementering av webtypografi. De har "notater" om alt fra å komme i gang med webtypografi til å bruke CSS @ font-face. De diskuterer også trender og nye ideer regelmessig, og har en side dedikert til hva de anser noen av de beste skriftene der ute.
12 Eksempler på punkttypografi
Denne samlingen av prøveformatformater fra Jon Tan gir et godt utgangspunkt for alle som designer et tekst-tungt nettsted. Mange designere overser alle mulighetene som følger med styling, og velger mer tradisjonelle, konservative alternativer. Denne artikkelen viser at det ikke er så vanskelig å gå ut av boksen og gjøre noe interessant med avsnittene i designene dine.
Typografisk kontrast og flyt
Dette er en fantastisk guide fra WebDesignerWall på prinsippene for flyt og kontrast i webtypografi. Det bryter ned disse prinsippene i flere seksjoner, inkludert størrelse, skrift / klassifisering, farge og vekt.
Revidert Font Stack
Denne artikkelen diskuterer å utvide de vanlige nettsikkerte CSS-fontstablene ved å utforske andre ofte installerte skrifttyper. Den utforsker også skrifttypestablene på noen populære nettsteder, sammen med anbefalinger for hvordan de kan forbedre sine stabler.
På webtypografi
Denne artikkelen av Jason Santa Maria på en liste fra hverandre er et veldig omfattende blikk på parringstegn i webdesignene dine. Det er et tema som ikke diskuteres veldig ofte, men er viktig for å skape flotte typografiske design på nettet.
Tenker med Type
Tenk med Type er følgesvennets hjemmeside til boka av samme tittel av Ellen Lupton. Den tilbyr massevis av grunnleggende informasjon om typografi. Mens mye av det er fokusert på utskriftstypografi, kan mye av informasjonen som følger med, brukes på webtypografi.
10 gode tips for å forbedre webtypografi
En liste over ti enkle ting du kan gjøre for å forbedre typografien i webdesignene dine. Den inneholder informasjon om skrifttype, størrelse, skala og hierarki, ledende og mer.
Typografi Inspirasjon, Trender og Nyheter
Typophile
Typofile er et forum for typeface entusiaster og typografer. Hvis du vil finne ut hva som skjer i typografien, er Typophile et flott sted å se. Det er også et godt sted å få hjelp med eventuelle typografirelaterte problemer du måtte ha.
Jeg elsker typografi
ILT er en blogg viet helt til typografi. Det diskuterer både design og forretningsmessige emner, fra et faglig synspunkt. Arkivet deres er stort, så det er rikelig med informasjon om nåværende og tidligere nyheter og trender for å holde deg opptatt.
Vi elsker typografi
WLT er et galleri med typografi, bokstaver, skilting og annen type. Brukere kan sende inn bilder av typen de elsker, og det er et flott sted å gå for typografiinspirasjon for ditt neste prosjekt.
Typografi for overskrifter
Elementer av design har et flott galleri med mer enn 120 eksempler på overskriftstypografi. De kjører spekteret fra enkelt til komplekst, i en rekke skrifttyper og stiler. Det er et utmerket sted å gå hvis du leter etter en liten inspirasjon. De har også et galleri av trekk sitater med 20 + eksempler.
satsfrems
Typographica tilbyr type vurderinger, kommentarer og typografi bokanmeldelser. Deres type vurderinger er spesielt informativ hvis du ønsker å lære om hva som gjør et godt skrift.
Bak scenene med utsøkt webtypografi
Dette er faktisk den første i en femdelerserie. Dette innlegget ser på typografien bak A List Apart, bryter ned fonter og stiler som brukes til ulike deler av nettstedet. Senere innlegg ser på: Jesús RodrÃguez Velasco , Jon Tan , Designr.it , og The Codex Transportica .
Typesites
Typesites er en blogg som viser regelmessig store webtypografi. Nettstedene de har er forskjellige, men alle inkluderer inspirasjonsbruk av typen.
Utarbeidet utelukkende for Webdesigner Depot by Cameron Chapman