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.

I also did the long-overdue task of combing through the theme (which was based on the old Sandbox theme) and removing all deprecated function calls. Scary.

Also in this release are a few new translations from intrepid translators: Polish (props Paweł), French, (props Vermont), and Indonsian (props Cahya).

As always, the download is on the project page if you’re too impatient for it to show up on WP.org.

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.

The Erudite 2.6.1 is a maintenance release packing a lot of power for such a little increment. It includes:

• Better support for the upcoming WP 3.0’s custom menus. You can now explicitly set a menu as your “Header Menu”.
• Properly internationalized some strings that weren’t previously. If you’re a translator, update to the newest the-erudite.pot in the translations/ directory.
• Removed previous use of get_the_modified_author() in favour of get_the_author(). I have no idea why I thought the former was ever a useful idea.
• Added a Swedish translation. Props Fredrik.

EDIT: I neglected to add the Norwegian translation to 2.6.1, so 2.6.2 includes that. Thanks Rune!

As always, you can download from the project page while waiting for it to show up in the themes directory.

In 1.3 I tweaked the label UI handling to work properly with recent updates to label handling for custom post types, and cleaned up the code a bit. Go to the project page to download 1.3.

As awesome as they were, they required an explicit width. This meant that they didn’t adapt gracefully to different labels—you had to explicitly set a width on the buttons that might not fit the actual label properly. This had been necessary to get the nice inner white border, which I’m now using two instances of inset box-shadow to replicate (many CSS3 declarations allow for multiples, such as background-image and box-shadow). I would have preferred to do it with only one declaration, but box-shadow: 0 0 1px #fff inset; produced too dim of an inner border for my liking.

I also wanted a better-looking button depressed state. I emulated the inner shadow typical of OS X Leopard-era buttons with a third inset box-shadow on the :active state, as you can see below. Pressing the buttons feels really awesome if your browser supports CSS Transitions.

States: Normal, Hover, Active (left to right)

Speaking of CSS transitions, they’re now used consistently on the :hover state, by changing the background-color on hover instead of changing the gradient (gradients don’t currently animate in a transition). I also did a bit more work to make it cross-browser friendly: I used backup colors wherever rgba() notation was used, as well as a gradient.png fallback for browsers incapable of CSS gradients.

Here’s a few things I found along the way:

• Firefox 3.7 nightly (which will be FF4 eventually I think) renders the buttons the best.
• WebKit doesn’t actually support inset box-shadow yet in Safari 4 or Mobile Safari. So, they get left behind for now. But WebKit nightly and Chrome have landed support for inset box-shadow.
• WebKit currently has a fascinating bug with inset box-shadow and transitions. Using WebKit nightly or Chrome, try clicking on the “Wonky Webkit Transition” button. The box-shadow starts on the outside and then snaps to the inside at the end of the transition.
• Firefox does weird things with an :after pseudo-element placed on a button element. I did some hacky things to work around that at the default size using @-moz-document. Not awesome or recommended.

Without further ado (and I use the phrase only to plead with the people of the world who say “without further adieu” to STOP DOING IT WRONG), check out the Realistic CSS3 Buttons Redux demo.

2.6 includes support for WP 3.0’s new nav menus, which puts you in full control of your header. If you have only one nav menu, it’ll use it. If you want to user more than one nav menu, be sure to call the one you want in the header “Header”. If you don’t have any nav menus, it’ll fall back to 2.5’s pages or category behaviour.

Some other things that were included:

• A Belorussian translation
• an option to disable visual editor styles
• lots of code cleanup - got rid of some deprecated functions

Also, The Erudite is now on github! I’m probably going to move all feature requests/bug reports over there, as the comments section on the project page has gotten pretty unwieldy.

Print, April 2010, p.80. Click image for full size.

Print doesn’t seem to put much of their magazine’s content on their website, so I took the photo above. If you don’t feel like reading the grainy iPhone photo (no, I wasn’t about to spend $20 just to stroke my ego), here’s the full text:

Occasionally during a web project’s construction phase, the designer will decide that the type doesn’t look quite right. This is often due to slight but still noticeable differences between Photoshop’s text rendering and that of the multiple browsers a site has to support. In response, the designer sometimes has to do multiple rounds of slight tweaks to size and spacing.

To help with this, Soma Design’s Matt Wiebe offers the FontFriend bookmarklet. Just drag it to your browser toolbar, activate it on the page you want to edit, and a panel is exposed that can be used to edit a selection of the most common browser text settings. A few simple presets are offered for text that is affected, but the power of the jQuery Javascript library’s selector engine is available for more specific selections. (An explanatory link is provided from the panel, but it’s anything you could do with basic CSS syntax, and more.)

Ideally, the task of using FontFriend would be handed off tot the designer directly, who could send final modifications straight to production.

For more progressive web designs using the new @font-face possibilities, the bookmarklet can take care of a new feature in Firefox 3.6 that allows you to drag a font file directly onto the panel to select the family of your choice.

Non-present fonts show up as monospace

It’s also a small update because FontFriend is even smaller - I’m now minifying it (using YUI Compressor), which brings the total size from 12.5K to 10K. Not a huge savings, but every bit helps, and I made my first build  script in the process.

Because it pulls directly from Google Code, there’s nothing to do other than see the new version show up. (Clear your cache if you keep seeing 2.1.)