FAQ: CSS Typography - Line Height

This community-built FAQ covers the “Line Height” exercise from the lesson “CSS Typography”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Line Height

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

If line-height is defined in code by a ratio e.g line-height:1.4; as in the exercise. Which digit represent the lead and which the font-size?

The lead isn’t explicitly specified, but I guess you can split the line-height of 1.4 into 1 + 0.4 and interpret it as 1 times the font height for the actual font and an additional 0.4 times for the lead.

2 Likes

Is there anyway of converting pixels into a unitless number?

When you design a website in Adobe illustrator or Photoshop you can output the elements with their CSS data. These units are however in Pixels, so wondered if there is anyway of converting pixels to unitless numbers as this is the preferred method.

Are there any rules of thumb as to what looks good when?

You have to manually calculate it. So let’s say the line height in pixels was 25px, and the font-size property of the text you want to modify was 16px, you would have to do 25px/16px = 1.5625

2 Likes

To calculate the total line height of an element, just multiply it by the font-size property of the element. So if we set the line-height property of an element with a font-size property of 15px to 2, we would have to multiply 15px by 2 which results in 30px

The default line height is about 140% of the font size. The leading is technically the the full height…

  • top of leading to the cap line
  • baseline to cap line (the vertical space occupied by say, the letter M
  • bottom of leading to the base line

leading_typography

Above, the cap line is the top of the L and d stems; the base line is the bottom of the L , e , a , d , i , and n . The descender is below the base line.

As we can see, the illustration given in the lesson is misleading, but the net is nearly the same, so long as we are aware that ascenders and descenders do not factor into the calculation, only the M-height itself.

When we modify the line-height, the M-height stays as is. The horizontal dissector passes along the line of the horizontal stroke of the small e , through the center of the counter of the small d and below the top counter of the small g .

I use line-height to control the vertical size of buttons since it lets the font stay roughly centered in the vertical.

https://www.canva.com/learn/typography-terms/

3 Likes

This lesson says that line-height will accept “A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size.” I understand that the unit em is also relative to the font size. Is there a difference between:

line-height: 1.4;

and

line-height: 1.4em;

In a word, no. There is no difference that we can perceive directly. However, computationally one might weigh heavily against the other. Do look into it.

Do you have any reference material for this specifically or are you leading into the dev tools in browsers?

The generally referred material is on MDN (or W3C) for the core syntax and default units information. It is never too soon to get familiar with those resources.

Understood, thank ya sir. Appreciate the quick response. Happy Holidays.

1 Like