Mac-specific tweaks for gorgeous web sites
Mac users have long enjoyed visual superiority over their more populous PC rivals, with a more beautiful interface, finely tuned font smoothing, and a refined overall user experience. Web sites can be made to take advantage of those Mac perks, by adding in a few bonus features; these will not adversely affect sites viewed on PCs, but will rather enhance the user experience for lucky Mac users.
My first tip is the use of Helvetica Neue, or more specifically, Helvetica Neue Light. CSS actually already has built in capacity for fonts of variable weight, far more comprehensively than the simplistic ‘normal’ or ‘bold’ options. While very few fonts cater for this sort of wide range of weights, there are some that have a lighter variation. You probably won’t notice the difference on a PC due to its insufficient font rendering (this is the fault of the operating system, not the individual browser), but on a Mac you will see the font perfectly - light, thin, elegant, yet quite readable, giving your web site a more sophisticated feel.
However, it is worth pointing out a few potential pitfalls before you start integrating this into your web site. Not all computers have Helvetica Neue Light, so don’t rely solely on that - make sure you have other fonts specified too as backups. Also, Safari doesn’t recognise the font unless you call it something slightly different, which Firefox doesn’t recognise, so you need to include both versions for it to appear correctly in both; in the example below the Firefox version is listed first, the Safari version second. In addition you will need to reset any styles using font-weight:bold to use the default Helvetica Neue font, otherwise you’ll find some strange effects coming into play where Mac OS X tries to boldify the light typeface, making it rather blurry; see the code below for solutions.
- body {font-family: "Helvetica Neue Light", "HelveticaNeue-Light", Helvetica, san-serif;}
- strong, b, h1, h2, h3 {font-family: Helvetica, san-serif; font-weight: bold;}
My second tip is for Safari only, and enables you to include a Mac-like rounded search box on your web page, similar to what you would find on Finder windows and suchlike. It’s a beautiful widget that can be easily used on a web page by type of input from ‘text’ to ’search’. This is not an official HTML attribute value and as such will not validate, but neither will it break on other browsers - on anything other than Safari the search box will be rendered as a text box.
- <input type="search" ... />
Matthew