Hi George,
Thanks for taking the course, I hope you’re enjoying it!
With the headers I didn’t use any specific formula. I’ve experimented with different math in the past to generate vertical rhythm, (like modular scale for example), but in my opinion the best results come from just eyeballing it.
My approach is to set the heading “end points”, i.e. the H1
and H6
headings, then aim to make a smooth transition in between.
I know I want my H6
to be big enough relative to normal text that it is distinguishable as a heading, so I can just go a little higher than 1rem
, e.g. 1.25rem
.
I also know I want my H1
to stand out as a main headline, but to not be so large as to have too few words per line, so I experiment with the size until I find a happy medium.
Then I tweak the sizes of the headings in between so that there is A) a smooth shift in size and B) enough difference between the headings they can be told apart.
I do this all just in straight rem
units rather than working in px
and converting later. I find this to be the most efficient approach.
The application of line height and vertical margins goes the same way. I get them to a point that looks right at either extreme, then smoothly transition for the headings in between.
Sometimes you’ll have to go back and readjust settings, like line height after applying margins for example, so it’s basically just fine tuning until you achieve a flow and have each heading behaving in the way you need it to for the design.
Re. the next courses, I’m putting the finishing touches right now on the next course covering layout, and I’ll be completing the last course on colors and backgrounds in the first half of this month.
From there @ianyates will be the best person to let you know when they’ll be online and accessible.
Thanks for your questions, and I hope you enjoy the rest of the series!
Cheers,
Kezz