14

Ask DN: Popular User Interface Fonts?

6 years ago from , Product Designer

Hi guys,

It would be interesting to know what you guys are using as fonts for your web applications?

25 comments

  • Vladimir BabicVladimir Babic, 6 years ago

    Paid - Whitney, Proxima Nova, Avenir, Din Free - Open sans, Lato, PT sans

    13 points
  • Numecca .Numecca ., 6 years ago

    .

    5 points
  • Ed AdamsEd Adams, 6 years ago (edited 6 years ago )

    Going by what Slack, CodePen, and a bunch of other major sites use for their UI, I'd feel confident using Lato. Tons of weights available, clearly proven to work for UI, and it's hard to argue with free!

    I also like PT Sans though am not really sure how well it'd work for UI.

    3 points
  • Kyo NagashimaKyo Nagashima, 6 years ago

    I think web application should use native user interface font (San Francisco, Lucida Grande, Segoe UI, and so on) too like a desktop application. This is very important to non-latin users.

    3 points
  • James Taylor, 6 years ago

    I'm using a lot of Avenir, Open Sans, Lato.

    Helvetica Neue as well but at really thin weights it definitely affects readability.

    1 point
  • Kushagra Agarwal, 6 years ago (edited 6 years ago )

    I just use Proxima Nova everywhere. Like f*cking everywhere. It just makes everything look good.

    1 point
  • Brian A.Brian A., 6 years ago

    I've been using Work Sans recently. It was specifically designed for on-screen use and reads well at a wide range of sizes and weights.

    Clear Sans is also really nice, but it hasn't gotten any love since 2013. :\

    0 points
  • ミンニシオ 。ミンニシオ 。, 6 years ago

    Gotham Rounded

    0 points
  • Florian RiederFlorian Rieder, 6 years ago

    I do like Fakt Pro from Ourtype.

    The License is onetime for web, it has a lot of weights and glyphs. It also has a Slap version, so you can combine it.

    0 points
  • Sean O'GradySean O'Grady, 6 years ago (edited 6 years ago )

    I like the use of Concourse in Overcast. Its on my "next to use" list

    http://concoursefont.com/

    0 points
  • Sam SolomonSam Solomon, 6 years ago

    Rebuilding our fantasy sports application, SidePrize, with Blender Pro it previously used Ubuntu.

    0 points
  • Surjith S MSurjith S M, 6 years ago (edited 6 years ago )

    When in doubt, use these fonts

    0 points
    • Laurens SpangenbergLaurens Spangenberg, 6 years ago

      I disagree with some of these choices.

      Given that this article aims to give "standard" kind of typefaces for designers to use, it seems odd to include Roboto and Raleway. Roboto in my experience sometimes makes a design feel very Google/Android-like, not platform neutral. Raleway on the other hand isn't good for body text, and not giving any hint that it's best suited for headers isn't the best idea.

      Garamond and Baskerville were designed to be used on paper, not the screen.

      3 points
      • Surjith S MSurjith S M, 6 years ago

        Its all personal preference and related to what kind of project we are doing. Roboto works great on headers and large sized copy. So its up to you to choose it for body or headers.

        And there's no rules for to use only in paper. Doesn't that look good on screen? I've seen many uses of these fonts which works great.

        0 points
        • Ed AdamsEd Adams, 6 years ago

          We're talking about fonts specifically for UI. For example, the fonts used on Medium are gorgeous and work great when applied to a large body of text but they would not be good at all on a tiny screen smartphone device as a label for a UI element. The article you linked is not bad for general-purpose, i.e. non-specific just slap it in and it'll work anywhere fonts, but they may not be great to use as part of a UI.

          0 points
  • Lee Mahayati, 6 years ago

    you can check popular font being used here http://www.fontreach.com/#top

    0 points
  • Kanika Seth, 6 years ago

    Open sans, roboto, montserrat mostly

    0 points
    • Ed AdamsEd Adams, 6 years ago (edited 6 years ago )

      I think Montserrat is a bad choice, due to not being very readable at tiny sizes and not having a good selection of weights (see later comments). I think the supposed normal (400) weight is far too heavy. It also doesn't support italics.

      0 points
      • Surjith S MSurjith S M, 6 years ago

        Montserrat works great on headers and uppercase letters. But its not a bad choice :)

        1 point
        • Ed AdamsEd Adams, 6 years ago (edited 6 years ago )

          A good UI font should be flexible enough to work at small sizes, upper and lower case, italics and so on. I know that not many UI elements use italics, but a good UI font should have them. To use a fairly extreme example: making all your UI text uppercase just because your font looks bad in lowercase doesn't seem sensible to me. I suppose we'll have to agree to disagree. :)

          0 points
      • Dajo Revyn, 6 years ago

        Montserrat has 8 weights, from hairline to black.

        1 point
        • Ed AdamsEd Adams, 6 years ago (edited 6 years ago )

          Correct! Updated post accordingly. Only 400 and 700 are available on Google Fonts which was my point of reference.

          0 points
  • Kristaps Elsins, 6 years ago

    My top i guess is pretty standard:

    Source sans pro, Roboto, PT sans, Open sans, San francisco

    0 points