How to judge a Swiss style website template by its grid and type
A Swiss style website template is only as good as the grid underneath it. Sample photography of concrete buildings and posters makes almost any template look Swiss. Strip the photos away and check what's left: consistent columns, a small set of type sizes, flush-left text, generous margins and one accent colour used sparingly.
What the style asks of a template
The International Typographic Style grew out of Swiss design schools in the 1950s and was codified in books such as Josef Müller-Brockmann's Grid Systems in Graphic Design. Its essentials translate directly to the web: a modular grid, sans-serif type in a few sizes, asymmetric but ordered layouts, flush-left ragged-right text and photography used as information. The history and principles are covered in Swiss style web design. This page is about telling a real Swiss grid template from one that only borrows the look.
Six checks with the photos removed
- Columns that hold. Turn on a column overlay, or draw lines on a screenshot. Every block of text and every image edge should land on a column line. A template that drifts off its own grid by a few pixels will drift further when you add content.
- A modular gutter. The gap between columns should be the same everywhere, and vertical spacing should come from a related scale.
- Few type sizes. Count them. Four to six sizes (display, section heading, subheading, body, small print) is typical. Fifteen means the template was designed page by page, not as a system.
- Flush-left, ragged-right text. Centred paragraphs and justified text with rivers of space are both off-style. Headlines may be very large, but they still align left.
- One accent. Red is traditional; any single strong colour works. A template that uses three accent colours is a colourful template on a grid.
- Real hierarchy without the images. Section numbers, rules and type weight should carry the structure on their own.
How many columns, and what happens on a phone
Most minimal grid website templates use 12 columns because 12 divides into halves, thirds, quarters and sixths, which lets you place offset blocks (an image across 7 columns, text across 4, a gap of 1) while staying on the grid. Some editorial templates use 6 or 8; that's fine if it's consistent.
On a phone, a good template drops to one or two columns and keeps the same margins, type scale proportions and section numbering. Watch for two failures: text columns that stay narrow and produce three-word lines, and asymmetric offsets that leave a large empty strip at 375px wide. The layout should still reflow to a single column at 320 CSS pixels without sideways scrolling, which is what WCAG's reflow criterion asks for.
Type: what to look for
- A neo-grotesque or grotesque sans: Helvetica and Akzidenz-Grotesk are the historical choices; on the web, families such as Inter Tight or Archivo carry the same feel and are freely licensed.
- Tight headline tracking, normal body tracking. Large headings set slightly tighter look deliberate; body text set tight is harder to read.
- Body at 16px or more, with a measure of roughly 60 to 75 characters. Swiss layouts often have wide pages, so the text column needs a maximum width.
- Weights with a job. Bold for headings and numbers, regular for text. Avoid light weights at small sizes, which lose contrast.
What to change once you've picked one
Replace the sample project index with your own work in the same format, keep the grid intact when you add sections, and resist adding decoration the template didn't have. Swap the accent for your brand's strongest colour, provided it passes contrast as button text. Keep the photographs consistent in crop and treatment; Swiss layouts expose mismatched images more than most.
Swiss starting points in Anticode
The Swiss design system builds in this style from a brief. It uses Inter Tight, a white ground with near-black text, one red (#d71e14 in the light theme) as the action colour, square corners on images and buttons, a 1px rule under the header and hero, 2px rules above cards instead of boxes, and section headings numbered 01, 02, 03 in the accent colour. Body copy is flush left. In the layout editor, resizing an element snaps it to columns, so offsets stay on the grid.
Atelier Nord, an architecture studio with a drawn project index, is the gallery's template in a Swiss grid style, and it's also set in Inter Tight. It's an app written by Anticode's model rather than a page from the Swiss system. Copying it into a project costs nothing off your limits; from there you describe changes in words.
Questions people ask
What makes a website template Swiss style?
A consistent modular grid, a grotesque sans-serif in a few sizes, flush-left text, asymmetric but ordered layouts and a single accent colour.
How many columns should a Swiss grid template have?
Twelve is the most flexible because it divides many ways. Six or eight can work if every element respects them.
Is Helvetica required for a Swiss style template?
No. Any well-drawn grotesque or neo-grotesque gives the same effect. Freely licensed web fonts such as Inter Tight are common choices.
Sources
- Understanding SC 1.4.10: Reflow, W3C, checked