Et rutenettsystem deler en side inn i kolonner og rader som styrer hvor innholdet skal plasseres. Det bringer orden i layouten. Den sveitsiske designeren Josef Müller-Brockmann kodifiserte rutenettprinsipper på 1960-tallet, og boken hans Grid Systems in Graphic Design er fortsatt en standardreferanse. Aviser, magasiner og nettsteder er alle avhengige av rutenett, selv om de bruker dem på forskjellige måter.

Et typisk rutenett har kolonner, innre marger og marger. Kolonner inneholder innhold. Innre marger skiller kolonner. Marger rammer inn siden. Et rutenett med 12 kolonner er vanlig på nettet fordi det deler seg jevnt inn i halvdeler, tredjedeler, fjerdedeler og sjettedeler. Designere kan strekke seg over flere kolonner for bredere innhold eller bruke en enkelt kolonne for smal tekst. Rutenettet dikterer ikke designet. Det gir en struktur som designeren kan følge, bøye eller bryte med vilje.

Rutenettkomponenter

• Kolonner: vertikale bånd for innhold.
• Takrenner: mellomrom mellom søyler.
• Marginer: ytterkantene av layouten.
• Grunnlinjerutenett: horisontale linjer for justering av tekst.

Å bryte rutenettet kan være kraftig. Et bilde med utfallende farge som ignorerer kolonnene trekker oppmerksomhet nettopp fordi det bryter med strukturen. Men bruddet fungerer bare hvis rutenettet er sterkt nok til å bli følt.