Solved

How to determine Line-Height

Posted on 2015-01-02
8
189 Views
Last Modified: 2015-01-02
Hello,

I'm new to typography and I have been reading and learning as I go the best I can. However, I'm stumped on how to determine the proper line-height to use.

I guess what I'm looking for is the mathematical formula that is used to determine the proper line-height based on the font-size and or line-width.

I have seen NUMBEROUS typographic scale websites were you plug in the font-size and it gives you the correct line-height to use. I'm not looking for those sites so PLEASE DON'T POST THEM, I have already seen them.

I just want to learn what mathematical formula is used to determine proper Line-Height based on the Font-Size used and don't want to rely on a website to give me that information (that is not how I can learn).

I plan on building a responsive website and I need to know line-height for body, p, h1-h6 tags. I know that at different breakpoints I may need to adjust the font-size and line-height and that is what I'm looking for. The mathematical formula to use to determine the proper font-size and line-height.
0
Comment
Question by:asp_net2
  • 5
  • 3
8 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40528442
Typography is an art. There is no hard and fast formula or correct measure. That's why we have designers.

Here's a page that talks about the Golden Ratio, approx: 1.6, so if you have 14pt text, your line height should be at least 14*1.6 = 22.4pt, but that is just a rough guideline for body text. Often Headlines are much tighter.

http://www.pearsonified.com/2011/12/golden-ratio-typography.php
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40528545
So if I'm going to design a site then how can I determine the line-height for all other elements (h1-h6).
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40528551
you have to use your judgment or hire a designer. like i said, it's an art..

you could try a few different combinations and see what you like best
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40528578
Ok, so there is no true mathematical formula to generate that then?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Author Comment

by:asp_net2
ID: 40528580
I'm looking for a better solution than to hire a designer Kyle.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40528585
if you don't want to hire a designer, then you have to take on the role of designer.

no, there is no mathematical formula. i'm sorry that's not what you want to hear, but that is the answer to your question.  

in general, if you're not an artist, the Golden Ratio is a solid rule of thumb for assigning proportions..
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40528590
You should also consider things like baseline-grid, optimal container width for a given font-size, etc.., etc... and much much more.

Leading (line-height in the world of web design), should also be determined by the x-height of the given typeface (font). Not all typefaces are created equal, so you can have one face with a large x-height which probably needs more leading than a different face of the same point size.

It's an Art :)
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40528603
just one more thing.. you don't actually have to specify line-height at all. If you don't feel comfortable making design decisions, you can let the browser take of it. It won't be as good as a designer wold have done, but it won't be potentially as awful as a non designer's work.

anyway, none of this is intended to be a criticism, just trying to be helpful.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now