Share
Typografi är en av de viktigaste färdigheterna som en formgivare kan ha? industri veteraner spendera år honing sin teknik och du kan enkelt spendera år på ett universitet som studerar ämnet; Men var är det bästa stället att verkligen börja? Idag, i det senaste tillägget till vår Basix-serie introducerar vi typografi för nybörjare genom att förklara en enkel sak: varför typografi betyder så mycket i webbdesign.
Typografi är en gammal disciplin som förklaras mest enkelt som konsten att arrangera och designa det skrivna ordet. De tidigaste exemplen på typografi går tillbaka så långt som 1800 B.C. med de gamla grekerna, men den moderna epoken av typografi är knuten till mitten av 15-talet när tryckpressen uppfanns.
Jag kommer att hålla historielektionen kort här: Typografi är viktigt av en anledning: för att det är det primära sättet som designers kan kommunicera med läsare? om mediet är en bok, en tryckt reklam, skylt eller en tv-show, är typografi viktigt eftersom det är det visuella språkets utförande.
96% av Internet består av skriftlig information eller text. Denna text distribueras till stora och små bitar av information som sprids över olika sidor med olika format.
Formateringen av all denna skriftliga information i en webbdesign är vad vi kallar "Web Typografi".
Typografi är den viktigaste delen av en webbdesign eftersom den påverkar hur en webbplats kommunicerar med läsare. Från större rubriker och djärva block till liten kropp är de olika användningarna av text på webben kärnkommunikationsmetoden? så det är naturligt att hur en webbdesigner väljer att arrangera typ på en webbsida är avgörande för effektiviteten av den webbplatsen.
Vi ser dess användning överallt eftersom alla webbplatser är beroende av typografi för att överföra sitt meddelande till läsarna. Det finns dock några webbdesigners som tenderar att överklaga den oundvikliga betydelsen av typografi och fokusera endast på den visuella eller grafiska delen av webbdesignen.
Att använda typografi för utskriftsmedium som broschyrer, fliers, tidskrifter, böcker eller utomhusmedia som poltecken och skyltar är annorlunda än att använda den för dataskärmen. Vad gäller typografi är skärmen ett helt annat medium? och som med vilken typ av design du verkligen behöver tänka på det medium som människor kommer att se på din design genom. Tänk på följande två bilder:
Toppbilden är en affisch för bandet, The Black Keys. Bottenbilden är deras hemsida. Samma band, olika inställning till typografi. Varför? Eftersom mediet (och därmed meddelandet och avsiktet) för varje design är annorlunda. En är att marknadsföra en konsert, den andra är en portal för all sorts information om bandet.
När du använder typografi i en utskriftsdesign för något som en bok, kan det faktum att det kommer att ses från en relativt närhet ge dig möjlighet att spela med teckensnittet ganska eftersom det inte kommer att skada läsbarheten mycket. Om du använder typografi för utomhuskommunikationsmedier som en skylt eller affisch, vet du att läsaren har bara en bråkdel av tiden för att se brädet och konsumera det som kommuniceras och så att du inte klarar av finjustering av typografi mycket - i stället kan du fokusera på det första intrycket en läsbarhet av typen.
Men med en webbplats finns det helt olika mål i åtanke. Att utforma typografi för datorer och webben kräver att designern delar upp mycket information i olika segment och delsegment (mikro och makro-typografi). Dessutom är en webbsida inte konstant eftersom den måste visas på olika webbläsare, olika Internet-åtkomstenheter och med olika skärmupplösningar. Så webtypografi måste hantera ett stort antal frågor i jämförelse med andra medier. Så, när du väljer typografi för deras hemsida, måste en designer överväga kompatibiliteten och läsbarheten på plattformen. Det här är bara några av de problem som en webbdesigner måste komma ihåg när man närmar sig en webbplats.
När det gäller webbdesign är typografi inte begränsat till att välja ett teckensnitt och lägga ut det. Det är konsten att dela upp informationsbuntar på ett sådant sätt att läsaren får en bra chans att hitta vad som är av intresse för honom? Det är här typografi på webben blir mer som informationsdesign.
Typografi på webben handlar lika mycket om att organisera typen till effektiva meningsfulla layouter som det handlar om att använda en bra typsnitt.
Att uppmärksamma ett visst textblock, hjälpa användarna att hitta innehållet som de söker efter eller anpassa ett brett utbud av innehåll till en enda sida görs genom typografiska färdigheter.
Tanken att utforma typ är mer än bara läsbar, men också att vara meningsfull är en del av det som förvirrar många människor om webtypografi. Vem som helst kan skriva ut ett stycke text färre människor kan använda saker som bokstavsavstånd, linjehöjd och teckenstorlek för att ge det en känsla av karaktär ;? men de bästa webbdesignerna kan organisera typ över en hel layout på ett sätt som ger mening till läsare och hjälper dem att vägleda dem över hela webbplatsen.
Det här menar vi med att typografi är informationsdesign.
Det är ofta användbart att börja typografiska systemet för en design genom att bryta upp den i två olika segment:
Genom att närma sig makro-typografi först kan det vara enkelt att skissera "större bild" -elementen i typsystemet i en design. Vart kommer navigeringen att vara? Hur kommer typ på webbplatsen att läggas ut? En kolumn? Två? Mer? Alla övergripande strukturregler bör definieras först. Vid den här tiden kan du använda nästan vilken typsnitt som helst du vill ha? men du kan börja känna för storleken och storleken på en design.
När du väl har "den stora bilden" beskrivits är det dags att närma sig Micro-typografi. Här börjar du verkligen förfina ditt typsystem genom att definiera de stilistiska elementen som ditt primära (och möjligen sekundära) teckensnitt, hur stora stora rubriker kommer att vara, standardstorleken på saker som sidebartitlar, stycktext, länkfärg mm.
Om du precis börjat som webbdesigner kan du titta på alla de vilda och galen saker som händer med webtypografi. Du kanske har ett antal frågor, som: Var ska du börja? Vad är rätt och fel? Finns det regler som jag måste följa? Den goda nyheten är att webtypografi i sin kärna har faktiskt några konsekventa regler som du borde vara medveten om. Vad följer är några användbara tips jag har samlat för att skapa effektiva typsystem för webben:
Typografiens hierarki är väldigt viktigt i en webbdesign. Tänk på alla de olika platserna som du använder text på en webbplats: navigering, rubriker, stycken, bildtexter, sidofält, etc? Chansen är bra att det finns mycket text! Hur ska du göra allt detta till ett logiskt typsystem? Genom att utveckla en typhierarki.
En välutvecklad hierarki gör att du kan veta var du ska börja läsa, hur du fortsätter läsa vidare och skillnaden mellan viktigaste och mindre viktig information på en sida. Med en effektiv typhierarki behöver du inte lita på textplacering längre för att markera vad du vill att dina läsare ska gå igenom först.
Läs mer om Förstå hierarkin
Brist på konsistens i typografi är ett av de vanligaste och mest upprepade misstagen som webbdesigners begår dessa dagar. En tryckdesigner kommer ofta att noggrant utforma varje brev på en sida? men det är inte nödvändigt med webbdesign.
Istället för att försöka manuellt designa varje typ av typ på en webbplats, design med tanken om Cascading Style Sheets (CSS) i åtanke. Använd CSS välsignelse och sätt typsnittet, storleken, färgen, linjeavståndet, höjden och andra funktioner i din typografi över hela webbplatsen.
Jag har nämnt detta tidigare, men låt mig betona punkten: Stora webbdesigners gör mer än bara placera bilder och klistra in text i en webblayout. Det tar bra professionella vanor att göra en vinnande webbdesign. En av de bästa professionella vanorna som en webbdesigner borde ha är att Läs texten innan du placerar den i webblayouten. Om du har tillgång till textinnehållet som du ska använda, undvik bara att klistra in det hela i blint. Genom att gå igenom och läsa den faktiska texten kan du göra en bättre koppling mellan innehållet och designen.
När du är färdig med att placera texten och andra element i designen, gör det också en punkt att gå igenom det igen som en korrekturläsningspraxis för att undvika eventuella misstag eller saker som saknas. Det är fantastiskt hur ofta designers glömmer att utforma enkla saker som punktlistor eftersom de rusade genom designfasen.
För en framgångsrik webbdesign bör en webbdesigner vara uppmärksam på både makro och mikro typografi. Även de bästa layouterna kan komma ifrån varandra om saker saknas på "mikro" sidan av sakerna? och även den bästa mikrotypen kommer inte att vara användbar för läsare om den inte är uppbyggd med hjälp av ordinarie makrotypografi. Båda är viktiga!
Massor av designers är särskilt bra på den ena eller den andra? så ta en stund att överväga vad din starkaste kostym är: makro eller mikro? Gör sedan ditt bästa för att stärka dina förmågor (genom övning och uppmärksamhet på detaljer!) I din svagare kompetens.
Detta säger sig självklart för många designers, men färgen på text är en annan viktig sak att tänka på. Det finns hundratals webbplatser som tar denna punkt för givet och använder teckensnittfärger som antingen:
Du behöver inte gå och plaska hela regnbågen över sidan, och du behöver inte använda något hemskt som röd text på en grön bakgrund? använd bara enkel, förnuftig färgteori för att välja färger för dina teckensnitt som är läsliga och intressanta. Kom ihåg att länkar borde vara färgade i de flesta fall? Det berättar för folk att de kan klicka på dem!
Läs mer om Web Design Color Theory.
Sluta använda Lorem Ipsum! Det finns ingen ersättning för den faktiska texten när du utformar en webbplats. Medan du kan använda dummy-text för att få en uppfattning om hur sakerna kommer att se ut i layouten, så snart din webbdesign är klar, försök använda den faktiska texten som du eller din kund planerar att använda på den levande webbplatsen . Först då kan du synkronisera designen med texten och bestämma hur effekten av hur hela webbplatsen kommer att se ut? även små övervakningar i denna process kan leda till svaga punkter i en design, så ta tid att använda levande text innan du ringer ett projekt "komplett"!
Det underbara med webtypografi är att det finns ett brett utbud av sätt att närma sig - varje designer kommer att ha sin egen stil för att göra saker och det finns egentligen inte en enda "rätt" sätt att utforma ut typ på webb. Typ har personlighet, precis som du eller klienten du arbetar för, så var inte rädd för att leka med dina egna kreativa variationer när du naglar basixen för en webbdesign.
Läs mer om Välja rätt typsnitt
Webbdesign kräver att du behärskar ett antal saker för att göra en riktigt bra layout, och typografi är definitivt en av dessa saker. En webbdesigner som verkligen förstår betydelsen av typografi kommer att kunna slå framgångsfaktorn oftare än inte? och allt som verkligen behövs är att träna ditt sinne för att se det bästa sättet att lägga ut en viss typ av typ! Typografi är inte raketvetenskap, men det tar mycket arbete för att upptäcka det bästa sättet att göra saker för ett visst projekt.
Ta lite tid varje dag att träna - försök att ta en artikel som du verkligen gillar och omdesignar den; Skapa ditt eget CV, portfölj, vad du än kan hitta? använd bara vad som helst som du kan träna och du kommer bli bättre på nolltid! Lita på mig, så snart du förstår grunderna blir det en bit tårta!
Denna artikel skrevs av Arfa Mizra och Brandon Jones. Tack för att du läser!
Accentsconagua