30 av de bästa webbtyperna online
Det verkar som det finns två läger bland webbdesigners: de som omfamnar webtypografi , experimenterar med det och försöker nya saker i praktiskt taget alla sina mönster. och de som undviker det som pesten, väljer att använda standard, webbsäkra teckensnittsstackar med liten variation.
Det verkar också som många designers som faller i den andra gruppen önskar att de var mer som de första.
Resurserna nedan kan hjälpa dig att förbättra din webtypografi oavsett vilket läger du faller in i.
Det finns verktyg för att skapa unik typografi, referenser och artiklar som kan lära dig typografiska principer, och massor av inspiration och nyheter för att hålla dig uppdaterad om tillståndet för webtypografi.
Typografi Verktyg
Typetester
Typetester kan du jämföra upp till tre teckensnitt, sida vid sida, med vilken exempeltekst du vill ha. Du kan ange grundlinjens teckenstorlek, typsnitt, storlek, ledning, spårning, justering, ordavstånd, dekoration, färg och bakgrundsfärg för att få en mycket korrekt bild av vad dina teckensnitt kommer att se ut på den aktuella webbplatsen. Då, när du har allt som ser precis som du vill ha det, kan du ta tag i CSS.
HTML Ipsum
HTML-Ipsum är en lorem ipsum generator speciellt för webbdesign. I stället för att bara ge dig bitar av text kan HTML-Ipsum ge dig förformaterad text som stycken, beställda listor, tomma tabeller, formulär och navigeringslistor. Förformaterad text så här är ett bra sätt att spara tid när du skapar webbplatsmockups och initiala mönster.
Typechart
Typschart låter dig bläddra i förformaterade, webbsäkra teckensnitt och visa dem som de kommer att visas på både en Windows-dator och en Mac. Du kan sortera igenom de typsnitt som ingår baserat på storlek, typsnitt och betoning.
WP-Typografi
WP-Typografi är ett WordPress-plugin som hjälper till att göra din standard WP-typografi mer attraktiv. Den stöder bindning, distanskontroll, intelligent karaktärsbyte (inklusive citattecken, bindestreck, ellipser och matte symboler) och CSS-krokar för styling specifika saker (inklusive ampersands, akronymer och siffror).
CSS typ Set
CSS Type Set låter dig utforma ett textblock och sedan kopiera CSS. Det är en enkel CSS-generator som är utmärkt för att utforma en typsnitt i taget. Det låter dig styra typsnittet, storleken, avståndet, ledningen, dekorationen och färgen.
Flipping Typisk
Flipping Typical visar dig provtext i en mängd olika teckensnitt som du har installerat på din dator. Det är ett bra sätt att jämföra en massa typsnitt, sida vid sida, allt på en gång. Den enda försiktigheten: endast några av de teckensnitt som visas är webbsäkra.
Typografiskt rutnät
En etablerad vertikal rytm är en av de saker som skiljer bra typografi från bra typografi. Typographic Grid hjälper till att upprätta den vertikala rytmen för dig. Den innehåller också ett vertikalt galler som en guide för placering av både typografi och andra element.
WhatTheFont
WhatTheFont ger ett enkelt sätt att ta reda på vad en viss typsnitt är. Ladda bara upp en bild (eller ange en webbadress) och WhatTheFont kommer att avgöra vilken typsnitt som används. Det här är ett bra sätt att hitta teckensnitt som har använts i bilder eller Flash-filer.
CSS med vertikal rytm
Som redan nämnts sätter en konsekvent vertikal rytm bra typografi utöver det som bara är "bra". Det här verktyget kan hjälpa dig att skapa CSS för typografi som har en konsekvent vertikal rytm. Ange bara teckensnittsfamiljen, basstorleken, baslinjens höjd och målstorleken och beräkna för att få CSS för en konsekvent vertikal rytm.
Baslinjedymtomräknare
En annan stor vertikal rytmräknare. Den här kommer dock att visa dig vilka olika typstorlekar som ser ut bredvid varandra när de ställs in med din etablerade vertikala rytm. Det är ett bra sätt att se till att alla teckensnittstorlekar du använder kommer att se okej.
Fontbrännare
Fontbrännare låter dig bädda in teckensnitt på dina webbplatser med hjälp av sIFR, med hjälp av ett grafiskt gränssnitt. Det finns för närvarande fler än 1000 teckensnitt tillgängligt via Font Burner, och det finns också ett WordPress-plugin tillgängligt. Allt du behöver göra för att använda det är att hitta det teckensnitt du vill använda, kopiera inbäddningskoden och klistra in den i din webbplatss kod.
Blind Text Generator
Denna dummy textgenerator låter dig skapa inte bara lorem ipsum, utan också ett antal andra dummy texttyper. Samtidigt kan du också formatera texten direkt i generatorn (klicka på Avancerade alternativ) och kopiera sedan CSS.
Baseline
Baslinjen är en rutnät och typografiram som innehåller filer för att återställa webbläsarens standard och bygga en grundläggande typografisk layout. Det är ett bra alternativ för designers som vill använda en rutnätlayout och vill också ha lite hjälp med att utforma webbplatsens typografi. Typografiuppsättningen innehåller rubriker, listor, stycken, blockquotes och tabeller, liksom någon annan markupkod.
Fontmatrix
Fontmatrix visar teckensnitt som ingår i Mac- och Windows-operativsystem, Microsoft Office och Adobe Creative Suite, allt i ett rutnät som gör det enkelt att se vilka typsnitt som sannolikt kommer att hittas på vilka typer av datorer. Om din webbplats till exempel huvudsakligen gäller designers kan du göra den första typsnittet i din fontstack något som kommer med Adobe Creative Suite, men om webbplatsen riktar sig till företagsanvändare kan det första teckensnittet vara något från Microsoft Office.
Typograph
Typografi kan du experimentera med olika vågar och andra delar av vertikal rytm. Den innehåller en mängd olika traditionella vågar (inklusive Le Corbusier och Fibonacci) samt andra layoutalternativ.
Webtextjänster
Typekit
Typekit erbjuder teckensnitt från en mängd olika säljare och gjuterier, inklusive The League of Movable Type, FontFont och Veer (du kan se hela listan med teckensnitt utan att behöva registrera dig för ett konto). De erbjuder även avancerade kontrollmöjligheter för styling av dina teckensnitt, oändlig skalbarhet och en kolofon som berättar för dina besökare vilka typsnitt din webbplats använder. Prissättning för Typekit är rimlig, allt från gratis till partiell tillgång upp till $ 100 / år för webbplatser med hög trafik.
Kernest
Kernest är en webbtypstjänst som använder OFL-, GPL-, GUST- och Creative Commons-teckensnitt, liksom de med kommersiella licenser. Många av deras teckensnitt är fria att använda (själva tjänsten är gratis) medan andra har teckningsavgifter som börjar med några dollar.
Teckensnitt Levande från Ascender
Ascender erbjuder sin egen webbtypstjänst, Fonts Live. De har över 110 tecken tillgängliga, med teckensnitt från Monotype, Microsoft, Bigelow & Holmes och andra, liksom deras egna teckensnitt.
Google Font API
Google erbjuder ett begränsat urval av webblanketter med öppen källkod. Medan valet inte är stort är det gratis och backat av Google, vilket innebär att det är osannolikt att det inte går att lösa problem med kapaciteten eller fördröjningstiden.
TypeFront
TypFont närmar sig webbfonter lite annorlunda. Snarare än att erbjuda ett bibliotek med webbvänliga typsnitt, låter de dig ladda upp egna teckensnitt som bär en webbvänlig licens. Detta är ett bra alternativ om de teckensnitt du vill använda inte erbjuds för närvarande av någon av de andra webbtypstjänsterna. Det finns en fri plan för webbplatser med låg trafik samt betalade planer.
Typoteque Web Fonts
Typotheque erbjuder sin egen webbtyptjänst för att göra sina teckensnitt tillgängliga för @ font-face-implementeringar. Fördelen är att det bara finns en engångslicens som kan täcka både utskrifts- och webbapplikationer. Nackdelen är att valet är begränsat till bara deras teckensnitt.
Typografi Resurser och artiklar
Elementen av typografisk stil tillämpad på webben
Detta är en mycket noggrann referensguide för alla som vill lära sig inte bara grunderna för bra webtypografi utan också mer avancerade tekniker och principer. Den är uppdelad i kapitel och underkapitel, inklusive horisontell och vertikal rörelse, block och stycken, pagination, storlek och mycket mer. Det är ett pågående arbete, så förvänta dig mer information att visas i framtiden.
Trevlig webbtyp
Nice Web Type har massor av information om implementering av webtypografi. De har "anteckningar" om allt från att komma igång med webtypografi till att använda CSS @ font-face. De diskuterar också trender och nya idéer regelbundet och har en sida som ägnas åt vad de anser vara några av de bästa teckensnitten där ute.
12 Exempel på punkttypografi
Denna samling av styckeformat från Jon Tan ger en bra utgångspunkt för alla som designar en text-tung webbplats. Många designers har utsikt över alla möjligheter som följer med styling och väljer mer traditionella, konservativa alternativ. Denna artikel visar att det inte är så svårt att gå ut ur lådan och göra något intressant med punkterna i dina mönster.
Typografisk kontrast och flöde
Detta är en fantastisk guide från WebDesignerWall på principerna om flöde och kontrast i webtypografi. Det bryter ner dessa principer i flera sektioner, inklusive storlek, typsnitt / klassificering, färg och vikt.
Reviderad typsnittstapel
I den här artikeln diskuteras att du utökar de vanliga webbsäkra CSS-teckenspåren genom att utforska andra vanliga installerade teckensnitt. Det utforskar också typsnittstaplarna på några populära webbplatser, tillsammans med rekommendationer för hur de kan förbättra sina stackar.
På webbtypografi
Den här artikeln av Jason Santa Maria på en lista är ett mycket omfattande titt på parningstecken i dina webbdesigner. Det är ett ämne som inte diskuteras mycket ofta men är avgörande för att skapa bra typografiska mönster på webben.
Tänker med typ
Tänkande med typ är kompanionswebbplatsen till boken av samma titel av Ellen Lupton. Den erbjuder massor av grundläggande information om typografi. Medan mycket av det är inriktat på utskriftstypografi, kan mycket av informationen användas för webtypografi.
10 bra tips för att förbättra din webbtypografi
En lista med tio enkla saker du kan göra för att förbättra typografi i dina webbdesigner. Den innehåller information om typsnitt, storlek, skala och hierarki, ledande och mer.
Typografi Inspiration, Trender & Nyheter
Typophile
Typofile är ett forum för typfältentusiaster och typografer. Om du vill ta reda på vad som händer i typografiens typografi är Typophile ett bra ställe att leta efter. Det är också ett bra ställe att få hjälp med eventuella typografirelaterade problem du kanske har.
Jag älskar typografi
ILT är en blogg som helt och hållet ägnas åt typografi. Det diskuterar både design och affärsämnen, från en professionell synvinkel. Deras arkiv är enormt, så det finns gott om information om aktuella och tidigare nyheter och trender för att hålla dig upptagen.
vi älskar typografi
WLT är ett galleri med typografi, bokstäver, skyltar och annan typ. Användare kan skicka in bilder av typen de älskar, och det är ett bra ställe att gå till typografiinspiration för ditt nästa projekt.
Typografi för rubriker
Designelement har ett bra galleri med mer än 120 exempel på rubrik typografi. De kör spalten från enkel till komplex, i olika typsnitt och stilar. Det är en utmärkt plats att gå om du letar efter lite inspiration. De har också ett galleri av dra citat med 20 + exempel.
Typographica
Typographica erbjuder typrecensioner, kommentarer och typografibokrecensioner. Deras typrecensioner är särskilt informativa om du vill lära dig om vad som gör en bra typsnitt.
Bakom utsikten över utsökt webbtypografi
Detta är faktiskt den första i en femdelarserie. Det här inlägget tittar på typografi bakom en lista, och bryter ner de teckensnitt och stilar som används för olika delar av webbplatsen. Senare inlägg tittar på: Jesús Rodrguez Velasco , Jon Tan , Designr.it , och Codex Transportica .
Typesites
Typesites är en blogg som visar regelbundna bra webbtypdesigner. De platser de har är olika, men alla inkluderar inspelningsanvändning av typ.
Kompilerad uteslutande för Webdesigner Depot by Cameron Chapman