Calibri & Lucida Grande = 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.
I’ve noticed a lot of people searching for “Calibri OS X” and the like, more than likely sharing the same problem as me – just how do you get Calibri on a Mac? Well, for testing purposes I copied the TTF file from one of my Windows machines over to my Mac and hey presto – it worked.
I’m offering the TTF file as a download here strictly for those wishing to test how Calibri renders on a Mac, who also legally own the right to ‘posess’ the typeface by owning a legitimate copy of Windows Vista or Office post-2006
Download Calibri: calibri.zip
Read more about Calibri on wikipedia: 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. Fortunately, Apple have caught on and have now begun bundling Lucida Grande with the Windows version of Safari, which you can download here: http://www.apple.com/safari/
I’ve also noticed a lot of people searching for “Lucida Grande Windows” and the like, more than likely sharing another problem with me – just how do you get Lucida Grande on Windows machine? Well, luckily for us some clever chap cloned the typeface as a TTF file a few years back and I had it saved on my hard drive. Unfortunately his site is down now so I can’t provide a link, but I’m very grateful, as I’m sure you will be too.
I’m offering the TTF file as a download here strictly for those wishing to test how Lucida Grande renders on Windows, who also legally own the right to ‘posess’ the typeface by owning a legitimate copy of OS X or Safari
Download Lucida Grande: lucida-grande.zip
Read more about Lucida Grande on wikipedia: 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:
Implementation
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.
Disclaimer
I have searched high and low for legitimate ways to purchase both the Lucida Grande and Calibri typefaces but was unable to find any. I have offered the files here for download as a temporary measure in the hopes that somebody may one day point me to a site where I, and my visitors are able to purchase the above typefaces. I will then replace the download links with the purchase links.
Nice dude. I have been seeking out a nice PC font for a while now, always try to specify Lucida Grande but the ugly white box fonts always let me down.
Will give your recommendation a try!
thanks for the excellent tips here — just one detail, you’ve mistakenly linked the lucida-grande.zip to the calibri.zip file
amazing site design btw, love the combination of black with bright colours and the face-based site structure! oh, and congrats on the forthcoming marriage of course, looks like the proverbial match made in heaven ;)
cheers
Hey, just looking on the internet for this font and came across your site & wanted to say thanks for the zip file.
Thanks Again
thanks.. how useful.
:D
Grab the whole calibri set here. Once again strictly for testing purposes only of course.
http://bolaris.oxyhost.com/?do=xtra01
- Bolaris interactive
Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.
Nice. I often start with Lucida Grande and Lucida Sans as a fall-back for PC users. It’s nearly identical to Grande and has come installed on Windows since Windows 98.
Nice recommendation, this post help me.
Question, its this a blog created with Radiant CMS?
Hi Stan, glad to be of assistance! This site currently uses WordPress as a CMS, although I've had to butcher it massively to get it to behave how I wanted.
Calibri is considerably smaller than Lucida Grande. For a an almost identical font to Lucida Grande, use Lucida Sans Unicode. They’re really indistinguishable.
That’s very true. I think my point wasn’t really to find two similar fonts, rather two fonts that aren’t used as widely on the internet as perhaps they could be. It may be a better idea for me to rewrite the entry offering each font as its own solution rather than a combined solution.