Swiss in CSS

April 5, 2016 12:47 PM

Classic Swiss design rendered as animated CSS. That is all.
posted by Grangousier (13 comments total)

Oof. No Helvetica on this workstation. Doesn't quite make the grade with Arial in place.
posted by blue t-shirt at 1:22 PM on April 5, 2016 [3 favorites]

Nicely done.
posted by Artw at 1:22 PM on April 5, 2016

Great concept, I'm sure it looks spiffy on a Mac, or even Linux.
But the text is just hideous on a windows machine without Helvetica installed. This is a great example of why kerning matters.
posted by [expletive deleted] at 1:29 PM on April 5, 2016

Pretty. But not everything in this world needs to be animated.
posted by Going To Maine at 1:29 PM on April 5, 2016 [4 favorites]

All the text is blurry. Not blurry enough to mistake it for Helvetica though.
posted by aubilenon at 1:54 PM on April 5, 2016

I never knew how much I liked the Swiss design aesthetic!
posted by slogger at 2:01 PM on April 5, 2016

This is an interesting exercise. In some cases, I think he really amplified what the original design was doing. In others, I feel the static design actually conveyed more energy and motion than the animations.
posted by Kabanos at 2:07 PM on April 5, 2016 [2 favorites]

Stylebot plugin

+

body {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

=

fun
posted by a lungful of dragon at 2:17 PM on April 5, 2016 [12 favorites]

It's kind of interesting that Swiss layout almost makes Comic Sans usable. The principles are so strong that one could throw almost any hot mess of a typeface in there and it kinda works.
posted by a lungful of dragon at 3:32 PM on April 5, 2016 [2 favorites]

This is a fun and pretty lil project!
posted by moons in june at 3:55 PM on April 5, 2016

Perhaps someday I can have inexpensive animated posters for my living room that do not emit light.
posted by sourwookie at 5:12 PM on April 5, 2016

These captured the spirit of the original designs better than I had expected.

It would have been interesting to see them try to replicate the original CBC "pizza" logo animation, dunno if CSS is up to that level of intricacy without some pretty heinous SVG and keyframing, though.
posted by ardgedee at 3:53 AM on April 6, 2016

There's a pretty cool class called Printing Code (materials) which covers similar ground in depth.
posted by ethansr at 7:37 AM on April 6, 2016 [2 favorites]