Samuel Brynolf

Typa bättre & snabbare: Hur man kombinerar typografisk skala med rytm

letters

När typografi och bildmanér sitter, behövs det mycket illvilja för att förstöra en webbsida formmässigt. Det här är mina tips på att få upp en stabil typografisk grundplåt som går att återanvända.

Man kan förstöra vilket typsnitt som helst genom att sätta det fel. Och mediokra typsnitt kan motsatt lyftas till nya höjder med bra planering.

När jag ska formge app, tjänst eller hemsida är det typon jag tittar på först. Det svåraste är såklart valet av primära och (eventuella) sekundära typsnitt. Men att sedan sätta typografin brukar gå ganska snabbt tack vare en typografisk rytm och skala som jag återanvänder i utgångsläget.

Använd en typografisk skala

Tänk på ordbehandlaren Word och vilka text-storlekar som är tillgängliga att använda som default. Just dessa storlekar är faktiskt ett preset som typografer har använt sig av i runt 400 år. Det finns massvis med logik och teori om varför just dessa storlekar harmonierar så fint (som just nu får vara en länklista i det här inläggets footer). Att hålla sig till en skala är inte svårt: Välj inga storlekar som inte representeras i skalan.

modularscale_comicsans

At this point it is probably worth noting where I got the (above) scale from. It is the scale as dictated fromThe Elements of Typographic Style. Different applications use a variant of this scale, but because I got this book my bible, I’m going with what Mr Bringhust gave us. And thy will shall be done.

Alexander Charchar

Spika typografisk rytm (linjehöjd + whitespace)

Hur långt är det från browsertoppen till hemsidans logo? Hur långt är det mellan paragrafer? Hur hög är linjehöjden i rubriker? Brödtexten? Vad händer när footern tar slut och copyrightinfo ska in? Hur långt är det mellan bilderna i ett galleri?

Vikten av whitespace i sig går inte att underskatta. Om applikationen vore ett musikstycke, är whitespace tystnaden hos varje instrument som tillsammans gör att vi kan uppfatta melodi och rytm överhuvudtaget. Utan whitespace (eller pauser i musik) är resultatet brus.

Alla avstånd vertikalt planeras utifrån vald typografisk skala. När det är gjort harmonierar helheten snyggt, är läsbar och sparar tid eftersom man tänkt till en gång och håller sig till det. Såhär gör jag.

Bestäm linjehöjder

Mitt knep är att per typografiskt element sätta linjehöjd genom att

  • Primärt välja en linjehöjd som finns i skalan
  • Sekundärt se till att det är ett tal som är delbart med tre

Mina måttkombinationer (Lineheight / Font-size—i pixlar) i utgångsläget är:

  • <h1> 72/60
  • <h2> 60/48
  • <h3> 48/36
  • <h4> 30/24
  • <p> 24/16
  • <small> 18/12

Beroende på typsnitt behöver detta ibland justeras: Om linjehöjden för <h3> känns för luftig skulle jag prova 45/36. Fortfarande för luftigt? Pröva 42/36 enligt logiken om delbarhet med 3.

Alltså: 48/36 är utgångsläget för <h3> eftersom talen båda ligger på skalan. Om jag minskar linjehöjden tar jag första talet som kan delas jämt på 3 under 48—dvs 45. Och så fortsätter jag nedåt tills det känns bra. Och såklart uppåt, om det är det som behövs.

Att det just är 48/36 som är utgångsläget är bara vad jag gillar. 72/24 kanske passar din form bättre, det viktiga är att båda talen först utgår från tal som finns i skalan och sedan anpassat enligt delbarhet med 3.

Bestäm default whitespace och använd den som bas

Eftersom kvantiteten text i regel består av brödtext, är linjehöjden för <p> (i mitt fall 24px enligt ovan) ett bra värde för default whitespace. Ett enkelt gap mellan <element> är alltid 24px. Behövs mer utgår jag från 24px och multiplicerar med 1.5, 2, 2.5, 3 osv.

  • Default = 24px
  • Mellan default och dubbelt (24×1.5) = 36px
  • Dubblat (24×2) = 48px
  • Mellan dubblat och tripplat (242.5) = 60px
  • Tripplat (24×3) = 72px
  • Halverat (24/2) = 12px

En tjusig sak: som du ser är alla dessa tal redan med på den typografiska skalan. Det här är de fasta värden för whitespace som är tillgängliga att arbeta med utifrån 24px som basstorlek. (Självklart är det bättre ju färre du behöver använda, precis som du ju försöker hålla ned antalet rubriker). Vill man använda vertikala stödlinjer får du nu in hela sajten på en 6px-grid. (6px är ju också delbart på 3. Men en 3-pixlars grid känns lite väl tajt…). Men gissa vad? Du behöver inte en sådan grid. Använder du din rytm och skala, så sitter allt.

Nu fungerar typografin också väldigt bra på innehåll som ligger layoutat parallellt. Det är sällan man kan bestämma hur innehåll ska linjera horisontellt i flera kolumner, särskilt i responsiv design. Men rytmen och skalan fångar upp innehållet och får det att löpa enligt samma harmoni. Form och funktion är tjusigt när de lirar ihop:

For example, body copy can be defined as 14/18 (14pt size and 18pt leading). Small copy can be defined as 9/12. The magic of the grid operates and all these elements suddenly align; same if we choose to create a text block with type set slightly bigger (for example 21/27). Copy aligns itself every six, every four or every nine lines.

—Pierre Marly, ‘Designing faster with a baseline grid’

Prototypa typon i browsern

Webb-typografi är överlägset att bestämma med Html + Css. Här är några anledningar:

  • Du kan inte slira runt med pixlar när du bestämmer storlek och avstånd med Css.
  • Det är lättare att få översikt över de mått som används för typografin i text—din Css är ju din spec.
  • Photoshop ger en falsk bild av den slutliga renderingen av typon. Det kan vara så radikala skillnader att du skulle valt ett annat typsnitt om du sett det på webben först.
  • Det går snabbare att skapa en helhet eftersom du kan återanvända en boilerplate att utgå ifrån
  • Det går snabbare att massändra via Css än att handflytta en miljard artikelelement i en bildfil.

Om designfasen kräver Photoshop skärmdumpar jag och använder i mina mockups. När feedbacken kommer på typon slipper jag massflytta en miljard element (som behövts namnges och sorterats i foldrar innan) för att en rubrik ska vara större och sedan flytta allt nedåt bla bla bla. You know the drill.

Använd relativa enheter

Relativa enheter (i Css) betyder att de utgår från ett basvärde och att de därmed blir relativa mot varandra. Använd dessa för typografi och whitespace när du skapar din typografiska boilerplate. Rem och / eller em gör jobbet bäst. Här är ett basexempel (med rem):

  • Sätt font-storleken på <html> till 16px.
  • Bestäm att <p> = 1rem och <h2> = 2rem.
  • I pixlar renderas då <p> till 16px och <h2> till 32px.

Om du definierar om font-storleken på <html> till 18px renderas <p> till 18px och <h2> till 36px.

Det du får är att vikten mellan <p> och <h2> behålls oavsett hur många pixlar höga de renderas. När hela typografiska systemet är satt på detta sätt går det mer eller mindre att zooma in och ut genom att ändra font-storleken på ett ställe: via <html>. Jämför begreppet ’ratio’ för bilder—det är en typografisk sådan du skapar.

Använd det när du…

  • …i någon specifik mediaquery behöver dra upp / ned graden på basfonten = alla proportioner hänger med i hela systemet.
  • …har en typografisk boilerplate där skala/rytm har rätt proportioner, men utgår från fel basvärden (Tex 16px känns för stort)
  • …behöver labba med olika storlekar för basfonten utan att krångla med proportioner. Skärmdumpa ut alla varianter du behöver som diskussionsunderlag på nolltid.

Här är en boilerplate som använder konceptet med skala och rytm (satta i rem): typografisk_boilerplate.zip [16k]

Finjusteringar: Gå över alltihop med ettans sandpapper

När du valt typsnitt, skala / rytm och har alltsammans representerat i Html + Css är det dags att finputsa detaljerna:

  • Justering av linjehöjd där olika typsnitt behöver andas olika mycket.
  • Är sajten responsiv behöver man kunna justera linjehöjd också i förhållande till kolumnbredd, per mediaquery.
  • Justering av textradernas bredd: Det här är det första som jag provar när ett typsnitt som by-the-book ska vara bra, men inte känns bra. Hur breda textraderna är påverkar verkligen upplevelsen av typsnittet. I ett projekt är textstorleken redan är bestämd kan kanske bredden på raderna påverkas. Eller bakvänt—gridd är satt men textstorleken är flexibel och kan på så sätt justera hur mycket som ryms på en rad.
  • Våga pröva storleks-kontraster. Bara för att skalan ger många tillval behöver de ju inte matcha ordningen på rubriksgraderna. Kanske kan du dra någon av de större rubriksgraderna några snäpp uppåt eller den minsta nedåt?
  • Balansera typsnittets kontrast med textfärg. Förstärk eller jämna ut, beroende på hur formen i övrigt ser ut. Små ändringar i svart/gråskala gör väldigt mycket på läsupplevelsen och hur kaxigt/milt typsnittet ter sig. Använd gärna opacitet för att släppa igenom lite av bakgrunden.

Förstå hur linjehöjd fungerar i browsern

När man mixar typografi med bilder eller blockelement som har bakgrunder (alltså hela tiden) ser det ibland ut som att olika whitespace används. Det tog mig ett tag innan jag förstod att en textrad är konstruerad för att ge satt lineheight mellan två rader, inte som ett avstånd under varje textrad. För en vanlig paragraf ser det ut såhär:

enkel_linje
  • Vi har satt lineheight till 24px.
  • Bokstäverna ligger exakt på mitten av linjehöjden, satt till att vara 16px stora.
  • Två rader kommer alltså att mäta 24px mellan radernas baseline:
dubbel_linje

+ 4px whitespace under översta raden
+ 4px whitespace för understa radens topp
+ 16px för hela understa radens bokstäver

= 24px

Med beräkningen ovan går det att justera de texter som ser ut att ligga lite off: Det blir tydligt överst på rubriker och textstycken, eftersom dessas linjehöjd ger dem extra luft, i tillägg till det whitespace som är satt (som marginal) på elementet ovan:

whitespaceproblem

Justera genom att dra av 4px från bottom-margin på <elementet> ovanför texten, så ligger vertikal rytm kvar. Tycks 4px lite petigt så är principen samma för att justera en <h1> med stoleken 72px och en linjehöjd på 96px. Där är det ännu fler pixlar som bryter rytmen.

Oftast justeras det där på känsla eftersom det ser fel ut. Det fungerar också men det går ju att göra exakt också, särskilt om man använder Sass eller Less som gör matematiken åt en.

Paragrafryttare i ordets rätta bemärkelse

Avslutningsvis vill jag säga att metoden som jag beskrivit här är mitt sätt att snabbt komma upp med ett stabilt utgångsläge. Det finns fler metoder, men inga typografiska recept svarar på alla behov. Jag gör ofta undantag baserat på magkänsla a la ser det rätt ut är det rätt. Dock är motiverade undantag lättare att hitta när utgångsläget är by the book.