helveticons

helveticons

I love Helvetica and I love the color yellow, so imagine my delight when I stumbled upon the new website for Helveticons, which are described as “icons, glyphs and symbols based on the Helvetica Bold typeface.” The accompanying website is beautiful, as are the icons themselves; and despite a few very minor flaws, I am in love with the Helveticons website.

Layout & Color

When I first visited Helveticons, I first noticed the very cool (and very well done) background graphic placed behind the content. Designed to look like an unfolded poster, the striking yellow graphic not only caught, but even held my interest due to the designer’s obvious attention to detail. As any good typographer knows, a well thought out grid is essential to good typography (and vice-versa), so the idea of an unfolded poster background on a website helped create something that is very rarely seen in web design today: a modular grid. In addition to the apparent 8-column vertical grid, the modular grid keeps content structured into sections in ways that are most commonly found in print work.

A mix of grey, yellow and white are used sparingly throughout the design, adding a nice sense of contrast to an otherwise very rigid design—as Swiss design tends to be. Dark grey is used primarily for body copy and headlines, while white is reserved for the larger headlines along with many of the example icons used on throughout the site.

Typography

The only typeface used across the design is Helvetica, and it can be found via both HTML text and via image replacement. Helvetica is an incredibly versatile typeface, and while it can be used to great lengths, it can just as easily be abused. For the Helveticons website, it’s used wonderfully. Spanning a variety of type sizes, making the process of scanning each section incredibly easy.

Something else I feel I should point out is the use of padded elements across the site. Text is inset by a few pixels, which as you’ll read in Khoi’s post, Nudge Your Elements, is nearly always a wise choice.

Criticism

After looking a little more closely at the details, I found there to be several small issues. First order of business: increase the leading! I understand there is a baseline grid that needs to be kept in tact, but increasing the line-height on the body copy would make the content of the site far easier to read.

Second: watch the letter spacing! Although I was enamored by the fact that Helvetica was used so prominently in this design (and in the product the website represents), the main title is in dire need of decreased letter spacing. Tightening the main title’s letters would be icing on the cake, details wise, but it’s really not hard to do—it’s an image, not HTML text.

There are a few sections of the site that could’ve (and should’ve) been done with HTML/CSS, namely the list of icon sizes and formats down on the left-hand side. With a bit of CSS3’s text-shadow property, this section could’ve been replicated in a more accessible manner. But it’s beautiful none-the-less.

Some smaller issues I came across include the use of grey for the most of the text. Specifically, #363636 is used for both text and icons, and when set on a bright yellow background, it seems to blend in a little too much. Increasing the type’s contrast by changing the color to #262626 would greatly help.

One last critical note: underneath the section “Inspirational”, the designer mistakenly used a hyphen instead of an em-dash. Typographic blasphemy, I tell you!

Yes, I’m nitpicking.

Conclusion

I really can’t get over how awesome the Helveticons website is. Everything about it reminds me of printed design, while at the same time, it feels so digital. It really is hard to explain, but when a design on the web is able to bridge that gap, serious progress has been made. As a fan of Swiss design, Helvetica, yellow, and grids, it really was love at first sight.

  1. Josh

    ‘Disgusting’ hyphenage in the ‘245 icons - endless possibilities’ heading too. I personally take the view that en dashes are more effective - they don’t interrupt the flow of the text - and that if en dashes must be used, don’t put spaces around them. But there is no right or wrong answer; it’s just the designer’s preference. They’ve used the spaced em elsewhere there, so it makes sense to make it consistent.

    Nothing wrong with nitpicking. Nits are nasty.

  2. Ludvig Ericson

    Note that there are rules in English for when to use en and em dashes.

  3. L. E.

    Note that there are rules in English for when to use en and em dashes.

    Nice review, more constructive criticism to the world! \o/

  4. Tor Løvskogen

    What’s with the low line-height?

  5. Kyle Meyer

    @Tor The line-height is my lingering issue as well, but none-the-less, it is a beautiful site.

  6. Tor Løvskogen

    Yes, and the icons…!

  7. Noel Wiggins

    Awesome layout, love the vivid yellow and the css is tight.

    But nothing compares to the page folds…

    Really is an awesome effect to make this layout have some punch!

  8. inspirationbit

    Page fold is an excellent idea, I’m not crazy about its execution though, not too realistic. Really like the icon preview effect, very neat. I wonder what was their reason to use such a tight line-height? Surely with the otherwise great implementation of grids and typography, they must be aware of line-height and legibility as well.

  9. Tobi

    Nice site indeed.
    However, it looks to me as if they were selling an adaption of Wingdings N°1. But for $279? You can get a nice type family there.

  10. Twitter Icon Guy

    +1 vote for the awesome page folds. The site has some accessibility issues which you can see when disabling all CSS. The header image doesn’t un-style(word?) gracefully