Manually Specifying Font Height?

Design help General
1

I am new to webflow but am a fairly experienced web designer. I have a weird typography issue where the bounds of the box around the text are not automatically wrapping the text. This is causing all sorts of issues with my layout. I have to manually specify the height of the text otherwise it is a really skinny box of a default height. Maybe there is a reason for this but based on the videos of webflow I have see this is not typical and something seems wrong.

image
image2432×472 25.1 KB

Here is my site Read-Only: Webflow - Avid Collective

2

That is the line height. Just change the line height in the box next to font size. I usually pick a number that is a bit larger than the font size number. I’d also suggest doing this on your “all H1,H2 etc. Headers” instead of on your created subclasses. If you don’t know what that means I suggest checking out some of these videos for tips and tricks.

3

Finally figured it out yesterday. I have never seen line height in pixels before so it threw me off. I actually just changed everything on the page to 1 (-) so it now adjusts based on the actual font itself. Thanks for all the videos!

4

Can you explain how you set it to follow the font size? I’m curious, this has always annoyed me

5

Ya! So line height in css is usually just a number, no unit of measurement. Check out this article
https://css-tricks.com/fun-line-height/

So I just set the line height to 1 and instead of pixels, em, vh, etc I set it to “-“ which sets it to the default height of the font.

This is why I was so confused, because by default in css line height is driven by a multiple of the fonts default height. So when it was set to a pixel number and didn’t auto resize I was completely stumped. Then it hit me that the line height was not responsive because it had a unit of measurement on it.

6

Wow, thats amazing! Why is that not the default setting? @cyberdave @PixelGeek

Thanks! We need more CSS people like you to move over to webflow and help with ideas like this!

7

Been meaning try it out for over a year now. Finally told myself to bite the bullet and do it. Really enjoy it so far. I am wanting to do a deep dive into the the system with my next client project. I would be happy to keep an eye out for things that seem strange or different then what I am used to. Is there a good place to post them?

@PixelGeek love your videos on youtube, you are part of the reason I am trying it out.

8

Post them on the tips and tricks section of the forum. You should post this one if you have a minute. This is going to change my workflow for sure!

9

Since it is an option (I use almost always) in the dropdown list on line height, it’s not new. Just overlooked. By default 1.2 is “normal” in most browsers.