TrueUI

Measurements

8 Point Grid

Following the 8 point grid will allow us to build user interfaces that are consistent and efficient. The 8 point grid is a scale for measurements that can be used for various user interface elements.

Using 16px as our base measurement we can climb the 8 point grid scale in increments of 8 pixels.

Full Scale Example

1rem16px
1.5rem24px
2rem32px
2.5rem40px
3rem48px

Half Scale Example

1rem16px
1.25rem20px
1.5rem24px
1.75rem28px
2rem32px

16px/1rem (Base)

32px/2rem

64px/4rem

128px/8rem

User Interface Examples