De flesta korrigeringar som kommer tillbaka från en designgranskning rör typografi. Inte layout, inte färg, utan text. Tyngden är fel, titeln borde vara i versaler, teckenavståndet stämmer inte.
Fyra saker står för nästan alla dessa: bokstavsformens anatomi, skillnaden mellan ett typsnitt och en font, uppdelningen mellan serif och sans-serif, samt avstånden som förvandlar tecken till ett stycke och ett stycke till en sida. Få ordning på detta så behöver det mesta som kommer tillbaka i en front-end-granskning aldrig ens tas upp.
Kort sagt:
Klyftan handlar om perception, inte ansträngning. Designern förväntar sig en sak, utvecklaren ser en annan, och ingen av dem är besvärlig – designern lägger helt enkelt märke till en kategori av saker som utvecklaren aldrig har tränats att se. Och varje korrigering innebär omarbete: tid att upptäcka det, tid att ändra det, en release som står still medan ni två kommer överens. Grunderna nedan lär man sig en gång och återanvänder i varje efterföljande projekt, vilket gör dem till den mest lönsamma investeringen i överlämningen från design till utveckling. Det är därför jag bestämde mig för att skapa en workshop i typografi.
Innan vi går in på några förklaringar är det bra att förstå hur en enskild bokstav fungerar, vilket förhållande den har till bokstäverna omkring sig och hur det förhållandet sträcker sig vidare till ordet, meningen och stycket.
Typografi är hantverket att arrangera text så att den blir läsbar: att välja typsnitt, ställa in storlek och vikt, samt kontrollera avståndet mellan tecken, rader och textblock. Det omfattar både bokstävernas form och formen på sidan de placeras på. Allt i den här artikeln hör till det ena eller det andra.
Grundläggande begrepp som är bra att kunna, och som gör det mycket lättare att diskutera typografi med andra:
En bokstavsform delar gemensamma egenskaper med sina gelikar inom samma typsnitt. Dessa egenskaper handlar om storlekar och proportioner hos samma grundläggande anatomiska delar, och de återfinns i alla västerländska tecken.
Jag tänkte att det kunde vara intressant att lista dem. Inte för att du ska memorera dem, eftersom namnen inte gör någon större skillnad i vardagen för varken grafiska formgivare eller utvecklare.
Jag listar dem så att du vet vad du ska titta efter när du jämför två typsnitt, och så att du förstår hur olika fonts användningsområden börjar ta form utifrån deras anatomi.
| Element | Vad det är |
|---|---|
| Baslinje | Den osynliga linjen som bokstäverna vilar på |
| x-höjd | Höjden på ett litet x, det vill säga höjden på de gemena bokstävernas huvudkropp |
| Versalhöjd | Höjden på de versala bokstäverna, mätt från baslinjen |
| Överstapel | Den del av en gemen bokstav som sträcker sig ovanför x-höjden, som i b, d, h, k och l |
| Understapel | Den del av en gemen bokstav som sträcker sig under baslinjen, som i g, j, p, q och y |
| Stam | Bokstavens huvudsakliga vertikala eller diagonala stapel |
| Bukt | Det svängda streck som omsluter ett utrymme, som i b, d, o och p |
| Inre tomrum | Det helt eller delvis omslutna utrymmet inuti en bokstav, såsom hålet i ett o eller e |
| Axel | Det svängda streck som utgår från en stapel, som i h, m och n |
| Serif | Det lilla streck som avslutar en huvudstapel |
| Ändpunkt | Änden på ett streck som saknar serif |
| Öppning | Storleken på öppningen mellan ett streck och det inre tomrummet, som i c, e och s |
| Ligatur | Två eller flera tecken som sammanfogats till en enda glyf, som i fi och fl |
Två av dem gör det mesta av arbetet i praktiken. En stor x-höjd gör att ett typsnitt ser större ut vid samma punktstorlek och håller formen bättre när det skalas ner. En vid öppning förhindrar att bokstäver som c, e och s flyter ihop och blir svåra att skilja från varandra.
Typsnitt klassificeras utifrån dessa strukturella egenskaper, genom tolkningsdefinitioner eller helt enkelt utifrån deras historiska placering. Klassificeringen är bara användbar om den hjälper dig att förstå var typsnittet hör hemma, så här presenteras den som ett beslutsunderlag snarare än en ordlista:
| Klassificering | Vad som kännetecknar den | Välj den när | Undvik den när |
|---|---|---|---|
| Serif | Har serifer. Delas vanligtvis in efter epok i gammalstil (gammalantikva), övergångsform (övergångsantikva), modern (nyantikva) och slab serif (mekan), vilka främst skiljer sig åt i streckkontrast och hur seriferna är utformade | Du vill ha sammanhängande läsning och en trygg, auktoritativ ton: längre artiklar, redaktionell text, introduktioner till dokumentation. Gammalstil och övergångsform är de säkra valen | Storleken går under cirka 14px, eller när typsnittet är en högkontrastrik nyantikva som Didot. De tunna strecken försvinner på skärmar med låg upplösning och texten börjar flimra |
| Sans-serif | Saknar serifer. Delas vanligtvis in i grotesk, neogrotesk, geometrisk och humanistisk | Nästan allt som hör till gränssnitt: navigering, knappar, etiketter, formulär, instrumentpaneler, små storlekar och all text som måste tåla att storleksändras av läsaren | Du behöver värme eller redaktionell personlighet och har valt en neutral neogrotesk. Den kommer att uppfattas som korrekt men inte säga någonting. Humanistiska sans-serif-typsnitt är vägen ut |
| Script | Baserad på handskrift eller kalligrafi, med bokstäver som ofta binder samman | Ett enstaka dekorativt inslag: en logotyp, ett citat, en signatur. En rad, stor storlek, och aldrig mer | Allt som en användare måste läsa för att slutföra en uppgift, och allt som skrivs med versaler – sammanhängande bokstavsformer faller sönder när du gör dem versala |
| Display | Designad för stora storlekar och korta textavsnitt, där karaktär är viktigare än långvarig läsbarhet | Stora rubriker och kampanjsidor, där uppgiften är känsla och ton snarare än läshastighet | Den måste fungera i brödtextstorlek eller mindre. Display-typsnitt är ritade för ett visst storleksintervall och slutar fungera utanför det |
| Blackletter | Den täta, vinklade stilen från tidigt europeiskt boktryck (gotisk skrift/fraktur) | Du har en specifik historisk eller genrebaserad anledning, och texten är kort | Praktiskt taget överallt annars. Läsbarheten är låg för moderna läsare och de kulturella associationerna är tyngre än vad de flesta varumärken vill ha |
| Monospaced | Varje tecken tar upp exakt samma horisontella bredd (fast bredd) | Kod, terminalutskrifter, ID:n, diffar och allt där kolumnjustering har en betydelse. Även siffertabeller, där tabellsiffror förhindrar att kolumnerna hoppar | Den ersätter brödtext som ett stilval. Den jämna bredden som gör kod lättläst gör att prosa tar längre tid att läsa |
De två som är viktigast när du väl skriver kod är de välkända serif och sans-serif. De är viktiga eftersom deras utmärkande drag är objektiva och tydligt synliga, så fort du vet vad du ska titta efter.
Serif-typsnitt sägs å andra sidan vara det bästa valet för längre texter, som i böcker och tidningar. Stämmer det? Inte nödvändigtvis. Mycket av det som gör att en typsnittsfamilj anses lättläst kan motverka sitt syfte, beroende på det enskilda typsnittets egenskaper. Jag är ganska säker på att ett Didot, trots att det är ett serif-typsnitt, är mer svårläst än ett Lato i en längre text.
Didot har en hög kontrast mellan sina horisontella och vertikala linjer, och den kontrasten skapar brus och "gupp" i läsrytmen. Lato håller en jämnare proportion mellan bokstävernas olika linjer, vilket gör det till det bättre alternativet av de två. Det är ingen perfekt jämförelse, men principen håller. Bedöm det enskilda typsnittet, inte familjen det tillhör.
Det som är värt att förstå om dessa två stilar, om du vill veta vilken som passar var, är vad serifferna faktiskt har för syfte. Och det är lättare att greppa när du vet var de kommer ifrån, vilket är vad nästa avsnitt handlar om.
Innan allt detta. Innan vi människor ens övervägde att pressa små metallbitar mot papper för att framställa böcker snabbare. Innan vi ens hade tänkt på idén om en bok, papper eller text överhuvudtaget, skapade vi redan bilder för att kommunicera med varandra.
Tusentals år av evolution gjorde mer komplex visuell kommunikation till en nödvändighet, vilket ledde till alfabeten. Men alfabeten uppstod inte ur tomma intet. De var resultatet av egna mutationer och anpassningar, och som det ofta sägs är historien om bokstaven "A" det tydligaste exemplet på hur de flesta bokstäver har hamnat där de är idag.
Civilisationer kom och gick. Betydelser och ljud fastställdes, vissa muterade, andra inte, och oxhuvudet förenklades stadigt, roterades och geometriskt fulländades av romarna så att det kunde huggas in i monument, skrivas och utsmyckas av munkar, handförvrängas för snabbare och mer lättflytande skrift, och slutligen plockas upp av typografer.
Sammanfattningsvis: seriffen föddes ur behovet av att skriva snabbt och att koppla ihop bokstäver med varandra. Senare, när läsning slutade vara förbehållet skrivare och monarkin, blev bättre läsbarhet också ett krav, och seriffen fick tjäna det syftet istället. Det är den delen som är värd att ta med sig. Seriffen var ett verktyg för läsbarhet långt innan den blev en stil, så valet mellan serif och sans-serif handlar om hur texten ska läsas, inte om hur den ska se ut.
Sedan kom typografin.
I takt med att människor blev mer medvetna om ett typsnitts läsbarhet började dess användning och placering på sidan få samma uppmärksamhet och omsorg.
Något så grundläggande som radavstånd, vilket styrs direkt av typsnittet och dess storlek, påverkar hela sidan. Rutnätssystem skapades för att konsolidera detta till regler, så att alla formgivare kunde skapa läsbar text och balanserade sidor utan att behöva börja från noll.
Radavstånd är för övrigt line-height i CSS: det vertikala avståndet mellan en textrad och nästa. Det kan göra eller förstöra vilket textområde som helst, för om du ställer in det för tätt eller för glest börjar läsaren hoppa över rader eller läsa samma rad två gånger. Alla har varit där. Det var aldrig ditt fel.
Det finns ett optimalt intervall, vanligtvis någonstans mellan 120 % och 145 % av textstorleken – den siffra Matthew Butterick anger i Practical Typography, där han också rekommenderar att det uttrycks i CSS som ett enhetslöst värde, så att 130 % blir 1.3. Om du behöver räkna ut det på ögonmått istället, här är knepet:
Dra en tänkt linje rakt över mitten av textraderna, utan att stöta i några under- eller överlängder. Om den går igenom rent är det bra.
Tänk även på radernas längd. Rutnätsmodulerna storleksanpassas utifrån radavståndet och de blir oftast ganska små i förhållande till typsnittets storlek. Det är ingen slump. Små moduler ger formgivaren utrymme att röra sig när en sida organiseras, vilket möjliggör större eller mindre textområden samtidigt som ett bra, proportionerligt avstånd mellan elementen bibehålls.
I praktiken är dessutom kortare rader lättare att läsa.
Det finns ett bra mått för radlängd, och källorna är snarare samstämmiga än eniga. Baymard Institute anger att det optimala är 50 till 60 tecken per rad inklusive mellanslag, i linje med Emil Ruder, och noterar att andra källor accepterar upp till 75. Buttericks sida om radlängd förespråkar ett bredare spann, 45 till 90. Om man ser till överlappningen är 50 till 75 det intervall man bör sikta på, medan allt över 80 blir problematiskt – det är också där WCAG drar sin gräns. Det finns några goda skäl till detta.
Rader som är för korta tvingar läsaren att ständigt bryta flödet och återvända till vänstermarginalen var tredje eller fjärde ord. Viktiga ord i slutet av en rad riskerar att hoppas över i allt detta fram-och-tillbaka-läsande, vilket är precis så tröttsamt som det låter.
Rader som är för långa är svåra att fokusera på eftersom man inte ser var raden slutar och man hela tiden är beredd på att hoppa till nästa. Dessutom är risken större att läsaren hamnar på helt fel rad när hen väl hoppar, eftersom vänstermarginalen nu är så långt borta att det är svårt att se var den förra raden började.
I praktiken är uppmärksamheten högst i början av en rad och avtar mot slutet, så det är en hårfin balansgång. Därav tumregeln om 50 till 75 tecken.
Radavstånd och radlängd definierar ett textblock. Hierarki definierar hur blocken förhåller sig till varandra, och det är den del som oftast når utvecklaren som en vag instruktion.
En typskala är en fast uppsättning storlekar som en sida får använda, där varje steg är noga genomtänkt. Välj brödtextstorlek först, eftersom det är där läsaren tillbringar sin tid, och härled sedan rubrikerna från den istället för att välja dem på känn. Få steg, tydligt åtskilda. Det är det som gör att en rubrik uppfattas som en rubrik.
Storlek är inte det enda verktyget, och det är sällan det bästa på egen hand. Vikt, skiftläge, färg och utrymmet ovanför och under en rubrik hjälper alla till att skilja nivåer åt, och utrymme är oftast det billigaste av de fyra. Om din hierarki bara fungerar för att en nivå är mycket större än nästa, kommer den att kollapsa på en smal skärm där alla nivåer måste krympa samtidigt.
Läsbarhet och tillgänglighet är samma ämne betraktat från två olika håll. Varje val ovan har konsekvenser för tillgängligheten: för liten brödtext, för tätt radavstånd, för långa rader. Alla dessa val drabbar vissa läsare betydligt hårdare än andra.
Tre vanor löser det mesta. Se till att ha tillräcklig kontrast mellan text och bakgrund, och låt aldrig en varumärkesfärg styra det beslutet på egen hand – WCAG 2.2 sätter gränsen vid 4,5:1 för brödtext och 3:1 för stor text. Låt inte vikt eller färg vara den enda signalen för att något är annorlunda, eftersom det inte når alla läsare. Och låt texten anpassa sig efter läsarens egna inställningar istället för att låsa fast den; webbläsare och operativsystem låter användare välja en större storlek av en anledning, och WCAG:s krav på skalbarhet innebär att din layout ska fungera vid en förstoring på upp till 200 %.
Det täcker det mesta som är viktigt när det gäller läsbarhet. Om du vill ha en bra grund i typografiskt uttryck i ett bredare perspektiv är Gary Hustwits dokumentär från 2007 Helvetica ett måste.
Den går igenom tankegångarna bakom den nya design som växte fram under femtiotalet, och hur det arbetet skapade en medvetenhet rotad i socialt ansvar – ett arv från andra världskriget. Du får även se en del genuint intressant design från perioden, samt en introduktion till var det berömda typsnittet Helvetica kommer ifrån och vad det var avsett för.
Du kommer också att få se den skarpa kontrasten mellan reklam före och efter den internationella stilen – den schweiziska 1900-talsmetoden som byggde på rutnät, sans-serif-typsnitt och avsaknad av dekorationer – och vad det skiftet innebar i praktiken för hur visuell kommunikation utfördes då, och hur den utförs idag.
Det finns annat som är värt att känna till, och det tänker jag gå igenom härnäst. Kom ihåg att det finns undantag för allt detta, beroende på vilken roll typografin spelar i det du råkar bygga.
Ta ord som hamnar ensamma i slutet av ett stycke eller högst upp i en spalt. De har till och med egna namn. En hora är en ensam sista rad i ett stycke som hamnat högst upp i en spalt; en horkarl är en ensam första rad som lämnats kvar längst ner i en spalt. I båda fallen uppstår ett hål som bryter sidans textur och drar blicken till fel ställe. För att vara rättvis är de inte lätta att undvika i responsiv design, så räkna med att fixa dem vid de slutgiltiga brytpunkterna snarare än att försöka designa bort dem. Samma sak gäller för "ojämn högermarginal", den ojämna kanten som uppstår vid vänsterställd text; den vill du ska vara ojämn, men aldrig klumpig.
En annan tydlig regel att följa eller undvika, och som är mycket lättare att kontrollera, är teckenavstånd: utrymmet mellan tecknen. Gör du det för trångt eller för glest försämras läsbarheten i längre texter avsevärt.
Kortare text och rubriker är en annan femma, och de tål en del stilisering beroende på vilken känsla du vill åt.
Vad du än gör, förvräng dock aldrig texten för hand. Behöver du något som är bredare horisontellt? Leta efter "extended"-typsnitt. Behöver du något högre och mer effektfullt? Välj ett "condensed"-typsnitt, det finns gott om sådana att välja mellan.
När du förvränger ett typsnitt manuellt hamnar alla proportioner inuti tecknet snett. Linjebredder och staplar slutar matcha resten av familjen, och tecknet ser trasigt ut när det står bredvid sina grannar.
Samma sak gäller för att vinkla ett typsnitt för att skapa en falsk "kursiv". Det ser visserligen inte alltid dåligt ut, men det finns gott om bättre alternativ.
Väldesignade kursiva typsnitt är inte bara ett befintligt typsnitt som lutats. De har sina egna proportioner, vilket är det som gör dem läsbara och gör att de kan stå bredvid den vanliga versionen utan att de krockar med varandra.
Det finns mycket mer att säga och mycket mer att lära sig. Samtidigt är detta i stort sett det nödvändiga minimumet för att veta vad du ska leta efter när du gör om typografi till kod.
Nästa gång du jobbar med front-end kommer rutinen mer eller mindre att sitta där. "Text-transform?" Check. "Character-spacing?" Check. "Line-height?" Check. "Är det här en serif eller en sans-serif?" Den frågan kan du svara på nu. "Borde det här typsnittet ens finnas i en meny?" Den frågan tar längre tid, men den är värd att ställa ändå.
Att köra den rutinen på egen hand är en bra vana. Kom överens om den i teamet, som en gemensam typskala och en kort checklista som båda parter använder vid överlämning, så slutar det vara en vana och blir infrastruktur. Samma korrigeringar slutar dyka upp i varje projekt, och diskussionen flyttas från hur texten ska se ut till vad produkten ska göra. Tillgänglighet fungerar på samma sätt. Behandla det som en preferens och det är det första som väljs bort; behandla det som ett krav och det blir en förutsättning som typskalan byggs för att uppfylla från början, vilket är betydligt billigare än att efterhandskonstruera det senare.
Vad är typografi?Typografi är konsten att arrangera text så att den blir läsbar: att välja typsnitt, ställa in storlek och vikt, samt kontrollera avståndet mellan tecken, rader och textblock. Det omfattar både bokstävernas form och formen på sidan de placeras på.
Vad är skillnaden mellan ett typsnitt och en font?Ett typsnitt (typeface) är en samling typografiska symboler och tecken. En font är en komplett teckenuppsättning inom ett typsnitt, ofta i en specifik storlek och stil. Typsnittsfamiljer är grupper av typsnitt med besläktad design.
Vad är den ideala radavståndet?Vanligtvis mellan 120 % och 145 % av textstorleken, enligt Buttericks Practical Typography, och uttrycks bäst i CSS som ett enhetslöst värde. För att bedöma det med ögat, dra en tänkt linje genom mitten av textraderna utan att stöta i några under- eller överlängder. Om linjen går fritt är det bra.
Hur många tecken bör en textrad ha?Mellan 50 och 75 inklusive mellanslag. Baymard anger det optimala till 50 till 60 och accepterar upp till 75; Butterick tillåter 45 till 90. Över 80 tecken hamnar du utanför vad WCAG anser vara läsbart. Kortare rader bryter läsarens flöde för ofta, och längre rader gör det svårt att se var en rad slutar och nästa börjar.
Är serif eller sans-serif bättre för längre text?Serif sägs ofta vara det bättre valet, men det beror mer på det enskilda typsnittet än på familjen. Didot är en serif med hög kontrast mellan horisontella och vertikala linjer, vilket skapar brus i läsflödet, så den läses sämre i längre text än Lato, en sans-serif med jämnare proportioner.
När bör man använda ett typsnitt med fast bredd eller ett rubriktypsnitt?Typsnitt med fast bredd (monospace) är till för kod, terminalutdata, diffar och numeriska tabeller, där lika teckenbredd håller kolumnerna i linje; det saktar ner läsningen av löptext. Rubriktypsnitt (display) är till för stora rubriker och korta textsträngar, där tonen är viktigare än läshastigheten, och de fungerar inte i brödtextstorlek eller mindre.
Vad är en typografisk skala, och varför behöver hierarkin en sådan?En typografisk skala är den fasta uppsättning storlekar som en sida får använda, där varje steg är ett medvetet val från det föregående. Ställ in brödtextstorleken först och härled sedan rubrikerna från den. Få, distinkta steg är det som gör att en rubrik uppfattas som en rubrik, och vikt, skiftläge, färg och omgivande utrymme gör resten.
Varför ska man inte fuska med kursiv stil eller töja ut ett typsnitt?Eftersom man förstör proportionerna i tecknen när man förvränger ett typsnitt manuellt, och linjetjocklekar och stammar slutar matcha resten av familjen. Om du behöver något bredare, leta efter "extended"-typsnitt; för smalare, "condensed". Väldesignad kursiv stil har egna proportioner snarare än att bara vara en vinklad version av den normala vikten.
För relaterade designbeslut, se Minimalism eller brutalism: vad ska man välja? och Designa appar för barn: användarupplevelsen i en läsapp.
På Imaginary Cloud har vi ett team av experter inom UI- och UX-design. Om du tror att du skulle behöva lite hjälp med design, hör av dig till oss.
Jag är UI & produktdesigner, illustrationskonstnär och målare. Känd för min kärlek till skräpiga strandhanddukar, musikproduktion, typografi och alla typer av pizza.
People who read this post, also found these interesting:
