Layout

Use these layout conventions when designing digital or printed assets for Louder Than Ten to help speed up the design process and make layout easier.

Our design style is very editorially influenced. The following grids and scales form a framework for layout and creativity for a number of mediums & media sizes.

Web grid


We use a variation of the Gerstner grid that has been optimized for the responsive web. It overlays 2,3,4,5, & 6 fluid column grids on top of each other and is spaced based on our baseline grid unit (aka the $line variable). Our grid concept inspired by Joni Korpi’s Golden Grid System. The margins and columns are fluid while the gutters maintain a fixed width. This ensures consistent proportional spacing and alignment at all screen widths.

Gerstner 2,3,4,5,6 column grid