As from yesterday’s workshop, many questions have arised when to use EM, VH AND %. Some of the participants requested me to post into the forum.
I will structure the answer with the following
- What, 2. Who, 3. When, 4.Why, 5. How , 6. Formula, 7. Example
WHAT - em, vh and % - are relative measures. Example: font size of 2em of base font size 16px will be equal to 32px.
WHO NEEDS IT - we, developers, designers
When we need it - ALWAYS, since we want to make consistency over all devices and ease of administration (changing the design)
-Use % when use marging or padding
-Use em for p h1 h2 h3 tags
-Use vh or vw to adjust for mobile devices
Why - mastering yourself to use relative measures will SAVE YOUR precious development TIME and will provide consistency over all work. I will explaing about consistency in the 5. How section
How - we see a lot of nice designs and type scales and sometimes we hardly get the same effect while developing.
6. Formula - go to type-scale.com. Get the right measurement framework that you will feel suit you. (I use Golden Ratio for desktop and Perfect Fourth for mobile). You may choose one framework, but you will notice that font gets big on the mobile, that’s why you would probably consider using two of them. One for mobile and one for desktop.
7. Example -
- You set your base font (see screenshot below) for 16px
- Set your h1 tag for 2.618em (Golden Ratio) or higher (use cheatsheet from type-scale.com as a reference)
- Set your h2 tag for 1.618 em (same as #2)
- Set your h3 tag for 1em
- Set your p tag for 1em
- You are set
- Use line heigh with 1em or 1.5 em, check which does better for you.
- If the font is big on the mobile, use different measurement framework (Perfect Fourth for example)
How it works?
Set you base font size to 14 or 16 px in the webflow
Then. When settings your h1, h2, h3 or another tags, refer to the table that you see at the type-scale.com and use em. Just play with and you will find the measurement framework that you happy with it. Now you need only play with the base font size (Body (All Pages)) on the picture.
Play with the line height with 1em or 1.5em or find what sizer fits you project best, best use EM.
Thanks, hope that helped.