Ett rutnätssystem delar upp en sida i kolumner och rader som styr vart innehållet placeras. Det skapar ordning i layouten. Den schweiziske designern Josef Müller-Brockmann kodifierade rutnätsprinciper på 1960-talet, och hans bok Grid Systems in Graphic Design är fortfarande en standardreferens. Tidningar, tidskrifter och webbplatser förlitar sig alla på rutnät, även om de använder dem på olika sätt.

Ett typiskt rutnät har kolumner, marginaler och marginaler. Kolumner innehåller innehåll. Fästen separerar kolumner. Marginaler ramar in sidan. Ett rutnät med 12 kolumner är vanligt på webben eftersom det delar upp det jämnt i halvor, tredjedelar, fjärdedelar och sjättedelar. Designers kan spänna över flera kolumner för bredare innehåll eller använda en enda kolumn för smalare text. Rutnätet dikterar inte designen. Det ger en struktur som designern kan följa, böja eller bryta avsiktligt.

Rutnätskomponenter

• Kolumner: vertikala band för innehåll.
• Rännor: mellanrum mellan kolonner.
• Marginaler: layoutens ytterkanter.
• Baslinjerutnät: horisontella linjer för att justera text.

Att bryta rutnätet kan vara kraftfullt. En utfallande bild som ignorerar kolumnerna drar uppmärksamhet just för att den bryter mot strukturen. Men brytningen fungerar bara om rutnätet är tillräckligt starkt för att kännas.