Samuel Brynolf

Skapa typografisk rytm

Griddar för att layouta innehåll horisontellt är ofta lätt. Att ha en vertikal grid som typografi och övrigt innehåll vilar på, är mer av en utmaning. I mitt senaste projekt har jag experimenterat med gyllene snittet för att få balans och dynamik i typografin och jag har lärt mig endel som jag tar med mig till följande projekt:

  • I ett iterativt/agilt projekt — VÄNTA med att sätta den vertikala rytmen till sist. Särskilt om allt sitter i em = mycket räkning. Det är okej att höfta i början, men förfina sist.
  • Skapa tre mixins för font-size, line-height och margins som autokalkylerar om pixlar till em. Använd dessa mixins på elementen som ska stylas (till skillnad från nästa punkt). Em är bra för webben, pixlar är bra för mitt psyke.
  • Skapa stödklasser för default-margins och paddings. Använd dessa klasser och aktivera dem genom att applicera dem i html (OOCSS).
  • Skapa stödlinjer med CSS för att visa baseline-grid.

I övrigt funderar jag på en artikel som jag haft mycket nytta av: 24ways.org/2006/compose-to-a-vertical-rhythm. Problemet här är bara att de i sina exempel använder samma line-heights på allt. Till och med i övningsexemplet har de en rubrik (h1) som har samma storlek som dess line-height för att bevara sin rytm. Vilket ju ser värdelöst ut i praktiken. Jag har tidigare använt teehan+lax baseline grid, och jag måste säga att det är en mer flexibel approach: www.teehanlax.com/downloads/baseline-grid. Det skulle vara intressant att kombinera detta med principer för gyllene snittet, eller plocka ut de viktigaste rubriksnitten som då harmonierar mot bodycopyn.