However, I couldn’t find a keyboard layout that I wanted to print and look at every day. I found a Mac Keyboard Vector with a CC license and made my own tweaks. I condensed the keyboard, and also greyed-out the keys that are unchanged from Qwerty. Download below:

Mac Colemak Layout

Consider it licensed under the same CC license as above.

For example, I’m working as a contractor on a project using the classic VAG Rounded font. 13px bold looks great in Photoshop comps and Mac browsers, but fails horribly under Windows. I decided to run VAG Rounded Bold through ttfautohint 0.2 to see if it would offer improvements. In short: wow. In the screenshots below, ttfautohint goes head-to-head with the Fontsquirrel generator’s autohinting (which I believe is powered by FontForge).

Rendering modes are shown in the captions. Click for full size. (I’m restricted to screenshots because the font is only licensed for the client site.)

Standard (grayscale)

GDI ClearType

DirectWrite ClearType

As you can see, there’s a dramatic improvement in all 3 Windows rendering environments. 11px-13px sizes move from awful, with completely closed counters, to suprisingly readable. At 14px, the counters open up with standard hinting, but closer inspection reveals other defects such as no separation between the body and dot of the i and j characters. The improvements are even more dramatic under Standard (grayscale) antialiasing, which looks terrible below 18px. Even under DirectWrite ClearType, ttfautohint produces superior results (although a true test would also provide a completely unhinted version to see what the DirectWrite rasterizer is capable of on its own).

The only real downside is a modest file size increase. I haven’t tested across multiple fonts, but in this case our font jumped from 49kb to 63kb. I consider it an excellent trade-off for such improved rendering.

So, you want to use it? Well, first you should support the project. Currently you need to compile ttfautohint, but with our support, Werner will build a GUI version for the command line-phobic. If you’re on a Mac and want to compile, I put together an installation script.

Edit: In an email exchange, Werner pointed out that Dave Crossland—who has done much of the ttfautohint promotion—had the actual idea to use FreeType for hinting, although Werner still deserves massive praise for the execution. Werner also pointed out that VAG Rounded is a good showcase font, and that ttfautohint will not perform such striking results in all circumstances.

I quickly discovered that a good metric for higher-quality fonts was the presence of at least one alternate. The Google Web Fonts directory does not allow that type of filtering, so I built this simple one-off page that allows you to browse multi-variant typefaces. The layout is responsive, and clicking the font name takes you to Google’s specimen for that font.

All listed fonts are all downloaded. It should go without saying that the page will load slowly.

Missed the link above? Go view Better Google Fonts. And, if you like code, it’s on GitHub for your forking pleasure.

Environment Canada is my go-to forecast provider, but their site has been beaten with the Canadian government’s standard website ugly stick. And, while a mobile site exists, it’s not much better. In fact, it’s worse in some ways.

All of this has led me to make a mobile web app version. Or, at least, a mobile web app version for Winnipeg, where I live. I scrape the HTML via a proxy and restyle it in a iOS-esque style. (I might get around to integrating a city-switcher, but that’s a lot of work and I built this for me and for fun.)

I optimized the design for two uses: 1) what are the current conditions? and 2) what’s the immediate forecast? Most other forecast data is hidden by default, but can be shown. There are a few media queries for portrait/landscape view, and I snagged icons from the open-source Oxygen project to replace the drab ones from Environment Canada. It also makes use of HTML5 Application Cache to speed up launch time. And, although it should work anywhere, it’s been heavily optimized for iOS Safari.

View my Winnipeg mobile weather app. The source is on GitHub, of course.

Design Philosophy

I’m a big fan of design constraints. For this project–just like my WordPress theme The Erudite—the major design constraint was “it’s all about the content.” This meant saying goodbye to all the cruft of today’s blogs: sidebars, social media sharing links, ads, and all the junk that distracts from reading the actual content. I might relegate some typical sidebar-type things to the footer (archive navigation, search) but for now I’m really enjoying the minimalism.

Type & Typography

Web design is 95% typography, and this design pushes that to 99.9%. I’ve made use of Robert Slimbach’s excel­lent Min­ion Pro for body text, while head­lines are set in Carol Twombly and Slimbach’s Myriad Pro Con­densed. Both are served by the fine folks at Typekit. I made extensive use of Tim Brown’s Modular Scale tool for all dimensions, which is why the design (hopefully) feels natural. My scale is 18px/15px, Musical Fifths.

Also worth noting is that advanced web typography is still a landmine of browser inconsistencies and outright bugs. I will be revisiting some (painful) lessons learned in a future post.

Responsive Design

Responsive design is fun. Being able to provide a single template that works on a variety of devices and at different screen widths has been the web design holy grail for years, and now we can do it. I targeted the iPad portrait view (768px wide) as the ideal view, as that’s how I enjoy reading the most these days. Browsers that don’t understand media queries will show this style. I adapt the style to varying degrees for widths of < 1024px (wider screens), 431–649px (iPhone landscape), and < 431px (iPhone portrait). I think it turned out pretty well. My focus on content made this process relatively straightforward.

Post Counts

The only non-standard design element I included was a post count. This is an attempt to game myself into posting more often. I’ve set myself the goal of reaching 500 posts by the end of the year, and I now have a constant visual reminder of my progress. We’ll see how successful this self–gamification design element is. Anyone who’d like to integrate this into their own WordPress templates can grab the code.

A Work in Progress

There’s still more to do. Archives and search need to be designed and exposed. I want a better experience for the home page; something to describe myself and the site better to new visitors. If you have any suggestions/critiques, please sound off in the comments below!

But, as I’ve been tinkering with possible redesigns of my personal site, I’ve been playing around with webfonts a lot, a workflow that never crossed my mind when designing it. So, rather than putting my design energy to work on my site design, I decided to extend FontFriend to support custom Font Family lists.

FontFriend’s new custom font family list

This is a feature for front-end designers/developers, so there is no user-facing UI for this feature. Instead, on a site that you want to test webfonts on, you can provide that FontFriend will recognize in one of 2 ways:

1. A data– attribute on the body element

<body data-ff-families="OFL Sorts Mill Goudy,PT Serif,Crimson,Tinos,League Gothic">

2. A JavaScript array

The nice part about the JS method is that you can use your JS console to set the var before invoking FontFriend.

<script>
  var fontFriendFamilies = ["OFL Sorts Mill Goudy", "PT Serif", "Crimson", "Tinos", "League Gothic"];
</script>

That’s it! Use whichever notation suits your workflow. See it in action right now by visiting the updated Soma Web Font Specimen and invoking the bookmarklet (you’ve already installed it, right?).

Readability

The first approach makes in-browser reading better through the Readability bookmarklet. It strips away everything except the text you’d like to read, sized and formatted appropriately for on-screen reading. Safari incorporated Readability technology in its Reader functionality in Safari 5, bringing better reading to folks who have no idea what a bookmarklet is. What I especially love about Safari Reader is that it does a good job of stringing a multi-page article into a single page.

Read it Later

The second approach is using a third party service like Instapaper (which I use and love) or Read it Later to extract the main content from a web page and read it later on a variety of a devices. Both have iOS apps that sync with the service to give you the content you’d like to read, even offline. This is a vast improvement over the old “I’ll leave this tab open and come back to it later” approach that rarely, if ever, worked in practice.

Both of these trends in web reading—especially the first—demonstrate that people are no longer putting up with design that disrespects content. They want design that puts content first, like The Erudite, which has been downloaded 92,832 times as of this writing. Hopefully we’ll see less need for Readability as web designers start making actually readable sites.

The three changes I’ve made are fairly small and revolve around the Body Size Comparison section of four fonts. I’ve substituted Verdana for Tim’s choice of Times New Roman, as Times is rarely used on the web. Verdana, on the other hand, is probably the most widely used and most readable web font of all.

To further aid in this comparison, I’ve shifted the specimen’s font to the right one position. It now has Georgia on its left, and Verdana on its right, with Arial taking the far right position. This way, whether you’re testing a serif or sans within WFS, your font is always adjacent to both its style mate and complement for easy compare and contrast.

Finally, I’ve added a paragraph set in each of the four fonts beneath the comparison section. The whole point of evaluating web type is to ensure that it is legible, suitable—and don’t forget beautiful—when set in the browser. Now you can compare how well your font works in paragraph form against these three web stalwarts.

And, just as you can use FontFriend with the WFS, you can use it with the Soma WFS.

Enough with the chit-chat. View the orignal. View the Soma WFS. Or, grab the Soma Web Font Specimen zip. Go make beautiful type on the web.

One very cool component of this release is that Typekit—who Tim now works for—has integrated the Web Font Specimen into their service. See, for example, FF Meta Serif Web Pro Book.

But the part that makes me blush is that Tim decided to include FontFriend on the new Web Font Specimen homepage as an ideal companion to the specimen. In order to feel like I deserved a spot on there, I’ve added a special feature to FontFriend: it now detects if you’re on the Web Font Specimen demo and automatically updates the font name when you select a font family.

Don’t have FontFriend yet? Go to the FontFriend project page and get it now.

But, for those looking to find the best quality free webfonts, the good folks at Good Web Fonts have put together an excellent list of high-quality free fonts suitable for web use. I’ve discovered some hidden gems there, and it’s now first on my list of places to consult when deciding on a webfont for a new design.