How can I visually compare OSX fonts with my primary webfont choice to determine fallbacks without an OSX device?

How can a freelance web designer who doesn’t own a Mac visually identify and compare fonts similar to their primary webfont choice, that are present on most OSX devices?

I need to define a fallback font stack for a website for:

  • when webfonts fail to load/render
  • decrepit browsers on older Apple systems don’t support webfonts
  • The font that sometimes appears before the webfont renders in some browsers

    (I’d prefer for it to be as close to the webfont as possible to lessen the appearance of change when the webfont does render)

I’ve found a tool called CSS Font Stack which lists common Windows/Mac fonts and their availability, but it only renders the Windows fonts for me, and the default stacks aren’t great, so it’s almost as time-consuming as looking up a list and checking each individually, and I still don’t have a way to see the Mac fonts rendered in paragraphs, headings, different font sizes etc.

There are also many exhaustive lists around that will take ages to peruse, find and compare fonts well. This is quite a simple part of a website design project, and shouldn’t be given too much time, but it is a requirement of a well-rounded website design.

Is there a resource anywhere that I can use to quickly render Mac fonts reliably, or at least a decent list of screenshots of the available fonts on OSX sorted into type categories?

What can I do to find similar fallback fonts available on OSX, when I don’t own a Mac?


Oh, there are ways. Here are some options in order asc from shitty and easy, to less shitty and hard.

  • Rely entirely on this one article and make sure to always use serif or sans-serif as the final font in your list.
  • Check out the OS font stack for OSX on wikipedia. Google around for type specimens for those fonts, and trust that it looks ok in your usage.
  • Do the same as above, but actually check to make sure it looks ok on the computer of a friend who owns a mac. What no friends with macs?
  • Semi-legally install OSX into a virtual machine on your Windows PC. There are *cough easily accessible instructions online. Then view your website on there.
  • Buy and iPad, and view your website on iOS. iOS and OSX available fonts and rendering are remarkably similar.
  • Buy a Mac.

Source : Link , Question Author : Dom , Answer Author : Fresheyeball

Leave a Comment