Layouts and grids for mobile apps(design.infinum.com)

2 years ago from Marina Jukić, Designer

  • Dan GDan G, 2 years ago

    This isn't really true.

    It's totally practical and not remotely difficult to align around a 4pt grid. You're still using the "soft" grid rather than an enforced "hard" grid, you're just making sure that your type sizes have a sensible line-height.

    It also makes it way easier to use the soft grid as when you're setting up spacing in Figma or whatever, you don't have to worry about odd distances as you've left the line-height at Auto or something like 14/19.

    0 points
    • Florian GrauFlorian Grau, 2 years ago

      Can you elaborate on your second paragraph? How do you align to a baseline grid, when you leave your text styles at auto line height (or some other odd number)?

      0 points
      • Dan GDan G, 2 years ago

        No I'm saying that's why you should use a baseline grid (of sorts). I make sure every type style has a line-height that is a multiple of 4 so that spacing never gets ruined elsewhere.

        You don't need a visible baseline grid, it's just there in the background.

        0 points
    • Raphael LoderRaphael Loder, 2 years ago

      I'm not sure if you've misunderstood. Designing around a baseline (whatever value you choose) is not very difficult. I'm talking about implementation, especially at larger projects. It becomes relatively messy and very convoluted to support it. At smaller projects that focus on such details it can be definitely worth it (see here for example: How We Implemented a Baseline Grid Using CSS or CSS Baseline: The Good, The Bad And The Ugly ).

      In the end it all comes down if you want put in the effort and time to support and update this.

      0 points
      • Dan GDan G, 2 years ago

        I work on a global product so no i haven't misunderstood. I'm not saying you should be using some specific CSS baseline grid, just having all of your type styles using a line-height that's a multiple of 4 is enough for 80% of cases.

        0 points