10

Question: Design System and Typography Limitations

over 1 year ago from , UX Designer @neue.world / Curator @UXHunt.com

I have been working on Design System for past few months now, carefully analysing a lot of existing UI Kits out there and also planning on building my own. But I haven't been able to understand the limit of typography we should stick to, or there is no such requirement to limit them. The reason being the following:

  1. When you build something for Web, you know you are defining H1 to H6, paragraph, links and a few more. But there are situations where a H5 can be bold and can also be regular. How do you handle such a situation?
  2. When you are building an app, I noticed a lot of UI Kits where the OP has defined more than 20 fonts for about 50 screens. While when I am building a mobile app for my clients, I usually use maximum of 6-8 fonts that fit almost all scenarios.

The spiral I get myself into is, what is too less and what is too much. From a Designer and Developer point of view to make sure when I hand it over, the Dev shouldn't feel it's too messy and has too much inconsistency and probably one single font has been defined to make it aesthetic only in one particular place.

I hope I was a bit clear with my question. I would appreciate some help.

10 comments

  • iterati designiterati design, 1 year ago

    Don't build the product out of the DS, build the product first, extract and systematize everything you're using there.

    As Kemie said, start small. Don't overthink it, it'll never be perfect – in reality it's always messy.

    2 points
    • Jayant RaoJayant Rao, 1 year ago

      Got it - kept feeling like messy isn't how it's supposed to be. Haha!

      0 points
  • Kemie GuaidaKemie Guaida, 1 year ago

    My general advice is: Start small and grow. Design the components you are currently using, in the cases you're currently using them with. It's good to think ahead to other cases where those components could be used, but don't sweat hypotheticals. You will be iterating on the design system constantly.

    20 fonts sound crazy. I'm guessing the developers of these kits use that many to provide options to users, not to have them use ALL. In my current design system I'm using 5, and they're variants of the same family (light, regular, italic, bold & bold italic of the same family). Focus on max 2 typefaces (display & text or one for both) and the minimum number of variations.

    About organizing your text styles, I do have variations. so I'll have h5, h5 inverse, h5 primary, for example. Just think carefully about when it makes sense to have a variation, when it's better to have an exception, and when you're better off using a completely different element/style altogether.

    2 points
    • Jayant RaoJayant Rao, 1 year ago

      Great, I think the first paragraph made a lot of sense. I generally agree with you, I use 5-8 fonts maximum of the same family. And 2 max typefaces.

      Regarding variations, I never really thought of it that way. But that's a good idea. Thanks for the advice!

      0 points
  • Rui Sereno, 1 year ago

    This is the sort of post I love at Designer News. Happy to share my thoughts with you.

    As Taylor Palmer said, UI Kits are not based on reality.

    One very important thing is to lay out the requirements beforehand. One of the reasons we like to start with Wireframes, besides many others, is precisely because it allows us to have an understanding of all the required components in advance. It will enable us to create the final UI having a much deeper consideration of the components.

    In fact, we like to stick to as few components as possible and reuse them likewise – I mean for Products, not for websites – because on the Development end it will also save time. And, as you know, everything comes down to time and budget.

    Answering your questions:

    1. Once a style is defined it becomes a rule. Then we stick to them and work the Design around the available components. Unless there's a flagrant lack of a certain component, we try to reuse them as much as possible.

    2. 20 fonts are just nuts! 6 to 8 sounds good. But keep in mind it will depend on a multitude of factors around the product: complexity, size, etc... So, there's not actually a one size fits all for these situations.

    Allow me to share some stuff with you. It is something we create for every product which is then shared with our Development Team. I think it is worth sharing with you. Keep in mind this is private – let's hope not many people see this (that's why I waited a couple of days to reply).

    Example 1:Cimple. We kept everything to the bare minimum because it was an MVP and we wanted to develop things a quickly as possible. As you can see, there's only 6 font-sizes and weights. Keep in mind the product was actually delivered based on this system. Case Study for this product coming soon at our website ;) Keep an eye!

    Example 1:PN2000 On this one, we used waaaaaay more font sizes and weights than on the previous one. Too many if I'm asked, and most likely during development, some of these were cut-off. But anyway, this product required a different kind of typography treatment and hierarchization, which lead us to have more font styles.

    Bottom line is each product is a different product and trying to use the same UI kit in all of them seems like it won't work (in most cases).

    1 point
    • Jayant RaoJayant Rao, 1 year ago

      This is amazing. Thank you so much for taking the time to help me with these suggestions. I did go through both the links you provided and I took some notes for myself (I'll keep them pvt.).

      I noticed that you have shown red guidelines (which is mainly for dev handovers) - I wanted to understand if this is really necessary if you're using Sketch+Zeplin or Figma? Ps. What tool do you prefer to use?

      Also, 8px of hard nudge seems to be the base for layouts while a 4px (or 6px) seems to be the base for buttons and badges. Is there a reason for this or it is mainly an aesthetic call?

      While the above already seems confusing for me, how do you define the grids while designing for mobile? 4 columns? And how much of gutter and padding do u define this based on mobile size.

      The reason why I am asking this is because, I tend to over engineer my thoughts while designing but also this makes me very curious to understand the depth of it. So I hope you don't mind me. I feel really bad to throw in so many questions but hey, one way of pushing some quality design related posts in the community ;)

      1 point
      • Rui Sereno, 1 year ago

        Hello Jayant,

        We use Sketch and InVision for these circumstances.

        8px is generally the base measure for layout. For the components, we make adjustments based on the given constraints and of course the aesthetics of things.

        Yep, generally 4 columns. But there's a tab on one of the Design System I've sent which demonstrates how the grid works in mobile.

        We over-think things a bit as well but sometimes it is easier to keep things simple ;) Hope I helped.

        1 point
        • Jayant RaoJayant Rao, 1 year ago

          I saw the grid. Hence, I was curious if there is a reason why you particularly had that. Was that personal preference or based on a particular math for scalability based on device size? :D

          yes indeed you helped quite a bit. Haha. Very kind of you!

          0 points
  • Taylor PalmerTaylor Palmer, 1 year ago

    I would encourage you to look at design system guidelines instead of UI kits. In my experience, UI kits aren’t really based on reality and they might not follow consistent guidelines.

    1 point