Navigation 72
Bar layout: Grid-locked
The bar is set on the 12 columns of the page. The wordmark stands in column 1, Products begins on column 7, the same vertical line as the figure in the hero, and each item has a column of its own. Point at the bar to see the columns.
The bar on the twelve columns of the page
- WhySwiss typography: the navigation is part of the system of the layout, and stands in it. That kind of precision is noticed when it is missing.
- RiskLong names do not fit in one column. The button is shortened to Start, and Sign in is left out.
- TechniqueThe same max-width, gutter and grid-template-columns in the bar and on the page, so the lines are the same to the pixel.