Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Web Typography Basic Web Typography Font-Sizing: Px, Em, and Rem - Part 2

Posted by Brian Loedding
Brian Loedding
1,897 Points

Typographic Scale

If I were to choose a specific base font-size of say 16px or 20px how can I determine all h1-h6 font-size headings based from the base font size using a typographic scale? Also, how can I determine the line height based on the base font-size?

Is there a specific math formula I can use to determine from a specific base font-size that I may choose to use?

jaredcowan
jaredcowan
11,808 Points

This might help you? http://cssleading.com/ http://modularscale.com/ http://webexpedition18.com/articles/case-study-designing-with-modular-scale/

Also(this is just an add on) But frameworks are usually developed with Sass or Less and they can calculate line height using their mixin's and/or variables

@font-size-base is 14px
@line-height-base is 1.428571429

Then they have 

@line-height-computed
floor((@font-size-base * @line-height-base))

Computed "line-height" (font-size * line-height) for use with margin, padding, etc.

5 Answers

Andrew Helton
Andrew Helton
4,681 Points
Andrew Helton
Andrew Helton
4,681 Points

Here's a tool that I've used before that might be helpful: Type Scale-AVisual Calculator

Brian Loedding
Brian Loedding
1,897 Points
Brian Loedding
Brian Loedding
1,897 Points

Hi Andrew,

Yes, that was the tool from the video which I did see. But I don't see anything on that page that mentions what size to use for h1-h6 headings based on the size entered.

Mohsin Ayub
Mohsin Ayub
6,822 Points
Mohsin Ayub
Mohsin Ayub
6,822 Points

if you want to set the base font size you can set it with html type selector like this:

html
{
       font-size: 20px; //the base font size 
}

So now 1em = 20px. By default, the base font size is 16px. But you can set it by yourself as described above. And line-height are also relative to the base font-size. So in this case, if you set an element's line-height to 1, it will actually 20px.

Brian Loedding
Brian Loedding
1,897 Points
Brian Loedding
Brian Loedding
1,897 Points

Hi Mohsin,

If I set the line-height on the html selector does that mean the line-height will be the same on every other element I add such as p, h1-h6, body etc..?

Mohsin Ayub
Mohsin Ayub
6,822 Points
Mohsin Ayub
Mohsin Ayub
6,822 Points

Yes. it will be same on all the elements. But it is not the good practice to set the same line-heights for all the elements like p, h1 etc. For more details about better usage of line-heights you can check this video by Guil.

Responsive Text and Vertical Rhythm