# Relative Units

See how everything scales proportionately when you change `html { font-size:1.25em; }` to another value (calculations based on a root `font-size` of `20px` ).

`em` units are calculated based off their parent's width whereas `rem` units are based off the root document `font-size` .

`1em - (1*20 = 20px)`
`2em - (2*20 = 40px)`
`1rem - (1*20 = 20px)`
`1.5em - (1.5*40 = 60px)`
`1em - (1*60 = 60px)`
`1.5em - (1.5*60 = 90px)`
`1rem - (1*20 = 20px)`
`2rem - (2*20 = 40px)`