Share
Klar för den här månadens dos av webdesign typografisk awesomeness? Jag slår vad om att du är! Connor tar ledningen den här månaden med Brandon som gör en säkerhetskopiering - och vi har en lista med 17 sidor som visar upp några av de bästa typografierna för ni nalsals att kolla in. I den här månaden har vi till och med en speciell sektion för vissa nya (ish) webbaserade typografi och layoutverktyg för att göra ditt liv lite enklare. Låt oss gräva in!
Att prata om de tekniska reglerna för korrekt typografi är bra? men där gummit verkligen träffar vägen är när vi kan börja titta på exempel på typografi i aktion och analysera varför det fungerar. En av de vackra sakerna om typografi är att, precis som de språk som vi använder för att kommunicera med varandra, sättet du använder typ i en design ger det en röst. Du kan skrika och skrika eller du kan viska lugnt? Det är upp till dig och hur du vill att ditt meddelande ska höras.
Varje månad tittar vi på mellan 10 och 20 exempel på utmärkt typografi i webbdesign? men viktigare kommer vi också att analysera varför typografi fungerar. Låt oss dyka in i månadens erbjudande:
SquareSpace har faktiskt en historia av väl utformad typografi på sina webbplatser, men de drog ut alla stopp för årets SXSW-event. Webbplatsinnehållet handlar om att människor skickar whacky-bilder från evenemanget, men ta en titt på hur bra det är lagt ut. Vackert uppsatta rubriker? massor av variation i layouten? och subtil bakgrundsbild / texturer som refererar typografi av gamla. Höft, ultramoderna skalleillustration gör inte heller ont.
Webbplatsen är inte stor, vissa SS har gjort bra för att hålla sakerna fräscha och intressanta när du rullar ner sidan. Om du uppmärksammar, finns det verkligen ingen uppsättning standard för typografi (utöver samma typsnittfamiljer) - storlekar finns överallt och så är placeringen? Men det är helt acceptabelt i det här fallet, eftersom varje enskild sektion (det som syns på en skärm vid samma tidpunkt) fungerar i harmoni med sig själv. Färgerna är alla från samma allmänna palett, och allt känns som att det hängs på ett rutnät, även om du inte kan nagla det riktigt.
Grip Limited är en av de webbplatser som du kör över en gång i taget, som är så otroligt out-of-the-box som du bara måste sitta och ta in den i en minut eller två. Jag får den märkliga känslan att bara titta på det gör mig till en bättre typograf. Typen sorten är så mångsidig att platsen förmodligen inte kommer att vara svår att titta på utan monokrom-paletten. Heck, de flesta användbarhetsexperter kan säga att detta är fullständigt skräp även i sitt nuvarande tillstånd, men jag kommer att hävda att den här typen av roliga "hagelgevär" -metoder är precis vad webbdesigners behöver hänga sig från tid till annan.
Kommer du att återanvända denna layout om och om igen för affärer eller företagsprojekt? Naturligtvis inte, men bara att ta en liten bit av typ av denna sida skulle göra underverk att krydda ett annat vanligt projekt som du kanske arbetar med. Till exempel?
Burton är kinda / sorta på motsatt spektrum som Grip Limited-siten. Det är mycket organiserat, i en stel blocklayout och super duper lätt att använda. Ta en närmare titt och du kan noga se vad jag har lagt ihop de två sidorna i den här listan. Även om layouten själv är ganska väl låst i form av struktur, är den faktiska typografin på webbplatsen långt ifrån vad du normalt ser på webben - och mycket mer som du kan se i en snowboardmagasin eller katalog. Typ sätts i cirklar och andra vanliga webbformer för att ge varje sida rätt mängd visuellt intresse. De har också spridit sig i informationsgrafik och andra förenklade illustrationer till några av de vanliga rutblocken för att bryta upp monotonen och rytmen på varje sida.
Den här versionen av Burton-webbplatsen har funnits länge? och ändå känns det alltid nytt och friskt varje gång jag checkar ut det. Genom att enkelt byta ut foton och nyckelfärgerna kan de få mycket mer körsträcka ute från platsen för varje ny säsong.
Impact Media använder olika teckensnitt, färger och storlekar i huvudreglaget och hela deras hemsida. Liksom teckensnittet - Impact - valet av typografi över hela den här sajten är fet, stora teckensnitt som kontrasterar mycket med deras bakgrund.
Jag älskar den nuvarande stilen med fetstilte teckensnitt på nätet just nu och Impact Media använder det i sin andra rad för att skapa en härlig, välkomnande effekt.
Gaz Battersby är en grafisk designer baserad i Leeds, Storbritannien, vars minimalistiska webbplats fungerar som sin portfölj. Webbplatsen använder en serif-font under hela sin design, men kontrasterar endast element genom att ändra typsnitt (till kursiv) istället för en helt ny typsnitt. Detta resulterar i ett enklare, renare typografi system.
Battersbys hemsida använder också färg för att bygga upp en heirachy med rubrikerna omslutna i turkoscirklar för att fånga användarens uppmärksamhet.
Jag kommer inte att säga för mycket om SURROUND, för det är inte så mycket att säga. Det är en påminnelse om att ibland fungerar ett enkelt tillvägagångssätt för layout och typografi helt bra. Inga onödiga krusiduller, inget mellan besökaren och innehållet. Bara enkla fungerande tekniker som levererar ett meddelande.
Osynlig varelse är faktiskt en av mina favoritstudior i världen? går hela vägen tillbaka till när de sammanfogades som Asterik Studio. Lång historia kort: de skapar kickassaffischer, albumartiklar och andra roliga saker. Vad jag tycker om den här webbplatsen är det är kontroll och disciplin. Som en ledande "rock / metal" -studio kunde de lika lätt utforma en webbplats som tillgodoser den sidan av sitt arbete: vild, slipande, kaotisk. Istället har de valt att använda rena linjer, enkla färger och sans-serif-teckensnitt - vilket till sist får sitt arbete att tala för sig själv.
Feed Me är en webbsidans webbdesign som använder typografi för att skapa ett rent färgschema över hela sidan. Kontrasten mellan det vanliga teckensnittet och en djärvare borststil skapar en enkel heirachy som lägger tonvikten på nyckelord.
Feed Me har sina egna fördelar som en hel webbdesign och typografi är en viktig ingrediens för framgången. De böjda gröna teckensnitten samordnar med naturtemat för webbdesignen som jag älskar.
Det är svårt att påpeka den exakta orsaken till effekten som genereras av den här grafikdesignerns webbplats, men jag vet att det är en bra!
Hämta min chef till North Cape är en intressant webbplats. Ett belgiskt webbdesignföretag - nämligen Inventis - försöker utnyttja en 545km cykel för att få lite tillägg som Facebook gillar. Webbplatsen använder sig av ett intressant sortiment av typografi och använder färg för att betona de viktigaste delarna av varje uttalande (till exempel "5000 gillar" och "cykel 545km").
Färgen på texten på den här sidan samordnar med bakgrunden den ligger på, vilket framgår av den bruna texten som används på titelskylten. Inventis använder också inre skuggning för att skilja texten från dess bakgrund i fall där detta behövs, men inte var det inte är (som milstolparna på cykelbanan).
I likhet med Gaz Battersbys webbplats använder Wes Bos några olika teckensnitt i sin design och väljer istället att använda en bandbakgrund på sina redaktörer för att skapa hans hierarki. Mycket enkelt, jag älskar kontrasten från manusfontsnittet till serif-en och all-caps-betoningen på hans jobbtitlar.
Även om det inte är en ny webbplats är W3Cs HTML5-logotyper fortfarande ett bra exempel på bra typografi i spel av flera orsaker, inklusive användandet av en härlig djärv, kondenserad typsnitt i titlar som matchar sidans namnnamn.
Pargraphs på sidan är också åtskilda på lämpligt sätt för att lättare läsa för slutanvändaren.
Som du antagligen kan gissa från skärmdumpen, är det inte en ny webbplats. Det höll dock fram på andra typografi-roundups med så stor frekvens, jag skulle tänka på det som en skarp utelämning, skulle jag välja att inte inkludera den. Chrip var Twitter: s officiella utvecklare konferens som hände om den här tiden i fjol.
Jag lärde mig en tumregel om typografi: använd inte mer än tre tecken. Medan Chrip ger intryck av mycket aktivitet (något du verkligen vill skapa för en konferens), kan jag bara räkna med tre olika teckensnitt som används om man ignorerar logotypen.
Jag älskar särskilt titeln i Jeremy-kyrkans portfölj. Tonvikten på "The" ser fantastisk ut, men uppmärksammar ett huvudmål för att "minska bruset". Bortsett från hans djärva, skuggade titlar, använder resten av designen en mycket enkel, sans-serif-typsnitt som gör större uppmärksamhet åt huvudkontrast.
Black Ant Media använder en rad mycket släta ansikten som ser fantastiskt ut, men det är svårt att peka på varför. Black Ant Media väljer att använda samma teckensnitt istället för många och bara variera storlek, färg och vikt för att skilja olika elementets framträdanden.
Liksom några av de andra exemplen på detta, använder Black Ant Media också färgade bakgrunder i stället för att skala för att stöta titlar upp det är visuell hierarki.
Premium Pixels är ett WordPress-tema som gör listan tack vare dess relevans för några av de nuvarande typografistandarderna som diskuteras i Brandons senaste artikel om typografi. Den högljudda bakgrunden stämmer överens med texten på sidan tack vare en vit textskugga som ger en känsla av djup. Varje inlägg på sidan är även titeln med en kompakt, fet skrift.
Var och en av inläggen i det här WordPress-temat har stor linjeavstånd så det är mycket lättare att ögat läser och etiketten för stor polstring framgår av varje element på sidan.
Subtly, det finns också ett serif ansikte kastat mellan varje inläggs metadata.
Som en sidotal är Orman Clarks nyaste webbplatsutformning också värd att nämnas på den här listan, eftersom den exemplifierar några bra typografiska layoutprinciper. Ren, enkel och välorganiserad. Här är några skärmdumpar:
Webbdesigners pratar mycket om att återskapa "print estetik" på webben? men vanligtvis gör designers att det betyder att du bara använder rika strukturer, ojämna strukturer, otroliga hörnskuggor eller mycket trompe l'oeil effekter. Sällan minns designers verkligen att skrivartypografi ofta är lika strukturerad som typ på webben. Pelicanfly förenar det bästa av båda världarna (enligt min mening), genom att använda enkla kolumnstrukturer, typografiska symboler och samtidiga CSS-effekter för att skapa en webbplats som är minnesvärd. Jag kommer att gissa att den har ritats med tabletter i åtanke också, för det finns några fall där du måste flipa din skärm för att läsa.
Gratis verktyg: Det här är ett ganska nytt verktyg som jag sprang över den andra dagen. Det låter dig väsentligen tinker med bastyperna för ett projekt tills du får allt perfekt - så spetsar du ut CSS (3) som genererar stilen som du skapade. Jag är säker på att det finns en handfull liknande webb-appar där ute, men den här slog mig som en av de mer värdefulla på grund av den enorma mängden tinkering som du kan göra och det är lätt att använda.
Accentsconagua