The comprehensive 8pt Grid Guide - Deepstash
The comprehensive 8pt Grid Guide

The comprehensive 8pt Grid Guide

medium.com

|

7 IDEAS

1

Keep reading for FREE

Pt  = point

Pt = point

We use small artboards while the devices we design for are huge. For example:

  • The iPhone XR has a Retina display that has twice as many pixels per inch (ppi) as a regular screen, meaning the artboard is rendered at twice as many pixels.
  • On the iPhone X, the artboard is rendered at 3 times as much, since it has a Super Retina display and 3 times as much ppi.

Designing for the smallest size allows scaling assets into the various sizes the different devices require while maintaining pixel-perfect rendering. 1 pt can be translated into 1,4 or 9 pixels at the @1x, @2x, and @3x sizes.

7

27 reads

Why the 8pt grid

Why the 8pt grid

  • It scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).
  • Apple and Google advise so.
  • It's a good basic unit to work with. 4 and 8 are easily multiplied, are flexible and consistent. 

7

26 reads

Typography

While the font sizes can vary and move away from the 8 multiplication, the line height will not. 

For example, the Paragraph font size can be 15 pixels, but the line height should be a multiplication of 8, so 24px is an acceptable value. 

7

22 reads

Iconography

Iconography

Icons designed on an 8pt based grid will scale perfectly.

If you want to use icons in a different size, one recommendation is to design on a 16 x 16 pixel grid or a 20 x 20 grid. This way, you're covered for any size:16, 20, 24, 32, 40 etc.

7

18 reads

Horizontal Rhythm

The standard Bootstrap grid is a 12 column layout, with a 15px margin on each side of the column, resulting in a 30px gutter between columns plus 15px to the left and right of the grid. 

The entirety of the grid is called Container. A container can be either fluid or responsive in size. A fluid container will always take the whole available width.

  • Customising for a desktop: Each column should be 72px wide, with a gutter of 24px or 32px.
  • Designing for mobile is up to you: Not all mobile devices' width dimension is divisible by 8. 12 columns aren't practical for narrow screens. 

7

12 reads

Vertical Rhythm

Vertical Rhythm

Rows should be 8px tall. 

Maintaining a vertical rhythm when designing for mobile (web or apps) is vital since there isn’t much horizontal rhythm to work with.

A typographic system that is designed based on the 8pt grid will sit wonderfully on an 8pt vertical grid. 

8

12 reads

Start your UI project right

Start your UI project right

... using the extended framework for the 8pt grid: Typography, Icons and Layout.

The 8 point grid is the best go-to grid and can be applied to most digital design projects, especially product design.

6

43 reads

CURATED BY

matclar

Diplomatic Services operational officer

Ready for the next level?

Read Like a Pro

stash-superman-illustration

Explore the World’s

Best Ideas

200,000+ ideas on pretty much any topic. Created by the smartest people around & well-organized so you can explore at will.

An Idea for Everything

Explore the biggest library of insights. And we've infused it with powerful filtering tools so you can easily find what you need.

Knowledge Library

Powerful Saving & Organizational Tools

Save ideas for later reading, for personalized stashes, or for remembering it later.

# Personal Growth

Take Your Ideas

Anywhere

Organize your ideas & listen on the go. And with Pro, there are no limits.

Listen on the go

Just press play and we take care of the words.

Never worry about spotty connections

No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.

Get Organized with Stashes

Ideas for your next work project? Quotes that inspire you? Put them in the right place so you never lose them.

Join

2 Million Stashers

4.8

Stars

5,740 Reviews

App Store

4.7

Stars

72,690 Reviews

Google Play

Shankul Varada

Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.

Sean Green

Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.

Ashley Anthony

This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!

samz905

Don’t look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.

Laetitia Berton

I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!

Giovanna Scalzone

Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.

Ghazala Begum

Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.

Jamyson Haug

Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

FAQ

Claim Your Limited Offer

Get Deepstash Pro

BLACK FRIDAY

75% OFF | 1-Year Pro Subscription

Claim Offer