1

I am wondering which font in Google fonts is the best font to represent Windows, Mac and Linux system fonts for design mockups?

The reason I am asking is because I and some others are using the PenPot, the collabrative design tool https://penpot.app/, to create some mockups for a cross-platform desktop application.

However, PenPot only allows fonts from Google fonts (to the best of my knowledge), so I am unable to "just use the system fonts" as someone might suggest. Also, other collaborators are on working on different systems, so even if PenPot allowed choosing from local fonts, it would be troublesome.

Anyone have advice on what font to use for the mockups?

Just to clarify, the end-application will indeed use the system fonts. It's just that we need a way to represent the fonts faithfully in the mockups.

Thank you in advance!

Improve this question
5
  • I think what may be "best" is really just someone's opinion. Your opinion about which Google fonts more closely match various system fonts is just as valid as anyone else's opinion. There's no way to answer this definitively.
    – Scott
    Apr 22, 2021 at 21:00
  • Juste google "google font alternative to"+the name of the font you want to match, and you'll have the internet answer. This gave me Lato for Arial, as an example.
    – TheSqu
    Apr 22, 2021 at 21:08
  • @Scott Yes, that is true. But I was hoping someone with application design experience would suggest something close/a middle ground (if there is a such thing) and/or suggest an alternative idea to doing this.
    – Correct Syntax
    Apr 22, 2021 at 21:09
  • @TheSqu I suppose that could work, but it would be a hassle since the mockup needs to be for cross-platform. But then again, maybe I can just use like an alternative to the Windows system font or something (choose just one platform for the mockups).
    – Correct Syntax
    Apr 22, 2021 at 21:11
  • Well, "Segoe UI" is the Windows 10 System font, i google what i said earlier and found "Open Sans" or "Source Sans" ... if you just do the same for other platforms, i don't see the problem here?
    – TheSqu
    Apr 22, 2021 at 21:17

1 Answer 1

Reset to default
0

Actually, Penpot DOES support custom fonts — at least in its current state: see https://help.penpot.app/user-guide/custom-fonts/ for directions.

For a general answer about finding alternatives to system fonts:

In general, I don't think it's the best idea and I'd recommend finding a different path forward. But let's assume you absolutely must find close font replacements for some reason and cannot use a custom font for the app you're designing or use a different design tool that allows you to use system fonts.

In that case, I would recommend looking for metric-compatible fonts of the same type so that your UI doesn't suddenly break when it's rendered with the system font. That's often hard to pull off, but system fonts are the one area where people have tried to create metric-compatible alternatives. Here's a list you can draw from: https://wiki.archlinux.org/title/Metric-compatible_fonts

For each platform:

  • macOS uses San Francisco, which was developed to be metric-compatible with Helvetica Neue. Arial was developed to be very similar to Helvetica — probably not precisely metric-compatible, but close enough. And Arimo, a Google font, was developed to be metric-compatible with Arial. So Arimo is your winner!
  • Windows uses Segoe UI. Microsoft developed a metric-compatible alternative called Selawik, but it's unfortunately not on Google Fonts. You can use a similar-looking font like Noto Sans here, but know that your layouts might break a bit.
  • Linux does not have one system font, it's up to the distribution. Fortunately, Linux distros almost always use open-source fonts, and many of them are on Google Fonts. Which ones you'd like to design with in mind depends on you and your target audience. Some common ones are GNOME's Cantarell, KDE's Noto Sans, and Ubuntu's Ubuntu.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.