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.
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.
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.
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.Want more? Check out the archives for previous reviews, and don’t forget to subscribe for future reviews, posted weekly.