Auto Resize Line Height

Hey everyone, @DFink recommended I pass this info along!

When creating a new site, as you run through all your different headings and paragraphs, set the top class (All H1 Headings, All H2 Headings, etc) line height to “1.2-”. This will allow line height to automatically adjust to the size of your text size. Since line height is inheritable, it will pass it down to any new objects you create. If you ever need to adjust a line height just do so manually.

Background:
For some reason in webflow by default line height does not automatically resize with the size of your font. So every time you change font size, you have to also change the line height or you can run into formatting issues.
The css standard is that line height does not have a unit of measurement attached. For example, this is what a usually css line height looks like line-height: 1.2; This means that your line height will be 1.2 times your font size.

1 Like

By doing 1- will we end up with a line height as 1x font size? so if you did want it to be 1.2 you could do 1.2- right?

FYI: 1.2 is default with browsers. Does not need to be set.

1 Like

Yes. It’s a product of font size and line height. Usually I make my blog pages about 1.7 for easiest reading.
Didn’t realize 1.2 was standard. I’ll update my initial post. I rarely set it in other builders or when writing pure code because the default works well. I think it should probably be updated in webflow to be without a unit.

1 Like

Hi Jeff, Ive seen you on a forum on a few times and wanted to ask a question as I really cant figure this out. But is there a way to align text within the centre of the line height. I have a problem where the padding on the line height is more on the bottom then the top which throws of my actual padding on the div the text is within. (I know line height dose not have padding but thats the best way I can describe it). Ive attached a photo for reference and also my read link, hopefully you can make sense of my poorly described issue :slight_smile: Thanks, Dylan!


https://preview.webflow.com/preview/weareseams?utm_medium=preview_link&utm_source=designer&utm_content=weareseams&preview=c091c3dc6b0418152173fa874e411647&workflow=preview