oavsett om det är på våra telefoner, i böcker eller på webbplatser, smälter vi ständigt skrivna ord. Från instruktionshäften till butiksfronter, typ är runt omkring oss. Vi reflekterar ofta över kraften i det skrivna ordet, men sällan anser vi designerns roll i att emulera tonen i ordet eller meningen.
bakom kulisserna har en designer tagit sig tid att överväga förhållandet mellan textens utseende och vad texten säger. I verkligheten kan olika stämningar, atmosfärer och känslor uttryckas helt enkelt genom typvalet. Men vad är egentligen typografi—och varför är det så viktigt?
i den här artikeln lyfter vi locket på allt du behöver veta om typografi. Vi börjar med definitionen av typografi, inklusive en kort historia av dess ursprung. Vi kommer då att ta itu med fördelarna med god typografi och den inverkan den kan ha på dina användare. Slutligen ska vi titta på de olika elementen som består av typografi, och vad de alla betyder.
Här är vad vi ska täcka:
- Vad är typografi?
- Varför är typografi viktigt?
- de olika elementen i typografi
- hur väljer du rätt typsnitt för din webbplats
- slutsats
klar? Låt oss dyka in!
vad är typografi?
Låt oss starta med grunderna: Vad är egentligen typografi? I huvudsak är typografi konsten att ordna bokstäver och text på ett sätt som gör kopian läsbar, tydlig och visuellt tilltalande för läsaren. Typografi innebär typsnitt, utseende och struktur, som syftar till att framkalla vissa känslor och förmedla specifika meddelanden. Kort sagt, typografi är det som ger texten liv.
i videon nedan lyfter CareerFoundry UI design mentor Olga locket på varför typografi betyder något-och vilken skillnad det gör för dina användare.
typografi kan dateras tillbaka till 11-talet, under innovation av rörlig typ. Före den digitala tidsåldern var typografi ett specialiserat hantverk associerat med böcker och tidskrifter och så småningom offentliga verk. Det första exemplet på typografi kan ses i Gutenberg Bible, som startade en typografirevolution i väst. Roligt faktum: den typ av typ som används i Gutenberg bibeln är nu känd som Textura, och du hittar den i rullgardinsmenyn teckensnitt på stora skrivbordsprogram idag!
spola fram till modern tid, där typografi mestadels är förknippad med både den digitala världen och trycket. Med födelsen av internet kom en kreativ explosion av typografiens konst. Plötsligt hade webbdesigners ett överflöd av teckensnitt och typalternativ till sitt förfogande, vilket gjorde typografi mer visuellt varierande än någonsin tidigare.
Varför är typografi viktigt?
Typografi är så mycket mer än att bara välja vackra teckensnitt: det är en viktig del av användargränssnittsdesign. Bra typografi kommer att skapa en stark visuell hierarki, ge en grafisk balans till webbplatsen och ställa in produktens övergripande ton. Typografi ska vägleda och informera dina användare, optimera läsbarhet och tillgänglighet och säkerställa en utmärkt användarupplevelse.
låt oss gräva lite djupare i varför typografi är så viktigt.
typografi bygger varumärkesigenkänning
inte bara kommer bra typografi att förbättra webbplatsens personlighet, men dina användare kommer subliminalt att börja associera typsnittet på din webbplats med ditt varumärke. Unik, konsekvent typografi hjälper dig att skapa en stark användarföljning, bygga förtroende med dina användare och hjälpa till att föra ditt varumärke framåt.
typografi påverkar beslutsfattandet
typografi har en djupgående effekt på hur användarna smälter och uppfattar informationen som förmedlas av texten. Iögonfallande typ är mycket mer övertygande än svaga teckensnitt som inte förstärker textens budskap.
typografi håller läsarnas uppmärksamhet
bra typografi kan vara skillnaden mellan någon som bor på din webbplats i en minut eller en halvtimme. Det är viktigt att din webbplats är visuellt stimulerande och minnesvärd, och typografi spelar en stor roll i denna process.
de olika elementen i typografi
För att komma igång med typografi måste du först ta tag i de åtta väsentliga typografiska designelementen.
teckensnitt och typsnitt
det finns viss förvirring kring skillnaden mellan typsnitt och teckensnitt, med många som behandlar de två som synonyma. Ett typsnitt är en designstil som består av en myriad av tecken av olika storlekar och vikt, medan ett teckensnitt är en grafisk representation av texttecken. Enkelt uttryckt är ett typsnitt en familj av relaterade teckensnitt, medan teckensnitt hänvisar till vikter, bredder och stilar som utgör ett typsnitt.
det finns tre grundläggande typer av typsnitt: serif, sans-serif och dekorativa. För att hålla gränssnittet snyggt och strömlinjeformat kommer en bra designer aldrig att använda mer än tre teckensnitt—och hålla dekorativa teckensnitt till ett minimum. De flesta UI-designers kommer att para serif-teckensnitt med sans-serif-teckensnitt, till exempel att sätta huvudtexten i ett serif-teckensnitt och sätta din titel i ett sans-serif-teckensnitt, eller vice versa.
kontrast
precis som hierarki hjälper kontrast till att förmedla vilka tankar eller budskap du vill betona för dina läsare. Spendera lite tid på kontrast gör din text intressant, meningsfull, och uppseendeväckande. De flesta designers skapar kontrast genom att leka med olika typsnitt, färger, stilar och storlekar för att skapa påverkan och bryta upp sidan.
konsistens
att hålla dina typsnitt konsekventa är nyckeln till att undvika ett förvirrande och rörigt gränssnitt. När du förmedlar information är det viktigt att hålla sig till samma typsnitt, så att dina läsare omedelbart förstår vad de läser och börjar märka ett mönster. Även om det är ok att leka med nivåer av hierarki i viss utsträckning, är det bra att skapa en konsekvent hierarki av typsnitt (ett konsekvent teckensnitt för rubriker, ett annat för underrubriker) och hålla fast vid det.
vitt utrymme
ofta kallat ’negativt utrymme,’ vitt utrymme är utrymmet runt text eller grafik. Det förbises ofta och tenderar att gå obemärkt av användaren, men korrekt användning av vitt utrymme säkerställer att gränssnittet är snyggt och texten är läsbar. Vitt utrymme kan till och med uppmärksamma texten och ger en övergripande estetiskt tilltalande upplevelse. Vitt utrymme har ofta formen av marginaler, vaddering eller bara områden utan text eller grafik.
justering
justering är processen att förena och komponera text, grafik och bilder för att säkerställa att det finns lika utrymme, storlek och avstånd mellan varje element. Många UI designers skapa marginaler för att säkerställa att deras logotyp, header, och kroppen av texten är i linje med varandra. När du anpassar ditt användargränssnitt är det bra att vara uppmärksam på branschstandarder. Att anpassa din text till höger verkar till exempel kontraintuitivt för läsare som läser från vänster till höger.
färg
färg är ett av de mest spännande elementen i typografi. Det är här designers verkligen kan bli kreativa och höja gränssnittet till en ny nivå. Textfärg, i alla fall, ska inte tas lätt: att spika din teckensnittsfärg kan göra att texten sticker ut och förmedlar tonen i meddelandet —men att få fel kan resultera i ett rörigt gränssnitt och text som kolliderar med webbplatsens färger.
färg har tre nyckelkomponenter: värde, nyans och mättnad. En bra designer vet hur man balanserar dessa tre komponenter för att göra texten både iögonfallande och tydligt läsbar, även för dem med synskador. Ofta testar designers detta genom att visa texten i gråskala (utan färg) och göra tweaks om texten är för mörk eller för ljus mot bakgrundsfärgen.
hierarki
upprättande av hierarki är en av de viktigaste principerna för typografi. Typografisk hierarki syftar till att skapa en tydlig åtskillnad mellan framstående exemplar som bör märkas och läsas först och standardtextkopia. I en tid av kort uppmärksamhet spänner till följd av sociala medier, designers uppmanas att vara kortfattad och skapa typsnitt som tillåter användare att konsumera nödvändig information på kort tid.
hierarki kan skapas med storlek, färg, kontrast och justering. Om du till exempel har en kopia med ett utropstecken i början som är rött och större än föregående kopia, är detta en visuell ledtråd för läsarna att det är en uppmaning till handling. Det vanligaste exemplet på typografisk hierarki är storlek: rubriker ska alltid vara större än underrubriker och standardtext.
Hur väljer du rätt typsnitt för din webbplats?
Nu när vi har bekantat oss med de olika typografielementen, låt oss prata om processen att välja typsnitt för ditt gränssnitt. Med så många olika teckensnitt och typsnitt att välja mellan är det lätt att känna sig överväldigad. Att göra rätt val beror på så mycket mer än att bara se vad som ser bra ut. Här är några viktiga överväganden:
Tänk på personlighet
hur vill du att dina användare ska känna när de först går in på din webbplats. Vill du efterlikna en vänlig atmosfär? Vill du att webbplatsen ska känna sig avancerad, välkomnande, lekfull eller seriös? Det är absolut nödvändigt att typografin återspeglar varumärkets eller produktens personlighet. En bra utgångspunkt när du står inför denna utmaning är att definiera kärndragen i ditt varumärke och börja samla typsnitt som speglar dessa egenskaper. Därifrån kan du börja märka en trend.
reflektera över ton
det är lika viktigt att överväga hur teckensnittet harmoniserar med tonen i meddelandet. Om du till exempel vill förmedla allvarlig eller viktig information, välj ett mindre stiliserat eller dekorativt teckensnitt som både är tydligt läsbart och begränsar distraktion.
skimp inte på funktionen
funktionen är lika viktig som form: det finns inget värre än en webbplats som ser vacker ut men är helt oläslig, vilket leder till att du klickar på fel knapp eller tar fel tur eftersom instruktionerna var oklara. När du bestämmer vilka typsnitt som ska inkluderas i ditt gränssnitt ställer du in stil, estetik och röst åt sidan och reflekterar över om teckensnittet är läsbart, läsbart och tillgängligt. Kan texten vara läsbar utan belastning? Är karaktärerna tillräckligt tydliga?
Tänk på prestanda
en sak som många designers ofta förbiser är att välja typsnitt som är webbläsarvänliga. Vanliga teckensnittsbibliotek som Google fonts erbjuder webbaserade Teckensnittsfiler som kan återges perfekt i en webbläsare utan problem. Pro Tips: när du laddar ner webbteckensnitt, ladda aldrig ner fler teckenuppsättningar än du behöver. På så sätt undviker du övervikt!
bli inspirerad
om du inte är säker på var du ska börja, ta dig tid att se vad andra människor gör. Öppna ögonen för typografin som du ser omkring dig. Kan du märka liknande mönster? Kan du se bra och dåliga exempel på typografi? Även om du följer typografi hashtags på sociala medier eller tittar upp typografi på Pinterest kommer du att ge dig några bra tankar om vad som finns där ute. Du kan också titta på dessa åtta typografitrender för ytterligare inspiration.
ta dig tid att testa
det bästa sättet att dechiffrera vilket teckensnitt som ska användas för ditt gränssnitt? Testa, testa och testa! Genom att samla användbar feedback från riktiga användare får du en tydligare inblick i vad som fungerar, vad som inte gör det, vad som är läsbart och vad som känns kontraintuitivt eller klumpigt.
slutsats
typografi förbises ofta, men det är en viktig komponent i användargränssnittsdesign. Mastering typografi kommer att se dig på god väg att bli en fantastisk UI designer! Om du inte är säker på var du ska börja, varför inte gå till dina favoritwebbplatser och börja notera vilka typsnitt de har gått för.
Vill du lära dig mer om UI-design? Kolla in dessa relaterade blogginlägg:
- 10 exempel på vackra bloggar som har spikat sin UI-design
- 32 användargränssnitt för UI-designers: din ultimata ordlista
- så här utformar du en ikon från början: en steg-för-steg guide