Share
Typografi är ett grundläggande element i vilken design som du arbetar med. Den främsta anledningen till att vi i första hand har webbplatser är att visa information och att informationen ska konsumeras av användare som stöter på den. Medan det kan finnas många andra element på en webbplats är kärnan innehåll. Det innehållet måste lätt läsas, smälts, förstås och att ha en solid typografisk bas kommer bara att hjälpa till med det.
Att komma igång med typografi är möjligen en av de mer tillgängliga delarna av inlärningsdesign, helt enkelt på grund av hur lätt det är att ändra och leka med texten för att få omedelbara resultat. Raffinerar din typografi färdigheter så att du kan utforma något som fungerar bra och effektivt, är läsbart och användbart för dina användare, är mer av en utmaning.
Först får vi några av de grundläggande tekniska termerna ur vägen. Detta är bara en liten översikt över några av de vanligaste termerna som du kommer att stöta på när du arbetar med typografi, och det finns mycket mer omfattande guider på webben eller i böcker om du vill läsa mer.
Denna första termen är en som springer de flesta människor upp. typsnitt beskriver de utformade brevformerna. en font är fordonet som innehåller typsnittet. Du hämtar och installerar ett typsnitt för att använda en typsnitt inom din design.
Du kan säkert tänka på att det finns två huvudtypklassificeringar - serif och sans serif. serif teckensnitt ser vanligtvis lite mer klassiskt ut i stil, ofta med små flikar eller utsmyckningar (serifs) där brevformar avslutas.
Exempel på seriffonter inkluderar Times New Roman, Baskerville och Georgia. Sans serif typsnitt saknar serif utsmyckningar, istället ser lite modernare ut. Exempel på sans seriffonter är Helvetica, Arial och Futura.
Låt oss kort undersöka anatomin för en brevform.
Uppstigaren är någon del av en bokstav som sträcker sig över bokstäverens x-höjd. Du kommer att känna till bokstäver som har uppstigningar som b, d, f, h, k, l.
En nedstigning är någon del av ett små bokstäver som sträcker sig under brevets x-höjd. Till exempel g, j, p, q, y.
I ett brev är en räknare det böjda medföljande (eller delvis stängda) negativa rummet inuti ett brev. Vanliga bokstäver med räknare inkluderar b, d, e, o, s.
Som vi har nämnt är serifs de extra flikarna och utsmyckningarna du kan se när du skiljer mellan serif och sans serif typsnitt.
Baslinjen är en osynlig linje som alla tecken sitter på. Denna baslinje kan variera massivt mellan olika teckensnitt, men brukar alltid vara konsekvent inom en enskild typsnitt.
Kepshöjden är avståndet från baslinjen till toppen av stora bokstäverna.
X-höjden är höjden på huvuddelen av de små bokstäverna (eller åtminstone höjden på den små bokstaven x, därav namnet). Denna höjd innehåller inte höjden på ytterligare uppstigande eller nedstigande.
En glyph är ett individuellt tecken inom ett teckensnitt. Dessa inkluderar alla symboler eller bokstäver, till extra glyfer som kan vara tillgängliga för dig som inte matchar någon av de mer allmänt kända eller använda symbolerna eller bokstäverna.
... du borde tänka på:
När du arbetar med typografi (och det här låter uppenbart) bör du överväga storleken på texten som du ska arbeta med.
Med varje design trend som passerar där kommer det också att finnas trender om hur liten eller stor texten ska vara. Tänk till exempel om den avsedda publiken; Är din publik en yngre eller äldre publik, kommer de att behöva en större textstorlek?
Tänk också på hur textstorleken påverkar din webbdesign. Vill du att det ska vara fokuserat på typografi, eller har du andra utsmyckningar och designelement du vill inkludera som kan påverka sättet typografi sitter i designen?
Kontrast påverkar läsbarheten hos ett textblock enormt. När vi pratar om kontrast finns det två viktiga saker att tänka på.
För det första vill du se till att kontrasten mellan texten och bakgrunden är stark nog för att vara märkbar. Tänk på tillgänglighet här - gå tillbaka till prat om färgtillgänglighet i design, detsamma gäller för din text. Om du är osäker på om din text kommer att ha tillräckligt med kontrast, använd ett verktyg som Lea Verous kontrastförhållande för att hjälpa dig.
Du måste också vara uppmärksam på de typsnitt som du väljer. Många teckensnitt som har mycket tunna vikter kanske inte visas bra i vissa storlekar och kan vara mer användbara för större teckensnitt eller displayrubriker. Försök också se till att de teckensnitt eller teckensnitt du väljer har bra webbläsare och operativsystemstöd. Vissa teckensnitt och teckensnitt kan fungera bra på en plattform, men ser och utför fruktansvärt på en annan.
När du arbetar med typografi, som med någon annan del av din design, vill du se till att du ger det tillräckligt med utrymme att andas och att innehållet ska tala för sig själv.
Innehållet på din webbplats är den centrala erfarenheten som dina användare behöver erbjudas. Bortsett från alla andra designelement, alla dina användare verkligen behöver se är innehållet. På grund av det, var inte rädd för att ge mer utrymme till innehållet och låta ditt innehåll göra mer av pratningen.
Negativt utrymme är det utrymme eller gap som lämnas runt element i en design; var inte rädd för att lämna detta negativa utrymme kring ditt innehåll.
Glöm inte heller utrymmet runt varje del av din text. Tillåt en generös linjehöjd som inte gör din text trång och svårare att läsa. Som en allmän regel (men det är gratis att spela med det här) måste en linjehöjd som är minst 140% till 160% av textstorleken fungera bra och erbjuda en bra balans för din text.
En typografisk hierarki avser hur innehållet läggs ut i din design.
Etablering av bra innehållshierarki börjar i början när du arbetar för att skapa en bra struktur inom ditt innehåll. Typografisk hierarki fungerar sedan med ditt innehåll - från rubriker till normala stycken och delar av ditt innehåll som du vill betona - för att hjälpa till att skapa en struktur som användare enkelt kan navigera.
Påverkan en hierarki har på din design kan vara enorm. Du borde göra användarens resa för att hitta innehållet de är efter så enkelt som möjligt, och att skapa en solid hierarki ger bara positiva effekter.
Du kan skapa en bra, visuell, typografisk hierarki på ett antal sätt, inklusive att använda färg eller olika textstorlekar för att skapa tonvikt och struktur i ditt innehåll. Alla tidigare tips hjälper dig att skapa en bättre typografisk hierarki, men det är någonting som alltid kommer med praktik.
Vi kommer att diskutera webbfonter mer detaljerat senare i denna serie, men följande bör vara en gedigen intro i möjligheterna för webbfonter.
Nuförtiden är vi väldigt lyckliga att vi har många alternativ för att implementera webbfonter på våra webbplatser - och med den vanligaste användningen av webbfonter på webben (med hjälp av bättre övergripande webbläsare) kan vi vara mer uppfinningsrika i typografiska stilar och mönster som vi kan inkludera i våra mönster.
Förutom att kunna vara värd för dina egna teckensnitt med @ font-face, finns det många online-tjänster tillgängliga som hjälper dig att använda fler webbfonter online, inklusive:
och många, många fler. Även webbplatser som FontShop eller MyFonts (som brukade vara begränsade till att bara sälja skrivbordsfonter) kommer nu in i marknaden för webbfonter, och erbjuder dig nedladdningsbara teckensnitt som du kan använda med @ font-face teknik.
Efter att ha täckt grunden för typografi ser vi i den följande artikeln en vertikal rytm. Glöm inte att du också kan dyka in i vår pågående session A-Z för webbtyper för mer information om någon av dessa punkter.
Accentsconagua