30 af de bedste webtypografiressourcer online
Det ser ud til, at der er to lejre blandt webdesignere: dem der omfavner webtypografi , eksperimenterer med det og prøver nye ting i stort set alle deres designs; og dem, der undgår det som pesten, vælger at bruge standard, web-sikre skrifttypestabler med lidt variation.
Det lader også til, at mange af designerne, der falder ind i den anden gruppe, ønsker at de var mere som de første.
Nedenstående ressourcer kan hjælpe dig med at forbedre din webtypografi, uanset hvilken camp du falder ind i.
Der er værktøjer til at skabe unikke typografier, referencer og artikler, der kan lære dig typografiske principper og masser af inspiration og nyheder, der holder dig opdateret om tilstanden til webtypografi.
Typografi Værktøjer
Typetester
Typetester lader dig sammenligne op til tre skrifttyper, side om side, med den uanset stiktekst, du vil have. Du kan angive baseline skriftstørrelse, skrifttype, størrelse, ledende, sporing, justering, ordafstand, dekoration, farve og baggrundsfarve for at få et meget præcist billede af, hvad dine skrifttyper vil se ud på den aktuelle hjemmeside. Derefter, når du har alt, der ser lige ud som du vil have det, kan du tage fat i CSS.
HTML Ipsum
HTML-Ipsum er en lorem ipsum generator specielt til webdesign. I stedet for blot at give dig klumper af tekst, kan HTML-Ipsum give dig præformateret tekst som afsnit, ordnede lister, tomme tabeller, formularer og navigeringslister. Forformateret tekst som denne er en fantastisk måde at spare tid på, når du opretter hjemmesider og initialt design.
Typechart
Typeskart lader dig gennemse forformaterede, webbaserede skrifttyper og se dem, da de vises på både en Windows-pc og en Mac. Du kan sortere de medfølgende skrifttyper baseret på størrelse, skrifttype og vægt.
WP-Typografi
WP-Typografi er et WordPress-plugin, der hjælper med at gøre din standard WP-typografi mere attraktiv. Det understøtter bindestreg, afstandskontrol, intelligent tegnudskiftning (herunder citatmærker, bindestreger, ellipser og matematiske symboler) og CSS-kroge til styling af specifikke ting (herunder ampersands, akronymer og tal).
CSS Type Set
CSS Type Sæt lader dig style en tekstblok og derefter kopiere CSS. Det er en simpel CSS-generator, der er fantastisk til styling af en skrifttype ad gangen. Det lader dig kontrollere skrifttyper, størrelse, mellemrum, ledende, dekoration og farve.
Flipping Typisk
Flipping Typical viser dig eksempeltekst i en række af de skrifttyper, du har installeret på din computer. Det er en fantastisk måde at sammenligne en flok skrifttyper ved siden af. Den eneste advarsel: Kun nogle af de viste skrifttyper er websikker.
Typografisk net
En etableret lodret rytme er en af de ting, der adskiller stor typografi fra god typografi. Typografisk net hjælper med at etablere den lodrette rytme for dig. Den indeholder også et lodret gitter som en vejledning til placering af både typografi og andre elementer.
WhatTheFont
WhatTheFont giver en nem måde at finde ud af, hvad en bestemt skrifttype er. Bare upload et billede (eller angiv en URL) og WhatTheFont vil bestemme hvilken skrifttype der bruges. Dette er en fantastisk måde at finde skrifttyper, der er blevet brugt i billeder eller Flash-filer.
CSS med lodret rytme
Som allerede nævnt sætter en ensartet lodret rytme stor typografi bortset fra det, der kun er "godt". Dette værktøj kan hjælpe dig med at oprette CSS for typografi, der har en ensartet lodret rytme. Du skal bare indtaste skrifttypefamilien, basis skrifttypestørrelse, basislinjehøjde og mål skrifttypestørrelser og beregne for at få CSS til en ensartet lodret rytme.
Baseline Rhythm Calculator
En anden stor lodret rytme calculator. Denne vil dog vise dig, hvilke forskellige skrifttypestørrelser der ligner hinanden, når de konfigureres med din etablerede lodrette rytme. Det er en fantastisk måde at sikre, at alle de skrifttypestørrelser, du bruger, vil se okay.
Font Brænder
Font Brænder lader dig integrere skrifttyper på dine websteder ved hjælp af sIFR, ved hjælp af en grafisk grænseflade. Der er i øjeblikket mere end 1000 skrifttyper tilgængelige via Font Burner, og der findes også et WordPress-plugin. Alt du skal gøre for at bruge det er at finde den skrifttype, du vil bruge, kopiere embedkoden, og indsæt den derefter i dit websites kode.
Blind Text Generator
Denne dummy tekst generator giver dig mulighed for at oprette ikke bare lorem ipsum, men også en række andre dummy teksttyper. Samtidig kan du også formatere teksten lige inden for generatoren (klik på Avancerede indstillinger), og kopier derefter CSS.
Baseline
Baseline er et rutenett og typografi ramme, der indeholder filer til nulstilling af browser standardindstillinger og opbygge et grundlæggende typografisk layout. Det er en god mulighed for designere, der ønsker at bruge et gitterlayout og også vil have hjælp til at designe områdets typografi. Typografiopsætningen indeholder overskrifter, lister, afsnit, blokeringer og tabeller samt en anden markupkode.
Font Matrix
Font Matrix viser skrifttyperne inkluderet med Mac og Windows-operativsystemer, Microsoft Office og Adobe Creative Suite, alt sammen i et gitter, der gør det nemt at se, hvilke skrifttyper der højst sandsynligt findes på hvilke typer computere. Hvis dit websted f.eks. Hovedsagelig henvender sig til designere, kan du muligvis gøre det første skrifttype i din skrifttype noget, som følger med Adobe Creative Suite, men hvis webstedet er rettet mod erhvervsbrugere, kan den første skrifttype inkluderet være noget fra Microsoft Office.
typograph
Typografi giver dig mulighed for at eksperimentere med forskellige skalaer og andre elementer af vertikal rytme. Den omfatter en række traditionelle skalaer (herunder Le Corbusier og Fibonacci) samt andre layout muligheder.
Webtypetjenester
Typekit
Typekit tilbyder skrifttyper fra forskellige typer sælgere og støberier, herunder The League of Movable Type, FontFont og Veer (du kan se hele listen over skrifttyper uden at skulle tilmelde dig en konto). De tilbyder også avancerede kontrolmuligheder til styling af dine skrifttyper, uendelig skalerbarhed og en kolofon, der fortæller dine besøgende, hvilke skrifttyper dit websted bruger. Prissætning for Typekit er rimelig, lige fra gratis til delvis adgang op til $ 100 / år for websteder med høj trafik.
Kernest
Kernest er en web skrifttype tjeneste, der bruger OFL, GPL, GUST og Creative Commons skrifttyper, såvel som dem med kommercielle licenser. Mange af deres skrifttyper er gratis at bruge (selve tjenesten er gratis), mens andre har abonnementsgebyrer, der starter med et par dollars.
Skrifttyper Live fra Ascender
Ascender tilbyder deres egen web skrifttype tjeneste, Fonts Live. De har over 110 skrifttyper til rådighed, med skrifttyper fra Monotype, Microsoft, Bigelow & Holmes og andre, samt deres egne skrifttyper.
Google Font API
Google tilbyder et begrænset udvalg af open source web skrifttyper. Selvom udvælgelsen ikke er stor, er den gratis og støttet af Google, hvilket betyder, at du usandsynligt ikke kan løbe i kapacitetsproblemer eller forsinkelsestid.
TypeFront
TypeFont nærmer sig web skrifttyper lidt anderledes. I stedet for at tilbyde et bibliotek af web-venlige skrifttyper, tillader de dig at uploade dine egne skrifttyper, der bærer en web-venlig licens. Dette er en god mulighed, hvis de skrifttyper, du vil bruge, ikke udbydes i øjeblikket af nogen af de andre webtypetjenester. Der er en gratis plan for websteder med lav trafik samt betalte planer.
Typoteque Web Fonts
Typotheque tilbyder deres egen web skrifttype tjeneste for at gøre deres skrifttyper tilgængelige for @ font-face implementeringer. Fordelen er, at der kun er en engangs licensudgift, der kan dække både print og webapplikationer. Ulempen er, at udvælgelsen er begrænset til bare deres skrifttyper.
Typografi Ressourcer og artikler
Elementer af typografisk stil anvendt på internettet
Dette er en meget grundig referencevejledning til alle, der ønsker at lære ikke kun det grundlæggende i god webtypografi, men også mere avancerede teknikker og principper. Det er opdelt i kapitler og underkapitler, herunder vandret og lodret bevægelse, blokke og afsnit, pagination, størrelse og meget mere. Det er et igangværende arbejde, så forvent mere information fremover.
Nice Web Type
Nice Web Type har tonsvis af oplysninger om implementering af webtypografi. De har "noter" om alt fra at komme i gang med webtypografi til at bruge CSS @ font-face. De diskuterer også trends og nye ideer med jævne mellemrum og har en side om, hvad de betragter som nogle af de bedste skrifttyper derude.
12 Eksempler på punkttypografi
Denne samling af prøveformatformater fra Jon Tan giver et godt udgangspunkt for alle, der designer et tekst-tungt websted. Mange designere overser alle de muligheder, der følger med afsnit styling, og vælger mere traditionelle, konservative muligheder. Denne artikel viser, at det ikke er så svært at træde ud af kassen og gøre noget interessant med afsnitene i dine designs.
Typografisk Kontrast og Flow
Dette er en fantastisk vejledning fra WebDesignerWall på principperne om flow og kontrast i webtypografi. Det bryder ned disse principper i flere sektioner, herunder størrelse, skrifttype / klassificering, farve og vægt.
Revideret skrifttype
I denne artikel diskuteres udvidelsen af de fælles websikkerte CSS-fontstabler ved at udforske andre almindeligt installerede skrifttyper. Det udforsker også skrifttypestablerne på nogle populære websites, sammen med anbefalinger for, hvordan de kan forbedre deres stabler.
På webtypografi
Denne artikel af Jason Santa Maria på A List Apart er et meget omfattende kig på parring skrifttyper i dit website designs. Det er et emne, der ikke diskuteres meget ofte, men er afgørende for at skabe flotte typografiske designs på nettet.
Tænker med Type
Tænker med Type er den ledsagende hjemmeside til bogen af samme titel af Ellen Lupton. Det giver masser af grundlæggende information om typografi. Mens meget af det er fokuseret på print typografi, kan masser af de medfølgende oplysninger anvendes til webtypografi.
10 gode tips til forbedring af din webtypografi
En liste over ti enkle ting, du kan gøre for at forbedre typografien i dit website design. Den indeholder oplysninger om skrifttype, størrelse, skala og hierarki, førende og mere.
Typografi Inspiration, Trends & News
Typophile
Typofile er et forum for skrifttyper og typografer. Hvis du vil finde ud af, hvad der sker i typografiens verden, er Typophile et godt sted at se. Det er også et godt sted at få hjælp til eventuelle typografirelaterede problemer, du måtte have.
Jeg elsker typografi
ILT er en blog dedikeret udelukkende til typografi. Det diskuterer både design og forretningsmæssige emner, fra et professionelt synspunkt. Deres arkiv er enormt, så der er masser af information om aktuelle og tidligere nyheder og tendenser for at holde dig travlt.
vi elsker typografi
WLT er et galleri af typografi, bogstaver, skiltning og anden type. Brugere kan indsende billeder af typen de elsker, og det er et godt sted at gå til typografi inspiration til dit næste projekt.
Typografi for overskrifter
Elementer af Design har et stort galleri med mere end 120 eksempler på overskriftstypografi. De kører gamuten fra simpelt til komplekst, i en række forskellige skrifttyper og stilarter. Det er et glimrende sted at gå, hvis du leder efter lidt inspiration. De har også et galleri af træk citater med 20 + eksempler.
Typographica
Typographica tilbyder type anmeldelser, kommentarer og typografi bog anmeldelser. Deres type anmeldelser er særligt informative, hvis du søger at lære om, hvad der gør et godt skrifttype.
Bag scenerne med udsøgt webtypografi
Dette er faktisk den første i en fem-delt serie. Dette indlæg ser på typografien bag A List Apart, og nedbringer de skrifttyper og stilarter, der anvendes til forskellige dele af webstedet. Efterfølgende indlæg se på: Jesús RodrÃguez Velasco , Jon Tan , Designr.it , og The Codex Transportica .
Typesites
Typesites er en blog, der viser store webtypografi-designs regelmæssigt. De steder, de har, er forskellige, men alle omfatter inspirationsbrug af typen.
Kompileret udelukkende til Webdesigner Depot by Cameron Chapman