Streaming live at 10am (PST)

Baseline question

Good morning, I have a baseline of 24px and read that using the baseline for vertical rythum. From what I learned, using 24px gap between a header lets say H1 or H3 and the paragraph. I dont see this in any of the templates, they just use the default top and bottom margin. Any ideas??? Can someone clarify this? Also I know this is applied to the header for each section and the paragraph underneath it. I also read that these 'spaces" are blocks that are used based on the baseline.

Here is an example;

image


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @jtorr19,

Yes, this is totally a preference thing. We have our headings for h1/hr with a top: 20px and bottom: 10px and all other headings with a top/bottom of 10px.

The rest would be the line height, which is what I think you are referring to when it comes to the baseline. This is the spacing between headings, paragraphs, and other text-based blocks.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

Thank you so much for your response, what do you do as far as this? What is your practice or method when it comes to vertical rhythm? I get confused because there are soooo many ways to do it. Do you keep the default top and bottom margins?

@jtorr19,

9.5/10 I do not. I usually use something specific to the design I am working on. Every time is different. TBH, it is entirely up to you. As for the line height, I use this format:

1.25- to 1.5- for Headings
1.5- to 2-+ for paragraphs and text blocks.

This is like % but more defined for text. It’s also another way to look at “em” values. That is just my process. You ask any other designer and they will tell you something entirely different.

Best Regards,
~ Brandon

1 Like