Start Here:learn CSS Typography


#1

Kezz Bracey,

I have a few questions regarding your Learn CSS Typography course. The first question is concerning the math you used for the header font-sizes and line-heights. How did you come up with those numbers, did you use a ratio?

The second question I have concerns the other two upcoming courses you mentioned. Is there an expected date of when they will be available?

Thank you for your time.

George


#2

Hey @georgep1, it’s always a good idea to tag people in conversations, just so they definitely get a notification (like this: @kezzbracey :slight_smile: )


#3

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


#4

@kezzbracey Thanks for getting back to me I only asked because your three courses are a class I am taking in the fall and the courses will help prepare me for the class. Thanks.