"Swiss typography is not just about the grid. It's about simplicity, clarity of information, and a structure that helps the consumer understand what is happening. It's not an art form; it's a discipline, it's product design". [1] – Dalton Maag
Swiss style, also known as the Swiss School or International Typographic Style [2], is a design style that originated in the 1920s. Although its roots can be traced back to the Netherlands, Germany, and Russia (with visual influences from De Stijl, Constructivism, and Bauhaus [3]), its potential and quality were truly appreciated in Switzerland in the 1950s. Hence, its name also derives from Switzerland [4].
Despite nearly a century passing, the Swiss School continues to influence contemporary creators and designers of modern websites. The works of graphic designers from the previous century in the Swiss style, as well as contemporary websites, share many commonalities – primarily emphasizing universality, usability, and functionality. Both are characterized by the use of sans-serif typefaces, simplified color palettes, and working with a predefined grid, to maintain consistency and rhythm in the design [5].
Emerging from the "political" De Stijl, Constructivism, or Bauhaus movements, the Swiss School favored objectivity, simplicity, and the invisibility of the author. This often led to criticism of the movement, accusing the Swiss School of repetitiveness while overlooking its universal, timeless readability [6].
TYPOGRAPHY
It's not hard to guess that the preferred typeface among Swiss style creators was sans-serif. This style is often used today in publications read on computer screens, characterized by the highest readability. A prominent example of such a typeface dates back to the 19th century and was created by Ferdinand Theinhardt – Akzidenz-Grotesk (Fig. 1), which became the main typeface used in Swiss Design [7].
Fig. 1. Akzidenz-Grotesk Typeface
Source: H. Berthold Typefoundry, Akzidenz-Grotesk,
At the same time, the Haas Type Foundry in Basel redesigned Schelter Grotesk, which later transformed into Neue Haas Grotesk. After the company was acquired by the Stempel foundry in Frankfurt, a German company collaborating with Lynotype, they wanted to emphasize the Swiss character of the popular and evolving typeface, giving it the ancient name of Switzerland – "Helvetica" [8]. Helvetica quickly became a brand associated with the Swiss Typographic Style, and its subtly elegant character was desired by many corporations, including Microsoft, BMW, Toyota, Harley-Davidson, and many others [9]. The typeface was and continues to be so popular that there are voices claiming that choosing Helvetica is "lazy" [10].
The Swiss Design's choice of specific typefaces, such as Helvetica, stemmed from the belief that the message is paramount, and complex, serif typefaces could disrupt it. Often, only one typeface was used, and sometimes even its thickness was maintained. Information hierarchy was established by changing the size or color of the text [11]. The size of the text also proved to be a graphic solution, giving the work an visually interesting character.
Fig. 2. An example of a website using simple typography inspired by the Swiss Style.
Source: Museum of Modern Art, https://artmuseum.pl/
Web designers often turn to similar typographic solutions. Simple and uncomplicated typefaces are considered an ideal choice in designing readable projects, considering accessibility, i.e., WCAG, where "information and user interface components must be presented to users in a way they can perceive" [12], particularly for visually impaired or elderly individuals. An example of a website that adheres to accessibility principles and presents content in sans-serif, legible typefaces is the Museum of Modern Art website (Fig. 2). It employs straightforward typography, with emphasis achieved through bold variations and uppercase letters.
The typographic style promoted by Swiss Design is also frequently adopted by portfolio designers for architects. A superb example is the graphic concept of the Shift Architects website presented in Fig. 3. The use of uppercase letters and clear, sans-serif typefaces underscores the monumental character of the studio and the area in which they operate.
Fig. 3. Example of a portfolio for an architectual studio inspired by the Swiss Style.
Source: Liam Le Roux, Shift Architects, https://www.behance.net/gallery/96862619/Shift-Architects
GRIDS
Typography characterizing Swiss Design is clear and organized. Its creators abandoned unnecessary elements in favor of elegant simplicity. To achieve the desired minimalist effect, one must rely on a precise grid system, pioneered by Josef Müller-Brockmann [13]. In his book "Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers, and Three Dimensional Designers," he precisely describes the need for using a grid and the method of its construction. This allows the designer to maintain the purity of form, extract the essence from the content, uphold objectivity, rationalize creativity and the production process, integrate elements of color, form, material, and the architecture of content on the printed page [14].
The essence of the grid is primarily to divide the page space into a specific number of vertical and horizontal spaces and establish precise distances between them. For example, a page can be divided into four equal squares in five vertical sections, as shown in the example below (Fig. 4). This creates a design space where content can be placed.
Fig. 4. Example of apge division using grids.
Source: J. Müller-Brockmann, Grid systems in graphic design: a visual communication manual for graphic designers, typographers and three dimensional designers, Niggli Verlag, Salenstein 2016, p. 80.
Fig. 5. Example of a grid system proposed by website designers in 2007.
Source: K. Vinh, M. Boulton, Grids Are Good (Right?), Subtraction.com, http://www.thegridsystem.org/pdf/grids_are_good.pdf
Web designers quickly began to realize that website projects also needed organization and a way to "tame" their sometimes very complex content and substantial amount of content. In 2007, Khoi Vinh and Mark Boulton developed a grid system for websites (Fig. 5), which is still in use today. Their document "Grids Are Good (Right?)" became a handbook for designers aiming for the ideal arrangement of content on websites, aiming to maintain rhythm, consistency, and order [15]. The creators of the grid system for the web clearly emphasize that their inspiration is the Swiss style and its conservatism in content arrangement (Fig. 6).
Fig. 6. A section of the document describing grids for web design, inspired by, amoung others, J. Muller-Brockmann.
Source: K. Vinh, M. Boulton, Grids Are Good (Right?), Subtraction.com, http://www.thegridsystem.org/pdf/grids_are_good.pdf
Classical grids application can be seen in the graphic layout in Fig. 7. Here, a column grid consisting of 6 columns is visible, with 5 gaps between them, creating spaces, allowing the creator to effectively and evenly arrange elements on the website. The grid also defines margins on the right and left sides of the design.
Fig. 7. Example of a website using 6-column grid.
Source: Gertjan Melgers, Spaces Brand & Website Re-Design, https://www.behance.net/gallery/5500039/Spaces-Brand-Website-Re-Design
It is accepted that using grids in websites is a standard and allows for effective and professional design. Currently, creators approach their application in an individual way, as illustrated in the example in Fig. 8, while still adhering to the principles described by Vinh and Boulton.
Fig. 8. Example of a website using a grid constructed with the creator's own assumptions.
Source: Mike | Creative Mints, Arca Bureau / Web site design, https://dribbble.com/shots/5900983-Arca-Bureau-Web-site-design/attachments/1269568
SUMMARY
It is remarkable to observe how the principles guiding typography creators and design schools almost a hundred years ago remain relevant. Exhaustive considerations by Josef Müller-Brockmann in "Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers, and Three Dimensional Designers" find themselves in today's web design, confirming the timelessness of the achievements of the Swiss School. The tradition of grid-based design developed in the mid-20th century has proven to be ideal for contemporary digital design, offering immense creative possibilities while adhering to strictly structured principles. By applying them, visually striking projects with a harmonious balance of functionality and aesthetics are achieved.
Kamil Mirkowicz
WIT University in Warsaw
Post cover art: Die Zeitung, 1958, Author: Emil Ruder, Source: https://swissgrid.posterhouse.org/
[1] L. Benyon, Is This the Answer to Helvetica, a.k.a. the “Lazy” Design Choice?, 23 November 2016, http://eyeondesign.aiga.org/its-time-for-the-swiss-style-of-typography-to-bow-out/
[3] S. Bradley, Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design, 22 lipca 2013, Smashing Magazine, https://vanseodesign.com/web-design/swiss-design/
[4] D. Terror, Lessons From Swiss Style Graphic Design, 17 July 2009, Smashing Magazine, https://www.smashingmagazine.com/2009/07/lessons-from-swiss-style-graphic-design/
[5] A. Tulibacka, Szkoła szwajcarska (Swiss Style) i jej wykorzystanie w projektowaniu stron, 28 kwietnia 2016,
grafmag, https://grafmag.pl/artykuly/szkola-szwajcarska-swiss-style-i-jej-wykorzystanie-w-projektowaniu-stron
[6] S. Bradley, Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design, 22 lipca
2013, Smashing Magazine, https://vanseodesign.com/web-design/swiss-design/
[8] S. Cantavalle, The history and evolution of the font Helvetica, 22 stycznia 2021 https://www.pixartprinting.co.uk/blog/history-font-helvetica/
[10] L. Benyon, Is This the Answer to Helvetica, a.k.a. the “Lazy” Design Choice?, 23 listopada 2016, http://eyeondesign.aiga.org/its-time-for-the-swiss-style-of-typography-to-bow-out/
[11] A. Tulibacka, Szkoła szwajcarska (Swiss Style) i jej wykorzystanie w projektowaniu stron, 28 kwietnia 2016, grafmag, https://grafmag.pl/artykuly/szkola-szwajcarska-swiss-style-i-jej-wykorzystanie-w-projektowaniu-stron
[12] Fundacja Widzialni, Czcionki, https://wcag20.widzialni.org/czcionki,m,mg,162
[13] S. Bradley, Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design, 22 lipca 2013, Smashing Magazine, https://vanseodesign.com/web-design/swiss-design/
[14] J. Müller-Brockmann, Grid systems in graphic design: a visual communication manual for graphic designers, typographers and three dimensional designers, Niggli Verlag, Salenstein 2016, p. 10.
[15] K. Vinh, M. Boulton, Grids Are Good (Right?), Subtraction.com, http://www.thegridsystem.org/pdf/grids_are_good.pdf
Opmerkingen