HTML: Swiss poster

Last update: 27 Apr 23:20

International Typographic Style, also known as "Swiss Style", is one of the most famous trends in graphic design. It is distinguished by rigor in typing, building on grids and ease of reading. Most often, these are asymmetrical layouts with left-aligned text and sans-serif fonts. Also, posters often have slanted elements.

In this challenge, you'll have to make a Swiss poster inspired by Mike Joyce's work. The final result of the challenge will be the following layout:

Poster inspired by Mike Joyce

Create layout and styles. The main project settings can be found in the variables that are in the app.css file

Basic poster styles:

  • One line height: 25vh. The vh unit is a percentage of the viewport height.
  • Blue line height: two normal line heights. The line starts from the middle of the orange line vertically.
  • Distance between columns: 40px vertically and 55px horizontally.
  • The poster uses a 5-column system. Column width: 85px.
  • To blend colors, use the opacity property with a value of 0.7.

Left text:

4 weekends
with guest bands

Right text:

January 12, 17, 18, 24, 25
plus sunday february 2 1975




  • In this challenge, the skills to positioning inside a grid container will come in handy.
  • Analyze layout. Find the place where the grid starts.

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory