5

The question is quite self evident. I'm asking how to do something that is a small yet common requirement during a website design project. I am genuinely facing this problem and trying to solve it.

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

It's not tech support, I'm not asking how to do something localised to my machine, I'm asking for a workaround to do something OS-specific when I don't own a device with that OS on it. A very common need in website design.

There is also a decent answer, with a few options. This is clearly not an easy task. There is no place where this is answered properly on the internet, at least I can't find it.

Furthermore, over 50% of the questions on this site can be much more easily Googled than this.

Please explain why I can't be helped with my fairly common design problem?

I've chosen not to ask at least 10 questions in the last year, simply because I couldn't be bothered to deal with the constant battle with regular users. Even though all of those questions stemmed from genuine design issues, I felt/feel heavily discouraged by the fact that I'll have to explain the inner workings of my entire project before anyone just says, "yeah that is actually a design-related issue, here's a possible answer".

4 Answers 4

Reset to default
11

I 100% agree (also voted to re-open).

If you see a question and you think "Tsk, that's easy, I know the answer to that", the button to press is labelled Post your answer, not Close.

It's not just because what seems obvious to one person isn't obvious to another. Often, questions aren't as simple as they first look.

Suppose this had been left open, and someone posts a very short answer:

There are lots of lists available online. Here's one from Apple [link], here's one from Wikipedia that has thumbnails [link].

That's useful for someone who didn't think to look there or chose search terms that don't lead there, and it took almost no time to write. It gets a green tick and an upvote or two. The asker benefits, the answerer benefits.

Then someone else comes along and comments:

Here's an even better list with high quality preview images, from a lesser known site that doesn't rank highly on Google. It also has tickboxes for other OSes so you can instantly see which fonts have good coverage.

...and that page just got even more useful.

Then someone who has faced the exact same situation comes along, knowing that there's slightly more to it than this...

You can look at lists of fonts online, and that's a good start. But there are two additional things you need to be aware of:

  • There are subtle differences between how fonts render on different operating systems due to different approaches to anti-aliasing. Here's a font that looks great on OSX but crusty on Windows [example]. Here's a font that looks great on Windows but clunky and misshapen on OSX [example]. A good way to test for these sorts of issues if you don't have a device handy is an online screenshot-generating tool like [I was going to say Browsersnaps, but it seems to have died]
  • Apple sometimes create slightly different versions of fonts to what are distributed elsewhere. For example, the cut of Gill Sans on a Mac has a bolder bold than the cut you can buy on Windows. This is usually the case with older fonts created in the pre-digital era where Apple digitised it from a non-digital source. If you're previewing your design in a fallback font on Windows, it might be worth checking previews of the different weights and forms (e.g. italic) you intend to use, to avoid surprises.

That's the beauty of sites like this. There are many cases where it seems a question is answered satisfactorily, then someone comes along and adds a great answer pointing out a whole extra layer of subtleties.

Don't assume you know everything and stand in that person's way.

It's arrogant to assume that your answer is the best possible. We've all had times when we thought we 100% answered a question, then someone surprised us with something better or some consideration we hadn't thought of.

I've chosen not to ask at least 10 questions in the last year, simply because I couldn't be bothered to deal with the constant battle with regular users

Yup. It's infuriating. We're actually one of the less-bad SE sites for close-happy-ness, but it's still enough to cause a problem.

For example, I didn't even think about joining the "post one non-software question a week" challenge, even though I like the idea, because I just don't enjoy feeling like a performing seal jumping through hoops so people who want to answer a question are allowed to do so. Software questions are the only questions I've asked that haven't attracted close votes. I ask non-software questions when I need to, and I'd like to ask more, but I wouldn't do it for fun because it's just not worth the "No soup for you!" factor.

The close system is valuable, but it gets mis-used a lot. This is a textbook example: we created this close reason for tech-support questions like "Photoshop crashed again, what's wrong?" or "How much RAM does InDesign need?", and this question is nothing like that. If you personally aren't interested in a (non-duplicate, on-topic) question, just leave it. Some designers still use fallback stacks and don't have a Mac handy. Let them answer it. Close the tab, not the question.

3
  • 3
    Beyond completely agreeing, all I can think of to say is don't think this will be heard as loudly as it should. It stems deeper than my question, and I hope people see it. This would make a good meta post itself, but that's a lot of work just to annoy valuable users and bring a negative vibe.
    – Dom
    Commented Apr 20, 2015 at 18:02
  • 4
    Yeah, I was actually just thinking what's the positive to this negative, and was thinking maybe a post along the lines of "Before hitting 'close', please imagine yourself explaining your reasoning in a meta reply. Then look back over your explanation. Does any of it actually answer the question? For example, 'You can find this easily at X place' or 'This is the wrong question to ask because reasons'? If so, don't vote to close, post it as an answer to the question!"
    – user56reinstatemonica8
    Commented Apr 20, 2015 at 18:10
  • 2
    Good argument and fair points.
    – Scott
    Commented Apr 20, 2015 at 18:34
4

I think the question may be poorly worded.

As I read it, it merely asks "what fonts are part of OSX so I can set fallbacks properly?" This is easily answered via a Google search.

Finding the names of the fonts, then looking at an image online is something which only needs to be done once and you can create a reference. It's not like Mac fonts number in the hundreds or even dozens. There's like maybe 15-20 fonts.

The whole VM route or system seems like a poor answer to me and extreme overkill. I don't run Windows here, but I can easily find out what Arial looks like. And even go so far as to install an Arial version on my Mac. So.... I'm left wondering what is it you feel is so complicated? I must be missing it. Unless.....

If you mean "How can I see my web designs rendered in fallback Mac fonts without a Mac?" that's a different question. And not at all what I would have gleaned from your question. But the other answers here would seem to indicate some did get that from your question. I did not.

4
  • This is a good response. I think the Arial example is a good one. The rendering issue, I agree, is an entirely different (and valid) question.
    – DA01
    Commented Apr 20, 2015 at 19:00
  • 15-20 Mac fonts? Is that really all there are? If so it is a lot easier than I thought. Or do you mean only 15-20 many with very good support?
    – Dom
    Commented Apr 20, 2015 at 19:41
  • 1
    15 to 20 installed alpha-numeric with the Mac OS, yes. There are another 15-25 Cyrillic or foreign fonts installed, but you wouldn't be falling back to simplified Chinese in most cases. In general, the typefaces you'd use for standard serif or sans-serif type are really only a handful.
    – Scott
    Commented Apr 20, 2015 at 19:45
  • 1
    If you look here: en.wikipedia.org/wiki/List_of_typefaces_included_with_OS_X and only pay attention to the font names in Blue (clickable) those are the only one's you'd need to be concerned about. And not even all of those. Families like Charcoal or Zapfino aren't going to be widely usable.
    – Scott
    Commented Apr 20, 2015 at 19:47
1

How can I determine an OSX-friendly fallback font stack when I don't own any Apple devices?

That question, in and of itself, is easily answerable via Google:

https://www.google.com/search?q=OSX+font+stacks

However, in your comments above, you seem to be asking a very different question:

I'm not looking for any old Mac font, I want to find some that are close to my first-choice webfont

That isn't easily google-able. However, it's also heavily subjective and opinion based. It would all depend on what font you've chosen, in what context, and your opinion as to what would be an acceptable alternative. Regardless, one wouldn't need OSX to make that decision. They could just use the list of fonts available and compare them on myFonts or the like.

Please don't be discouraged to ask questions. There's nothing wrong with a question being closed. That's just how SE works. Lots of good questions simply aren't good SE questions.

UPDATE: Based on your edit...

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

The VM solution may work. I'd still argue it'd be much easier to just look at the fonts you want to compare visually. That's typically how it's done. Easiest way may be to simply print out a list of the common OSX typeface samples and hang it on the wall. A good old-fashioned type-specimen sheet.

A few ways to go about that:

  • Use Google images to find examples of the typeface in question
  • Use myFonts.com to set sample text in each OSX font and screen shot them
  • Purchase/download the typefaces and install them on your PC.

Do note that there aren't a whole lot of options to begin with. There's maybe a dozen truly universal OS-centric typefaces (add a few more if you want to include MS Office fonts). Given the nearly infinite range of fonts you can embed on a web page, you may find that for a lot of typeface choices for web-fonts, you really can only come down to it being 'sans vs. serif'. For example, there are a lot of sans-serif typefaces that may not be any closer to default Helvetica than they are to default Verdana. (In other words, it may be not something one needs to overthink.)

8
  • You're update is basically a potential solution, I'd still have an issue with seeing how the fonts render at different font-sizes (mainly for "elaborate" fonts in headings), but if that wasn't a going concern it would be a solution. Do you see it as an answerable on-topic question now though?
    – Dom
    Commented Apr 20, 2015 at 17:41
  • @Dom yes, but I don't think the answer may meet your specific desires. Typically/historically, graphic designers compared type by just looking at type. They wouldn't set an entire document in a particular typeface to compare it. Instead, they'd look at a specimen sheet and make a judgement call. Even today that's how it's done, albeit online. They go to myFonts (or the like), find a typeface, and take a look. If they think it will work, they buy it then use it. There's isn't a highly technical level of comparison. It's like choosing colors, really.
    – DA01
    Commented Apr 20, 2015 at 17:43
  • So, perhaps there's an even broader edit/question that can be asked: "How do graphic designers compare type options?"
    – DA01
    Commented Apr 20, 2015 at 17:45
  • That may be more accommodating to a wider range of answers, maybe a bit broad though? I'm open to simpler answers than the VM option, I'm just championing that because it's a good long term solution that fits my personal needs really well. Digital fonts is a little niche in itself with quirks and pitfalls that I feel really should be considered differently from print/printed-out fonts.
    – Dom
    Commented Apr 20, 2015 at 17:54
  • "that fits my personal needs really well" = I think that's the challenge here. It is a broad question, but you have a very specific preference. There's nothing inherently wrong with that, it just makes it a tough SE question/answer. FWIW, I don't think most graphic designers put a lot of thought into digital fonts vs. pre-digital fonts. It's all a continuum of typefaces and the methods to pick and choose them haven't really changes in the past 100 years. The only big difference is that there are fewer printed type catalogs and more online.
    – DA01
    Commented Apr 20, 2015 at 18:06
  • I'm trying to think of an analogy. The best I can come up with is picking a song from iTunes vs. Vinyl. It's still essentially the same process, though one can argue iTunes has brought a bit of convenience in that you can sample a whole lot more a whole lot faster (though sometimes, that's a detriment to the process...there's a certain appeal to having a limited palette to begin with.)
    – DA01
    Commented Apr 20, 2015 at 18:08
  • What you call 'a specific preference' I can't really disagree with, but it's definitely not a preference localised to me. Simplified: a freelance designer only has a Windows computer, but needs to see roughly how the fonts in their design will render on OSX so that they can choose some appropriate/similar OSX-specific ones. Maybe including the webfonts fallback details is the OTT part.
    – Dom
    Commented Apr 20, 2015 at 18:32
  • @Dom I guess my point is that most graphic designers don't need each operating system to choose typefaces. Of course, one should have both OSes in general for testing web sites, but in terms of choosing type, it's not something that people tend to do in the browser. It's much more of an analog decision making process. Alt way of putting it: I don't think this is a "common design problem" at least in the way I'm interpreting the question.
    – DA01
    Commented Apr 20, 2015 at 18:59
1

This is just the answer to your argument that it can not be Googled. If you Google for "fonts that come with OSX" you get the list of typefaces included with OSX.

Which list the fonts and has (crappy) thumbnails for what they look like. You can then use a font purchase site to get individual fonts in accurate preview.

So I would say that you can Google this pretty quickly. I don't necessarily consider the question bad, so I didn't vote to close. But then you dug your own grave, and not listening to the answers.

Anyway, the answer isn't complete. Another way would be to use one of those what-does-my-webpage-look-like-on-other-devices kind of services that would take screenshots of your page on a Mac. Start by searching for "What does my webpage look like on other devices".

Anyway, I've voted to reopen the question, though you could word your question differently.

13
  • Thanks for the answer but that list doesn't help at all. I'm not looking for any old Mac font, I want to find some that are close to my first-choice webfont. I can't use that to compare the fonts properly in their context so I'm essentially still at square one. The entire workflow could potentially take hours/days, just for a simple fallback font stack? "Surely there's a better way...?" Hence the question. Thanks for voting to reopen, what would you suggest changing?
    – Dom
    Commented Apr 20, 2015 at 16:45
  • @Dom So did you try something like crossbrowsertesting.com
    – joojaa
    Commented Apr 20, 2015 at 16:47
  • @Dom what do you mean 'in their context'? There's dozens of sites out there that list font stacks for you. As stated, you can simply download these fonts yourself and put them on your PC if you want to see them in a very specific context. But at the end of the day, font stacks aren't a science. They're as much opinion as anything.
    – DA01
    Commented Apr 20, 2015 at 16:50
  • @Dom you shoudl look at the video in crossbrowsertesting.com/demo/jquery that shows he takes a connection to a virtual machine to test this.
    – joojaa
    Commented Apr 20, 2015 at 16:52
  • All I'm reading is there's no way to do this quickly. Spend many hours on it - for each project. I've got an answer I'm happy with anyway, at least with a VM I can reuse it easily for each project after investing a little bit of initial setup time. I'll reword the Q.
    – Dom
    Commented Apr 20, 2015 at 16:59
  • @Dom can you explain what you intend to do via the VM route? Maybe understanding your solution will help us better understand the problem you are trying to solve for.
    – DA01
    Commented Apr 20, 2015 at 17:06
  • @Dom quickly is relative, even vms are slower than your native os at times unless you have a dedicated disk for the os. But yes ALL my projects run on virtual machines as its easy to back it to a previous state.
    – joojaa
    Commented Apr 20, 2015 at 17:06
  • my point is that multi operating is different than normal computer operating. So while you would page in page out for one browser whan you have 50 you should page in all at once.
    – joojaa
    Commented Apr 20, 2015 at 17:08
  • @DA01 please see the updated q, and let me know if it's still not clear why.
    – Dom
    Commented Apr 20, 2015 at 17:20
  • @Dom I've updated my answer as well in hopes of trying to address that edit.
    – DA01
    Commented Apr 20, 2015 at 17:36
  • 2
    Shouldn't the addition to the answer be on the actual post, not this meta post?
    – Zach Saucier
    Commented Apr 20, 2015 at 19:12
  • @MarkMussler perhaps but the thread was closed at the time
    – joojaa
    Commented Apr 20, 2015 at 19:40
  • @joojaa I appreciate your advice, I think VMs are the way to go for almost all advanced tech needs, it's just dealing with the initial learning curves that's making me drag my feet. Finding out Mac works on a VM as well pretty much seals the deal. I'm happy. :) (I didn't get the part about paging in/out?)
    – Dom
    Commented Apr 21, 2015 at 1:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .