Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: only a few examples

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

• Typicons
• Hutchings Twitter-Account
• Creative Commons Attribution-ShareAlike 3.0 Unported

Every year, the WordPress team releases a flagship theme, that goes by the name of Twenty-Something. We've had Twenty Ten and Twenty Eleven so far, and this past week, WordPress provided us with another addition to the line-up: Twenty Twelve! It’s an easy guess to relate the names to their release years. Even though it is a bit late and we are already in the later half of the year 2012, who wouldn’t want a good WordPress theme?

Following in the footsteps of its predecessors, Twenty Twelve has a lot of expectations to meet and shoes to fill. In this article, we shall take an in-depth look at the latest flagship from Automattic.

Introduction

Designed by Drew Strojny of The Theme Foundry, Twenty Twelve is an elegant and responsive theme. If you take a casual look at the theme, you'll notice that it isn't entirely like those blogging themes out there.

Of late, WordPress is being used to create websites of different genres — enterprise entities, news and magazines and even e-commerce sites. One can safely conclude that WordPress is no longer a mere blogging tool. Obviously, Twenty Twelve acknowledges the fact, that WP now has a user base beyond blogging. The home page does not list blog posts in the traditional style by default — instead, it has special areas and widgets for text and other content.

Digging Deeper

So, what does this theme have in store for us? Let's take it for a spin!

Mobile-First Layout

When WordPress 3.4 was released, one of the most talked-about features was the support for retina displays. Twenty Twelve does not disappoint in this section. The theme has a mobile-first layout and is totally responsive. It can be viewed on any device (well, almost) — smartphones, tablets, HiDPI screens — you name it!

TwentyTwelve scaled down to mobile client size

Special Homepage Template

As mentioned above, the homepage does not enlist blog posts in the traditional style. Instead, it serves as an introductory or landing page for your website. You can add text, images and other media in the upper section, and use special homepage widgets in the lower region.

Pictured: BlueCrabYoYo Homepage using Twenty Twelve

The custom homepage of Twenty Twelve is definitely one of the most loved (and hated) features. While some users are enthusiastic about its layout, others are genuinely unimpressed. In hindsight, not so long ago, WordPress itself claimed to be a blogging tool first, and anything else afterwards. The homepage layout, while looking absolutely impressive and useful, quashes the earlier claim. Of course, you can always retain the blog-based layout.

Typography

Nothing much to talk about here except for the fact that Twenty Twelve comes with the Open Sans typeface.

Post Formats and Widgets

Obviously, Twenty Twelve comes with support for multiple post formats. Depending on the format, posts are formatted differently than standard blog posts.

Speaking of widgets and sidebars, Twenty Twelve has a No-Sidebar template. In fact, even the Primary Sidebar won't show up on standard page templates if it does not have any widgets.

Header Images

Both Twenty Ten and Twenty Eleven loved header images — they went as far as having their own set of pre-loaded header images. Twenty Twelve, however, does not come with default header images. Furthermore, unless you yourself upload a header image, the header image section itself is not displayed.

Pictured: Paolo Belcastro’s Blog using Header Images in Twenty Twelve

Along similar lines, featured images are not displayed as gigantic banners at the top of posts and pages.

Conclusion

As of now, Twenty Twelve is available only for WordPress.com users. However, users of self-installed WordPress will be receiving this theme in the official repository soon enough (though at the moment, no fixed date has been provided). Interested in the theme and not willing to wait? Check out the demo!

What do you think of Twenty Twelve? Impressive or not? Feel free to share your thoughts with us in the comments!

(dpe)