Experimenting with Swiss Style in CSS

Ad

Last week I started playing in CSS for my new personal site. I decided to skip the Photoshop/Fireworks/Illustrator part and go from sketches to HTML/CSS. This process helps me to improve my coding skills, especially for rapid prototyping. The first experiment I decided to create was a simple page with just text and texts rotated 45 degrees, heavily inspired in the Swiss Graphic Design Style.

For this post I want to show you a little bit of the creative process behind this experiment. The whole design uses only regular fonts, if you use a MAC you will see the text in Helvetica, while other platforms might render in Arial or Roboto (android).

Also feel free to give feedback or suggestions on how to improve the code.

Step 1

To start, let me show you the basic HTML file. You can see the structure of the document. It might look that there's too many nested DIVs but I did that because I will use that to extend the content of the site in the future. Right now, let's focus on the rotated text.

Step 2

Now let's focus on the part of the text that rotates. I used H1 and H2 for the text and put them inside a DIV with a class called "roatedtext"

Step 3

First thing to do is to adjust the font sizes using CSS

Step 4

To rotate the text we will use CSS transformation (transform:rotate(deg)). The first thing to do is to rotate one block 90 degrees. Use transform:rotate(-90deg);. Use negative to change the direction you rotate.

Step 5

Now just rotate the container DIV with the texts. Use 45 degrees to create the perfect Swiss style text.

Conclusion

Here's the final CSS I had when I finished this experiment.

DEMO

Written by

Fabio Sasso

I'm a Brazilian product designer based in Oakland, California currently working for Google as a Staff Designer. I am also the founder of Abduzeedo, an award-winning digital publication about design and a personal project that has become the source of inspiration for millions of designers and enthusiasts.

Ad

Ad