Pt = point - Deepstash

Bite-sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

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.

STASHED IN:

6

MORE IDEAS FROM THE SAME ARTICLE

  • 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. 

Rows should be 8px tall. 

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

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

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. 

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

1 Reaction

Comment

It's time to

READ

LIKE

A PRO!

Jump-start your

reading habits

, gather your

knowledge

,

remember what you read

and stay ahead of the crowd!

Takes just 5 minutes a day.


TRY THE DEEPSTASH APP

+2M Installs

4.7 App Score