Apple, Blog, CSS, Graphics

Calibri & Lucida Grande - the winning combination

If like me you’re fed up of using Arial and Verdana as the body typeface on web sites, why not experiment with two very beautiful typefaces present on OS X and Vista.

Calibri

Calibri comes bundled as standard with Windows Vista and Office bundles post-2006 and should therefore be present on a large portion of visitors machines.

Link: http://en.wikipedia.org/wiki/Calibri

Lucida Grande

Lucida Grande is another humanist sans-serif typeface and has been included with Apple’s OS since X. It is especially popular among web designers who have seen the light and use Macs, and incredibly envied by those on Windows machines.

Link: http://en.wikipedia.org/wiki/Lucida_Grande

Although Lucida Grande produces absolutely gorgeous body text (especially with Apple’s lovely text rendering engine), Calibri edges it slightly as my favourite of the two because it works just as well as header type, check out this logo I recently designed using Calibri as an example:

Logotype for World of Pools

So, how do we take advantage of these two gorgeous-but-underused typefaces? It’s simple, just add the following to your stylesheet:

body{ font-family: Calibri, 'Lucida Grande', Arial, Verdana, sans-serif }

By specifying Arial and Verdana we are also allowing those users that don’t have Calibri or Lucida Grande on their system to see the text rendered in Arial or Verdana, instead of their default typeface (more than likely Times New Roman, which just isn’t pretty at small sizes).

Problems with this method

I’ll be the first to admit that this solution is far from trouble-free. The most difficult thing to account for is the different sizes, ratios and kerning of the two typefaces. They don’t just differ slightly, they differ a lot. This can lead to problems such as orphans appearing in navigation menus, overlapping elements, all sorts basically. Always test your designs on both Windows and Mac with each of the typefaces turned on and off at different points to test each possible outcome, and try and tweak the font-sizes to cater for all.

The Cult of the Mac

After years of preaching to friends, family and co-workers the benefits of switching over to Macs, I’ve finally managed to rustle up enough money to join the Apple Elite myself. And I’m stoked. The machine itself (a 12″ MacBook) is an absolute beauty to behold and a dream to use.

I’ve been using Macs through work for a few years now but I’ve always longed for one at home. Now I get to combine the best of both worlds with a portable home and office, and I’m continuing to be surprised by its tweakability.

I’ll be writing my own personal guide to The Switch™ over the next few weeks, and listing the invaluable resources I’ve used to get my Mac to do awesome things like detect if I’m near the computer by the bluetooth on my mobile and enable/disable a password-protected screensaver accordingly. But that’s not half of it, sneak on my baby while I’m not looking, get the password wrong and it’ll take your mugshot via the built-in iSight and email it straight to my phone.

Beware, snoops.

The fun is never-ending, and gimmicky fun aside the Mac has already improved my workflow despite having owned it only a week.I am a little worried though, I’m so taken by this machine that in all likelihood I’ll become another dreaded Apple FanBoy™ by the end of the month, seeking to replace any and all of my mediocre electronic devices with their Apple-branded counterparts. If only they made cars.

My set up’s fast becoming something to envy and you can bet I’ll be keeping this blog updated with its developments. Nothing gets me excited quite like some hardcore geekery and audiophilia.

Apple for Life, yo.