/* Hey there, Ill be going through a brief way to easily implement vertical rhythm with CSS/SCSS to your type on your webpages. */ // This is a Sass variable that will set my overall vertical rhythm "base." This is the number that will be multiplied/divided throughout your type to maintain a pleasing and comfortable design. It is not required and can just be manually input if you are not using SCSS/SASS I found for my font-size/family, 28px was a good mark. //I like to set my body to no margin and padding, and let myself deal with how i want to deal with the padding/margin on my container. I thought, for this purpose, setting my base font-size here is fine rather than the html element that I would normally set it to. body { --vert-rtm-base: 25px; margin: 0; padding: 0; font-size: 18px; } // Make a container in your HTML. This will contain your elements on the page. I have set mine to a 70% width to give some "white space" on the right and left margin. Then, set the margin to "0, auto", which centers the whole container. #container { width: 70%; margin: 0 auto; // Place an h2 element within your .container as seen above. give it a line height that is well-spaced, but not too far apart where it is inneficient. This should be specified in your SCSS variable above if applicable. for header elements, i like to give them double the line height of the body copy(as a general rule-of-thunb of course; as long as they are multiples of eachother). Also give the element a margin top and bottom that is the same/divisible of the verticle rhythm. h2 { font-family: 'Roboto', sans-serif; line-height: var(--vert-rtm-base) + var(--vert-rtm-base); margin: var(--vert-rtm-base) 0px; } p { font-family: 'Slabo 27px', sans-serif; line-height: var(--vert-rtm-base); margin: var(--vert-rtm-base) 0px; } } // And thats it! Maintaing a solid vertical rhythm allows you page to look much more professional, more clean, and most importantly, more readible! // Thanks for reading!! // --Ben Kincaid // -- BenKincaid.com

!