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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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.
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.
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
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
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.
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:
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.
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.