Micro og macro white space i typografisk design 11 min.

Al grafisk design handler om brugen af white space; om hvordan du bruger dit space som grafisk udtryk, og hvad du sætter hvor via dit grid. I denne blog fokuserer jeg på typografisk design og en kreativ bevidsthed om micro- og macro white space.

Da jeg i sin tid var i lære som grafiker (nede i midt-90’erne), var det danske fagsprog slet ikke smurt ind i disse internationale, engelsksprogede termer: grids blev kaldt for et ‘gitter’ til spalterne, white space hed “aktiv luft” og at arbejde med linjeafstande hed ‘skydning’. Altsammen et sprog man havde fra dengang man satte typer i hånden. Jeg skal nok spare læseren for alt for mange af disse sproglige levn fra “middelalderen” og bruge de engelske termer 😉 Men får du det typisk notorisk dårligt med tekster, der skamløst blander danske og engelske ord, så er du advaret nu!

Hvad betyder white space & grids?

White space og grids er begreber, der er blevet anvendt gennem årtier, og regner man den tidlige praktiske bogtrykkerkunst med – i århundreder! Hvad betyder de? Helt praktisk talt betyder det oftest at fx en “kaffebords-kunstbog” har store margener, stor linieafstand og i det hele taget meget “luft” i sit layout, dvs. tomme dele i layoutet uden tekst og billeder.

Her er et website, hvor der er gjort brug af meget white space for at skabe kontraster i helheden og at skabe ro omkring delelementerne:

Kilde: www.bauhaus100.com

White space er i øvrigt ikke altid hvidt, selvom det er tilfældet med eksemplet her ovenfor.

Som kontrast har en trykt avis ofte tætte elementer med sats og fotos fyldt til næsten hele siden, og altså meget lidt white space i sit spalte-grid.

Grids og white space er beskrevet i alle slags medier, lige fra fagblade og lærebøger til utallige blogs og videotutorials. De er også set på gennem vinkler som teori og praksis samt gennem fagfelter som især design, arkitektur og endda gennem forskning i kunsthistorisk teori (omkring de såkaldte ‘skopiske regimer’ – jeg wrestlede selv med det i mit speciale).

Jeg vil i denne blog ganske kort sætte spot på en specifik typografisk designmetode: typografisk micro- og macro white space – og herunder grids. Jeg dækker dog ikke grids omfattende i denne blog. Det må blive et spændende emne til en anden blog.

Nu kaster vi os ud i det: med enkle layout-eksempler vil jeg demonstrere micro- og macro white space i sammenhæng med typografisk design.

Micro- og macro white space i dit designer space

Der er altid et sted, et rum, du designer i. Det kan være et visitkort, et website, en plakat osv.  Det er dit designer space, som du placerer grafiske delelementer i.

Disse enkelte delelementer forholder sig til hinanden indbyrdes i dette space.

Lad os tage et eksempel fra dagligdagen for at illustrere det:

Forestil dig en flot stue, hvor der er placeret ganske lidt, men korrekt matchende møbler og hvor alle elementer, du ser, er stilfuldt kontrasteret til tapet og tæpper, til farver og former og størrelser. Du bemærker, at ikke al pladsen er fyldt ud og at netop det skaber en dynamik i hele rummets layout. Det er ikke fordi rummet nødvendigvist er udynamisk eller føles tomt, for der kan være stærke farver og ekspressive genstande. Tingene “taler” på en måde med hinanden og der er åndehuller mellem de dele, du ser. Disse åndehuller er white space, og det tillader de andre dele at stå ud, at hænge sammen, eller at bryde et mønster – eller en helt anden kombination, der skaber andre spændende indtryk i rummets design. En stue, der indrettes efter en ide og med omtanke for effekt og udtryk, er ligesom fx en webside eller et magasinlayout for en designer; det er et space for designeren. Og det handler for designeren om at være opmærksom på at både helhed – makro – og detaljer – mikro – spiller sammen.

Kort sagt:

• Det designer space, der arbejdes med omkring alle elementers samspil er macro white space
• og det space hvor de mindre dele organiseres i forhold til hinanden, er micro white space.

Micro white space i typografisk design er al den aktive white space, der specifikt skaber de æstetiske typografiske detaljer:

• Linjeafstand kan skabe et såkaldt mørkt eller lyst skriftbillede, dvs. tæt sats med lille linieafstand eller mere lyst med mere afstand.
• Luft mellem margener (og billeder, call-to-action knapper med mere, men her fokuserer jeg som sagt på det typografiske design)

Afstanden mellem de enkelte tegn, dvs. det, man kalder spatiering i typografisk lingo og som i webdesign kan løses med fx

<style>
h1 {
    letter-spacing: 2px;
}
</style>

Brugen af macro white space i dit designer space er den bevidste brug af elementer i den større “synlige” white space , dvs.:

• Placering af elementer i de større områder af dit space, fx sats, knapper (ved digitale medier) og billeder for sig eller i grupperinger af elementer.
• Kontraster og placeringer kan angive et hierarki mellem delelementer, der delvist kan styre læseretning angive mere betydning af nogle elementer frem for andre.
• Konservative elementer er typisk i et makro design, især baggrund imod spalter af sats (web: tekstfelter) og placering med større grupperinger af fx billeder og bokse.

Her er et visuelt overblik som eksempel – vist via et klassisk magasinlayout:

Af David Engelby

Micro white space gør sig her gældende på flere niveauer:

Der er en god linjeafstand, der skaber et lyst skriftbillede i spalterne. (PS: vil du læse mere om lyst og mørkt skriftbillede, så se min blog her)

• Der er relativt små margener mellem spalter, mellem sats og billeder og mellem billeder og billedtekst. Det skaber i dette eksempel tæt sammenhæng og retning mellem de enkelte grupperinger.
• Der er register mellem linjerne, dvs. de står på linje med hinanden, og det skaber ro i skriftbilledets micro white space.
• Rubrikken (“overskriften”) har en negativ (dvs. lille) linjeafstand for at stå mere stramt som helhed. Det ville aldrig gå i satsen, men det gør man ofte i rubrikker, for at linjeafstanden ikke bliver for voldsom i stor størrelse. Her har det endda været muligt at gøre linjeafstanden ret lille grundet fontens specifikke design (Helvetica har kun få kontraster i sine under- og overlængder).

Af David Engelby

• Den almindelige sats er komponeret stramt med god afstand mellem ordene, mens der i designet af byline (“Af …” etc.) er anvendt kraftig spatiering mellem tegnene som kontrast. Det er i øvrigt altid en god ide at spatiere blokbogstaver (kaldet versaler eller majuskler i grafisk lingo).

Af David Engelby

Macro white space – altså nu med “a” – gør sig gældende som dynamisk effekt i den større gruppering:

• Der er tydelige hierarkier i mellem billeder og satsen i spalter.
• Der er dynamisk white space mellem billeddelene (billeder med samt billedtekst) og spalterne som helhed

Af David Engelby

Der er gjort brug af ekstrem typografisk white space ved indledningen til artiklen, ved rubrikken. Effekten er en kontrast mellem de enkelte deles stramme placering og den white space, der her skal lade øjet hvile roligt på siden. Samspillet mellem de brede, ydre margener, især top/bund, er også vigtigt.

Af David Engelby

Grids i design med micro- og macro white space

Én ting er selve dit space. En anden ting er hvordan du skal arrangere delene, for det skal du ikke gøre tilfældigt. Det skal du gøre via et grid, der både skaber systematik, orden og en kreativ ramme – altså et space med potentielle ankerpunkter, kan man sige.

Gavin Ambrose og Paul Harris siger det meget rammende i deres bog Grids:

“Grids allow a designer to make informed decisions and to use their time efficiently. They can be used to add a high degree of dynamism to a design – the positioning of what may seem a rather small and irrelevant element, such as folio, can create a dramatic impact on a page (…)”.

Lad os derfor kaste os ud i lidt basic “101 grid design” og se på endnu et klassisk layout.

Her er selve grid’et, som også passer ind i det første layouteksempel, jeg gennemgik:

Af David Engelby

Der er tolv moduler. Det er her vist med sorte moduler, som er de dele, man kan arbejde med og flekse ud i brug af især macro white space design. Et grid er ikke et layout, et layout er det specifikke design, du laver i dit space.

Det betyder helt enkelt, at har man man ét grid, kan man lave mange layouts.

I praksis ser det sådan ud i et eksempel på et layout (lavet i InDesign):

Af David Engelby

Det er de samme typografiske elementer fra før, nu er der blot tilføjet lidt ekstra dele (fx mellemrubrikker).

Guidelines og margener fra Indesign er her vist som relativt synlige, så grid’et træder frem og man kan se elementerne placeret i et layout. Der er arbejdet med macro white space på den venstre side i opslaget under rubrikken, og på den højre side af opslaget i to vertikale white space elementer. Margenernes white space “presser” aktiv luft (ja, nu sagde jeg det gamle faglige udtryk, men her passer det spot on!) ind mod elementerne og skaber en sammenhæng mellem elementerne. Det typografiske design og dets micro white space er relativt uændret.

Men dit macro white space design afhænger af dine ideer til det enkelte layout, og i det her eksempel er det ændret en smule i forhold til det første layout-eksempel. Ideen her er at beskuerens øje skal styres fra billedet på siden til venstre ned mod det store billede på højre side og op til det smalle billede over dette. Det er placeringen af elementer i dit grid, der styrer denne rejse.

Lad os kigge på nogle detaljer i designet her:

• Modulerne kan indgå i samlinger, fx i placeringen af større eller mindre billeder. Her er der et billede i starten af artiklen, der dækker fire moduler:

Af David Engelby

Men der sker mere her – på micro white space niveau i grid’et:

• Baseline grid (grundlinienettet, som det hedder på dansk) spiller også en rolle her – det er det, man kalder bunden af satsens små bogstaver (x-højdens bund, dvs. bunden af et lille “x”). Baseline grid skal altid passe med linjeafstanden i satsen. Se på bunden af billedboksen ovenfor – hvordan den flugter med bunden af satsens små bogstaver (også kaldet minuskler).
• Se også nedenfor hvordan linjeafstanden i rubrikken passer med to linier af satsen og dermed til baseline. Det er med andre ord et micro white space design sat i relation til macro-grid’et, så det er harmonisk, det er tæt og – ikke mindst –  det er nemt at arbejde med.

Af David Engelby

Sådan er dette grid skabt med sine moduler – til at følge potentialerne i sit typografiske micro- og macro design. Så er det også nemt at styre når man skal producere mange sider og evt. være mange personer om at designe layouts ud fra ét grid og et designer space. Dit grid hjælper dig, også selvom det er et skråt grid til en plakat, om du arbejder med digitale, responsive grids (se fx et view port grid her) eller et klassisk grid, som i denne blog. Dit grid kan på en måde siges at være dit kreative program, et princip for din udtryksform og for hvordan du vil arbejde med dit micro- og macro white space i dit design.

“The typographic grid is a proportional regulator for composition, tables, pictures, etc. It is a formal programme to accommodate x unknown items. The difficulty is: to find the balance, the maximum of conformity to a rule with the maximum of freedom. Or: the maximum of constants with the greatest possible variability.” (Jaka Bonča, designer og kunstner)

Så mit råd til dig er: tænk altid i dynamiske micro- og macro white spaces i dit valg af typografisk design – med dit konkrete grid.

Der er aldrig noget der er tilfældigt i seriøst design!

Er du sulten efter mere? DIGITYPES’ blogindlæg om white space er en kort og klar indføring i hvorfor white space skal tages alvorligt i UX design (DIGITYPES’ serie om UX myter)

For de seriøse, der vil studere emnet og prøve at lære håndværket grundigt, kan jeg kun varmt anbefale bogen Grids af Gavin Ambrose og Paul Harris.