How to calculate Line-Height in CSS

Hello Experts,

I'm having some difficulty on determining how to set my line-height for my font-sizes that I have for my h1-h6 selectors.

I'm also trying to maintain a vertical rhythm as well for my typography and other elements. So far, I have implemented margin-bottom: 24px or 1.5rem for all of my selectors to maintain vertical rhythm.

I have also read that some people add margin-top and margin-bottom to their h1-h6 and p selectors but i don't understand why they would do nor do I understand how to calculate that either.

I found the following code and article below but when i implement this is does not sit on the baseline grid (vertical rhythm) well. I'm also following the baseline grid from http://www.basehold.it.

// http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/
// for determining line-height and margin for headings

h1 {
      font-size      : rem($font-size--48px);  /* 48 / 16 */
      line-height    : (48 / 48);              /* 48 / 48 */
      margin-bottom  : (24 / 48) + rem;        /* 24 / 48 */
}

h2 {
      font-size      : rem($font-size--36px);  /* 36 / 16 */
      line-height    : (48 / 36);              /* 48 / 36 */
      margin-bottom  : (24 / 36) + rem;        /* 24 / 36 */
}

h3 {
      font-size      : rem($font-size--24px);  /* 24 / 16 */
      line-height    : (24 / 24);              /* 24 / 24 */
      margin-bottom  : (24 / 24) + rem;        /* 24 / 24 */
}

h4 {
      font-size      : rem($font-size--21px);  /* 21 / 16 */
      line-height    : (24 / 21);              /* 24 / 21 */
      margin-bottom  : (24 / 21) + rem;              /* 24 / 21 */
}

h5 {
      font-size      : rem($font-size--18px);  /* 18 / 16 */
      line-height    : (24 / 18);              /* 24 / 18 */
      margin-bottom  : (24 / 18) + rem;        /* 24 / 18 */
}

h6 {
      font-size      : $font-size--rembase;    /* 16 / 16 */
      line-height    : (24 / 16);              /* 24 / 16 */
      margin-bottom  : (24 / 16) + rem;        /* 24 / 16 */
}
LVL 4
asp_net2Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings asp_net2, , I looked at your CSS with the heading (<h1>, etc) display font factors set. And your question asks about having a formula for getting a correct line height, in relation to some " baseline grid ".
I am wondering about how someone would try and use this formula thing you have copied and pasted for a better "Visual Display" in the headings, , AND not going to the trouble of viewing a Particular WEB PAGE, and just adjusting the formula values to change , size, and move the different elements ( h1, h2, h3 ) to sizes and positions that suit your particular page layout as an "Artistic" pleasing arrangement, never mind any " baseline grid " that is used to see the mathematical positioning.
So If you just want it to look better on your " baseline grid " , to line up , then slightly adjust the line height for a mis aligned element

change -
    line-height    : (48 / 48);

to
    line-height    : (48 / 46);  

or to
    line-height    : (48 / 50);  

and see if that works better for your personal artistic evaluation of the page arrangement, as far as my opinion, these formula value results, are much to big, for any display I would consider useful. I would think the sizing and arrangement is a Subjective opinion, not a mathematical certainty.

I wonder what you think is so bad about the usual DEFAULT sizing of the headings, that you go to this trouble to change them all , , , to a large degree?
0
asp_net2Author Commented:
The sizes that i included were from a website that talked about line-height, margin-top, margin-bottom and baseline grid. My question was how do you determine line-height, margin-top, and margin-bottom for headings.

Take a look at this article and maybe that will help you understand what I'm referring to :)

http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/
0
Slick812Commented:
? ? ?

I have already looked at that site for - "how-to-set-up-a-baseline-grid/", and the other site for the grid system.

But you do not understand what he is trying to tell you on the -
   http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

site, , He gives you some general "guidelines" for consideration, to take a "Look" at how your special web site (Not EVERY website), has its FONT presentation in the stacking of various different height-size Lines, to LOOK GOOD!

As he says -
"The basic premise behind a baseline grid is to align all text on a web­site so that it flows smoothly"
     this is Subjective opinion, and will be different on web sites that use  Titles  and  Headings  in different sizes and positioning to suit the graphical "Layout" that the site art department has created for that site.

Then he says =
"I like to use the fol­low­ing scale: 16, 18, 21, 24, 36, 48."

But, this is just his "Example" as a "Demo", choice of font sizes (like I said, I think they are Too Big for a generalized web site use) . .

He says - "The gen­eral rule of thumb for read­able text is that your line-height should be 1.4 to 1.5 times that of your font-size". .

Please notice that this is his "generalized" opinion for a beginning "formula" to change and test on your site, until you get the metrics you need the font-size, line-height, margin-spacing, for your special Site, not the generalized, one size fits all formula.

He ends up saying - "It can be quite a chal­lenge work­ing with ems", which to me means, you change the math -
/* 48 / 48 */
for ALL of the font metrics, to get a display that works on your site layout.

For the most part, unless you have a really picky art department, and have artistic concerns for the relationships of Titles, and Headings, then there are NOT concerns for the "typo­graphy" consistency on various devices. So you may not have any advantage in going to this trouble. You seem to not be able to view your site, and determine fine adjustments, to have the titles stacking "flow smoothly", by changing the em, to -

h2 {
    font-size: 2.1em;
    line-height: 1.15em;
}

and change again, until it is a great presentation. You don't really need the math, you can just adjust the metrics , lower or higher, until you get a result, but unless you have concerns or problems "artistically" for your Topo , then this may not improve your site presentation?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

asp_net2Author Commented:
So basically your saying there is "no particular" formula for calculating line-height, margin-bottom and margin-top for headings or body copy for that matter? Your saying it's up to the artist on what they think looks best?
0
Slick812Commented:
Yes, it's about "what they think looks best? "  for their site layout and arrangement, , , but the article you reference also says this, but not directly, as he uses - "The gen­eral rule of thumb", instead of saying "Always use this". . .
I think the real purpose, or main point, of that article, is to Never use the static Pixel (px), for topographic metrics such as -
<style>
h2 {font-size: 29px;}
</style>

instead always use a form of the "relative" element measurement (em) -
<style>
h2 {font-size: 1 .782em;}
</style>

because the em unit can respond to the topographic font setting for different values that a browser (notebook, tablet, phone) can have (default font size may NOT be 16px).

The article goes on about the "Line Height", and changing this in the headings, which are usually used as article "Titles" and have just One Line of text , , However, if you actually change the line-height in any element, then there are several changes in the appearance, and organization of the text for that display, which he seems not to consider. And you see this when you use the - "how-to-set-up-a-baseline-grid/" on your page, and the overlay grid lines, no longer seem to match as you think they should when you use his "Default" measurement changes, and most of that is because of the line-height changes.
Line height change, CAN be used to move the display position UP and DOWN for some elements, and in multi line Text display, it changes the distance between the lines.
I will tell you of my opinion, since you are seeking opinions on this. I use the percentage for most Font Size adjustments -
<style>
h2 {font-size: 150%;}
</style>

Next, if appropriate, I use the em, , which is about equivalent to the em use as -
<style>
h2 {font-size: 1.5em;}
</style>

both of these respond to the changes in the device font, or viewer browser settings, BUT if I use -
    font-size: 24px;
then it will NOT respond.
As I said the defaults for the H1 , H2 , H3 etc. are good for most sites, But these headings (h1, h2, h3) are not really used much, in an artistic or "Fancy" site layout, on these, a special graphical <div> class CSS are used to have the article or section "Titles" standout as visually different , as example-
<style>

.titleArt{
display: inline-block;
position: relative;
top: 14px;
font-family: dominion,arial,sans-serif;
font-weight: bold;
font-size: 138%;
color: #fcdfb4;
background: #9cf url(images/title4.png);
border: 2px solid #ffdb90;
border-radius: 7px;
padding: 2px 9px;
margin: 1px auto;
z-index: 1;}

</style>

Open in new window

this one does not need to change the line height, but some positioning does need to change the line height.
0
Mikkel SandbergFront End Developer (Contract)Commented:
Hi asp_net2,
I have taken a few design classes, one of them being a typography class, and there are a lot of "rules of thumb" about design. My instructor always stressed that we should NEVER use "default" styles (usually this was in the context of a program like InDesign). "Never" is a strong word, but the idea is that you as the designer need to design with intention, not let the program or browser (and thus some other person) make these design decisions for you.

The rule of thumb of 1.4-1.5 line height is a good starting point, but usually the larger the display type gets (your h1 and maybe h2 or h3), the less line height you will want. For example, at a font size of 48px, you may want a line height that is closer to 1em so that you don't have excessive space between lines.

As for the issue of margin, this is even more subjective. The reason for having it in the first place has most to do with readability. I was taught that with body text (paragraphs), you should either indent new paragraphs or have space separating them. I would probably just do margin-bottom for whatever the element is, because you can get unexpected results with both (i.e. margin collapse)

These are just some guidelines, but most of it comes down to preference and readability. But ALWAYS make sure your content itself is good; no matter how clean your design or amazing your styles, crap content is still just that.

I hope this helps :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.