Följande artikel hjälper dig: Grunderna i typografi
Vad är typografi?
Ur en beskrivande och förenklad synvinkel, typografi är arrangemanget av typen. Men det är så mycket mer än så. Det kan betyda olika saker beroende på vem du frågar.
För mig är hur typografi används i en design djupt rotat i dess övergripande tema, ton och budskap.
Det fungerar med din layout, rutnät och färgval för att skapa en väl avrundad design.
Ditt val av typsnitt och din sättningsteknik ger din komposition dess karaktär, takt och stil. Det ger inte bara kopian läsbarhet, det hjälper också läsaren att få en större insikt i motivet för designen.
För en designer är typografi lika viktig som att rapportera till en SEO. En enkel illustration av hur inflytelserik typografi kan vara är att titta på samma text med olika typsnitt.
Lägg märke till hur typografi kan definiera och ändra meddelandet:
Det är denna nivå av integration med ett designtema som gör typografi till ett av de mest kraftfulla verktygen i designerns verktygslåda. Låt oss sedan gå igenom några grundläggande typografitermer och begrepp.
Rader
En rad med tecken har minst fem rader som den kan justeras efter. Dessa horisontella linjer är guider för versaler, uppstigande bokstäver, gemener och nedstigande bokstäver (vi kommer att diskutera dessa termer inom kort).
Här är de fem raderna:
- Baslinje: Den du kanske är mest bekant med är baslinjen. Detta är raden som texten sitter på.
- Caps höjd (eller cap line): Detta markerar toppen av versaler.
- Stighöjd (eller överlinje): Den här raden visar var toppen av bokstäver som och touch. Konstigt nog är denna linje i många fall något högre än kapitallinjen. Det tog ett tag för mig att få in detta i mitt huvud eftersom man intuitivt skulle kunna tro att versaler skulle vara de högsta tecknen.
- X-höjd (eller mittlinje): Detta visar höjden på gemener (exklusive upp- och nedstigande bokstäver). Det mäts vanligtvis med höjden på bokstaven.
- Nedstigningshöjd (eller skägglinje): Descenders är de delar av tecken som går under baslinjen (som bokstäverna och ). Den här linjen visar var decenders botten är.
Ledande
Ledande beskriver mängden mellanrum mellan textrader. Du kan mäta ledning genom att erhålla avståndet mellan två baslinjer. Att leda kallas line-height i CSS.
Att leda är kraftfullt.
Det kan påverka hur läsbara långa textblock är. När du minskar inledande kommer linjerna närmare varandra, vilket gör att ett textblock ser mer kompakt ut.
Att sänka mängden led kan göra att nedstigare och uppstigare kolliderar, vilket kan ha en negativ effekt på läsbarheten. Men som en visuell stil kan låga mängder ledarskap öka läsarens takt och framkalla känslan av trånga förhållanden och klaustrofobi, vilket kan önskas när du använder typ på detta uttrycksfulla sätt.
Att öka ledande kan minska tempot i ett textstycke; det kan bromsa läsaren genom att införa mer vitt utrymme.
Det kan visa en mer avslappnad känsla i textblock.
För mycket ledarskap kan orsaka kontinuitetsproblem, eftersom läsarens ögon måste resa ett större avstånd mellan textraderna. Titta på exemplen nedan. Alla är inställda i samma typsnitt, vikt och mått.
Men var och en har olika ledande värderingar.
- Exempel 1 är inställt på ett negativt värde (ett värde som är mindre än typstorleken). Du kan se ascenders kollidera med nedstigare och dess effekter på läsbarhet och estetik.
- Exempel 2 är inställt på ett ofta rekommenderat värde, vilket är 120 % av typstorleken. Det betyder att om din teckensnittsstorlek är 10 pt, så bör inledande ställas in på 12 pkt.
- Exempel 3 är inställd på 200 % av typstorleken. Du kommer att märka störningarna i takten och flödet av att läsa texten.
Här är några ledande riktlinjer:
- Att leda kan påverka textblock på olika sätt. Ett kort textblock (som en tagline/slogan) kontra ett långt textblock (som ett stycke eller en nyhetskolumn) kommer att påverkas av ledande på sitt eget sätt. Bara för att det fungerar bra på den ena betyder det inte att det kommer att fungera lika bra på det andra.
- Ju fler ord du har på rad, desto mer ledande kommer du att behöva för att upprätthålla en angenäm läsupplevelse.
- Om du ökar ordmellanrum (mellanrummet mellan varje ord), måste du öka ledningarna för att förbättra textblockets läsbarhet.
Spårning
Spårning (eller teckenavstånd) är utrymmet mellan grupper av tecken. Detta kallas egenskapen bokstavsmellanrum i CSS.
Spårning kan beskrivas som att vara eller . Lös spårning är när bokstäverna har ett större avstånd mellan dem.
Tight tracking är när bokstäverna är närmare.
Spårning har liknande riktlinjer som ledande, och alla dessa bästa metoder är knutna till läsbarhet. Ju längre linje du har (eller som det ofta kallas) desto mer lös måste din spårning vara.
Denna regel är inte huggen i sten. Variabler som typsnittsval, bakgrundsfärg, antal kolumner och de omgivande designelementen kan också påverka läsbarheten av ett textblock.
Varje gång du ställer in typ bör du titta på den övergripande bilden.
Kerning
Kerning beskriver mängden mellanrum mellan två tecken.
Det finns ofta förvirring mellan spårning och kerning.
Medan spårning är en global inställning som påverkar hur nära alla tecken är, är kerning mer en mikroskopisk bild av utrymmet mellan två bokstäver. Vissa teckenkombinationer kan kräva mer kerning än andra för att undvika kollisioner (t.ex. jämför kontra ).
Vissa karaktärer sitter tillsammans på ett sätt som skapar och minimerar utrymme.
Till exempel är gemener i Helvetica en rektangel; om du sätter ihop 5 av dem, (dvs. ) blir avståndet mellan var och en av dem lika.
Tänk nu på en karaktär som huvudstaden. Området det tar upp är mindre enkelt att definiera eftersom diagonalen på den sista raden skapar utrymme under den. Med detta i åtanke, när du väl placerar resten av meningen bredvid den, gör detta utrymme en märkbar skillnad jämfört med resten av tecknen:
Kerning är konsten att justera avståndet mellan tecken så att ögat lätt kan flöda över kopian utan att distraheras av avvikelser.
Kom ihåg: bra typografi märks aldrig.
Inriktning
Hur du anpassar din text har en enorm inverkan på hur människor kommer att läsa och uppfatta den. Beslutet om anpassning bör fattas med ditt designtema i åtanke, och naturligtvis läsbarhet och läsbarhet.
Spola vänster (eller ojämn höger)
Texten är vänsterjusterad. Denna anpassning kompletterar det naturliga sättet att läsa text i västerländsk kultur.
När det görs på rätt sätt är det en av de största faktorerna för förbättrad läsbarhet. Var noga med att vara uppmärksam på den högra sidan (eller trasa). Det är viktigt att se till att det finns en bra balans med linlängden; se till att de inte är för lika, men inte heller för långt ifrån varandra.
Spola höger (eller trasigt vänster)
Texten är högerjusterad.
Om vi läser från vänster till höger kan flush right hämma textens naturliga flöde. Använd den som en kontrast till huvudtexten för att markera kompletterande kopia. Se upp för skiljetecken på höger sida eftersom de kan störa inriktningen.
Berättigat
Början och slutet av textrader är båda justerade till vänster och höger.
Även om justerad justering ser ren ut eftersom den passar snyggt in i en ruta, kan den också vara svår att läsa eftersom det finns mindre visuell signal mellan avslutningen av en textrad.
Varianser i mellanrum kan förekomma mellan ord för att hålla raderna jämna. Var uppmärksam på överavstavning, eftersom vissa program avstavar ord i slutet av textrader för att hålla texten rättfärdig. Dessutom kan vissa rader ha för mycket ordmellanrum, så du kan behöva justera radbrytningar efter behov.
Centrerad
Text justeras mot mitten av textområdet, snarare än kanterna.
Var försiktig när du använder centrerad justering – det finns inget värre än dåligt inställd centrerad text. Det finns ingen delad punkt där raden börjar och slutar, så det kan vara väldigt svårt att läsa.
Centrerad text ser bäst ut när det bara finns några rader text (2-3 rader). Utfört väl, centrerad justering kan se elegant och elegant ut.
Se till att ditt textområde är tillräckligt brett för att dela upp texten i logiska linjer och att det finns tillräckligt med kontrast mellan radlängden för att göra texten inbjudande.
Arbeta med typografi i Photoshop och Illustrator
Grafikprogram som Photoshop och Illustrator har kraftfulla sättningsfunktioner. Begreppen som diskuteras ovan är alla tillgängliga för dig i Photoshop och Illustrator. De två panelerna som behandlar typografi är Teckenpanelen (Fönster > Tecken) och Styckepanelen (Fönster > Stycke).
Några typografitips
Här är några tips och idéer för att arbeta med typ.
Informationshierarki
När du planerar din design är det viktigt att ta reda på hur du ska identifiera hierarki och struktur.
Hur stor eller hur fet ska rubriken/rubriken vara?
Vad sägs om underrubriker, brödtext eller bildtexter? Tänk också på att användning av olika typsnitt kan hjälpa dig att skapa skillnader mellan olika textnivåer. Många framgångsrika publikationer kombinerar olika typsnitt för att skapa både klassiska och samtida layouter.
Genom att skapa en logisk hierarki i dina designs blir de lättare att skanna och läsa.
Välj typsnitt som stöder temat
Att tänka på temat för din design när du väljer typsnitt hjälper dig att fatta beslut.
Efter det ofta långa – men mycket roliga – jobbet med att lista typsnitt, motivera dina val genom att bedöma dem mot ditt tema.
Bli bekant
Ju mer du gör något, desto bättre blir du på det. Eftersom detta är fallet bör du försöka experimentera med typografi så mycket som möjligt. Fördjupa dig i ämnet.
(Jag har inkluderat en kort lista över böcker och webbplatser att kolla in i slutet av den här guiden.) Titta på portföljerna med designers du beundrar och studera hur de använder typografi för att skapa fantastiska arbeten.
Lägg märke till typsnitt som tilltalar dig och hur du kan använda dem i ditt eget arbete.
Bli bekant med typografins konst och vetenskap; det finns inget som ingjuter förtroende för dina beslut som kunskap. Att kunna prata igenom dina beslut säkert och tydligt med fullt stöd av ditt hantverk bakom dig är mycket viktigt.
Använd ditt eget omdöme
Medan vissa av reglerna jag har diskuterat tidigare verkar stela, bör du i slutändan använda ditt bättre omdöme. Inställningstyp är en konstform lika mycket som en vetenskap.
Medan vi har pratat om några av reglerna om typografi, är det viktigt att inse att varje jobb är olika.
Ett dubbelt uppslag, en webbsida, ett visitkort, ett brevpapper – var och en har sina egna mål och överväganden.
Även om reglerna vi har täckt kan vara en bra utgångspunkt, kan externa influenser som den omgivande designen, företagets identitetsriktlinjer och kundens godkännande ändra hur du behöver ställa in typen. Framför allt är det som verkligen betyder något att designen fungerar.
Typografi finns överallt
Typ är en komponent i design som alltid är närvarande i världen omkring oss. Vägskyltar, tidningsomslag, affischer, tv-annonser, filmintrosekvenser — du behöver inte leta långt för att hitta typografi.
Det finns också överallt på webben.
Oavsett om du är på en båthandlares hemsida eller en restaurangs, kommer de att ha en viss typografi. När du tittar på typ, tänk på vad du tittar på och varför det är som det är. Snart kommer du att märka de mindre nyanserna av inställningstyp som ofta gör stor skillnad mellan bra och dålig typografi.
Resurser om typografi
Massor av böcker och webbplatser täcker ämnet typografi.
De är fantastiska referenser att ha med sig medan man jobbar med typ. Här är en handfull av mina favoriter.
Böcker
Webbplatser
- FontShop Education: FontShop Education-dokument är formaterade för enkel nedladdning och utskrift. Perfekt för klassrummet eller studion.
- Typofil: Bra ställe att identifiera ett typsnitt. Titta igenom forumen; det finns många generösa människor där som delar med sig av sin egen kunskap om ämnet. Jag gillar att titta igenom den här sidan medan jag äter en smörgås på jobbet.
- Typographica: Typographica är en recension av typsnitt och typböcker, med enstaka kommentarer om typsnitt och typografisk design.
