18 thoughts on “Typography

  1. This is great guys, awesome work.

    I think it would be great if color values were included too so we don’t have to open up the source files.

    I think many of us print them out already for easy reference so it’ll be a lot more useful to also have the color’s hex values upfront.

    1. Hey Orly, I’m not sure what you’re asking. If you’re asking what our font stack is, it’s Helvetica Neue, Helvetica, Arial, sans-serif. If that’s not what you’re after, would you mind reframing your question?

  2. This statement ‘Helvetica Neue LT is the primary font in the design language system.’ is misleading and is almost certainly liable to be misconstrued.
    In the detailed png that has been attached- of the nearly 15 or so font-size/font-family combinations described, only 2 or so start off as Helvetica Neue LT as the base family.
    You should get rid of that statement alltogether, as most developer are likely to set the .body to that suggestion. The default for .body should be Helvetica Neue and not LT.
    If necessary you can then add your own opinion on the LT version but stating that as the first sentence is more than likely to lead application developers to some confusion.

  3. one more input-
    the comment thread uses the same font as the main introduction paragraph. At a minimum it should be set to a smaller font size. And, if feasible, the font-family across the page should actually be helveticaNue,helvetica,arial,sans-sarif just to emphasise the point. Right now its ‘open sans’,helvetica,san-sarif.

    1. Thanks for pointing this out – a lot of different people made our psd’s and specs and I hadn’t realized that we weren’t specifying the Helvetica Neue LT. We are actually changing everything to use these fonts only… If you’d like to talk more, we can set up a chat.

      1. Resurrecting this thread.

        One of my developers also included “LT” into LESS (@fallback: “Helvetica Neue LT”, Helvetica, Arial, sans-serif;) because she wanted to follow the Harmony Guidelines. The font on the page turned out a little weird. But once we removed the “LT” it was fine.

        It might be helpful to clarify via a section (just like what you guys did for the REM and px) what font-family developers should be using in CSS.

      2. Hi Brigitte,

        Harmony currently owns a license for Helvetica Neue LT only. We do not own the rights to use or host the Helvetica Neue font. Please send us a screenshot of the issues you are having with using LT in LESS.



      3. Hi Bikramjit,
        Here’s the GitHub link to the repo for the Harmony UI components on GitHub:

        I don’t believe they are using any LESS, but are using a mainly a combination of CSS and SCSS. There are also instructions for how to setup the environment which includes a node server. Let us know if you have any other questions?


  4. Hey guys, do we have Capitalization rules? While I design I notice in our current practice there are both “Title Case” and “Sentence case”. I think it would good if we standardize this, say, in title for forms, we all use “Title Case”, things like that. For high-standard design, I feel it’s not bad to be meticulous.

    1. Thanks Rongfei – good call! We do have these rules (almost everything should be sentence case, not title case) and we are actually going to be adding these to each pattern.

      Our content folks have their own styleguide with these rules, but we are working on consolidating everything. I agree this would be very helpful for anyone working on designs…

      1. Thanks Dorelle, I think it’s natural to label things in “Title Case” especially in titles and button copies (in our site, example: http://cl.ly/image/1s1h0k051m11 ), that’s why specification will help. Thanks for clarifying and looking forward to the rules.

      2. FYI – most teams have folks responsible for the copy throughout – and they do follow very specific rule. And we most definitely do not use title case for buttons. We very rarely use it for titles – however, on the marketing side of things there is a little more flexibility around text on the page.

Leave a Reply

  • Was this Helpful?