Coding for Beginners: CSS Basics #67— Line Height
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
Line-height is used to set the height of each line of text.
To understand line-height, let's review this illustration of typeface terminology. The baseline is where the letters sit. The cap height is the distance between the baseline to the top of flat capitalized letters. Ascenders are letters that extend above the cap height while descenders extend below the baseline.
When you have two lines of text, the leading was the distance between the descender of the line above to the ascender of the line below.
The term "leading" came from when typography was set with metal type. Strips of lead were placed between the lines of metal type. The greater the leading, the more spacing between lines of type.
The line-height is the closest to the concept of leading with web typography. The font-size is the distance between the ascender and the descender. The line-height is the distance between the descender and the descender of the line of type above. The difference between the font-size and the line-height is the leading. So by adjusting the line-height, we adjust the spacing between lines of text.
Just like font-size, it can take many length and size units. However, it can also take a unitless value that will act as a multiplier and is often the best option.
By using a unitless value, the font-size is multiplied to result in the line-height.
The purpose of setting the line-height is to space apart lines of text to make them easier to read. A typical value is 1.3 to 2 (the equivalent to double-spacing).
#HTML #CSS #coding #web #accessibility #lineheight #typography #webtypography #readability #legibility #csslineheightexplained #csslineheightproperty #capheight #lineheighthtml #webdevelopment2023 #responsivewebdesign #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse