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 trialBrian Loedding
1,897 PointsTypographic 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?
5 Answers
Andrew Helton
4,681 PointsHere's a tool that I've used before that might be helpful: Type Scale-AVisual Calculator
Brian Loedding
1,897 PointsHi 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
6,822 Pointsif 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
1,897 PointsHi 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
6,822 PointsYes. 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.
jaredcowan
11,808 Pointsjaredcowan
11,808 PointsThis 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
Then they have
Computed "line-height" (font-size * line-height) for use with margin, padding, etc.