PX

Fixed sizing

Great for responsive font sizing

EMs

Relative to the parent element

Example

If ROOT Element = 16px
If Parent Element = 18px,
1em = 18px
2em = 36px
.5em = 9px

Great for responsive font sizing

REMs

Relative to the ROOT element

Example

If ROOT Element = 16px
If Parent Element = 18px,
1rem = 16px
2rem = 32px
.5rem = 8px

Great for responsive font sizing

%

Relative to the parent element

Example

If ROOT Element = 16px
If Parent Element = 18px,
100% = 16px
200% = 32px
50% = 8px

Margins, padding, spacing, and widths/heights

VW and VH

Relative to the viewport’s width/height

Great for responsive font sizing

Margins, padding, spacing, and widths/heights

ELEMENT

OPTIONS

RECOMMENDED

Column Width

%

%

Margin

PX, EM, %, REM

%

Padding

PX, EM, %, REM

%

Font-Size

PX, EM, REM, VW

REM

Leave a Reply

Your email address will not be published. Required fields are marked *