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.
I’ve been doing nearly this same thing since a Webflow workshop back in 2016! I would add that using “unitless” line height is a nice way to go. Helps keep line height sizing cleaner. I use EMs for the base font size over pixels.
Hi @Diarmuid_Sexton Unitless line-heights don’t have a unit like pixels or em assigned.
Per CSS Tricks site
The recommended method for defining line height is using a number value, referred to as a “unitless” line height. A number value can be any number, including a decimal-based number, as is used in the first code example on this page.
Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.
What do people think of using a base font-size larger than 16px? I know 16px is the default size set by most browsers, but personally I prefer to use something slightly larger, more like 18px or 20px. I notice that quite a lot of sites do this nowadays.
I’m not sure what the best practice is for setting a larger base font-size though. I have seen several designers advising against hardcoding a pixel value as the base font. In the responsive typography workshop from a couple of years ago, Jasaon Pamental advices using this custom code to do a font reset. This ensures the font-size intended by the manufacturer gets used:
<style id="font-size-reset">
html {font-size:100%; }
body {font-size: inherit; }
</style>
@PixelGeek In the same workshop Jason talks about font loading holding content hostage if the wf-active class has not been loaded. Has anything been done to address this - is Webflow now inserting a wf-inactive class as a fallback?
