Streaming live at 10am (PST)

[FONT SCALING AND RELATIVE MEASUREMENTS] em, vh and %


#1

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

  1. What, 2. Who, 3. When, 4.Why, 5. How , 6. Formula, 7. Example

  1. WHAT - em, vh and % - are relative measures. Example: font size of 2em of base font size 16px will be equal to 32px.

  2. WHO NEEDS IT - we, developers, designers

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

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

  5. 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 -
1. You set your base font (see screenshot below) for 16px
2. Set your h1 tag for 2.618em (Golden Ratio) or higher (use cheatsheet from type-scale.com as a reference)
3. Set your h2 tag for 1.618 em (same as #2)
4. Set your h3 tag for 1em
5. Set your p tag for 1em
6. You are set
7. Use line heigh with 1em or 1.5 em, check which does better for you.
8. 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.


Here is my public share link: LINK
(how to access public share link)


#2

Thanks a lot! Really helpful! :slight_smile:


#3

You are most welcome


#4

Thank you! This is why I love this community :heart:


#5

Thank you, have been implementing part of this already but seeing the basis for how it works is great. I second @PixelGeek this community rocks


#6

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.


#7

what is "unitless" line height?


#8

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.

Full article is here https://css-tricks.com/almanac/properties/l/line-height/ and a supporting article from Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/line-height.

To set unitless line-height in Webflow just select the dash instead of pixel, em, or percent.

Hope that helps!

Jason


#9

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?


#10

Thank you. That was very useful!


#11

Thanks for that, but I cannot get my head round this, could you send me the link to the video; I can't seem to find it anywhere.


#12

The public share link isn't working. Did you pull the link?


#13

Any chance you could fix the public share link. It’s not working.


#14

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.