{"id":308275,"date":"2020-05-15T07:46:29","date_gmt":"2020-05-15T14:46:29","guid":{"rendered":"https:\/\/css-tricks.com\/?p=308275"},"modified":"2020-07-09T09:03:10","modified_gmt":"2020-07-09T16:03:10","slug":"how-to-tame-line-height-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-tame-line-height-in-css\/","title":{"rendered":"How to Tame Line Height in CSS"},"content":{"rendered":"\n

In CSS, line-height<\/code> is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height<\/code>, we might think about the concept of leading from print design<\/a> \u2014 a term, interestingly enough, that comes from literally putting pieces of lead between lines of type. <\/p>\n\n\n\n

Leading and line-height<\/code>, however similar, have some important differences. To understand those differences, we first have to understand a bit more about typography. <\/p>\n\n\n\n\n\n\n

An overview of typography terms<\/h3>\n\n\n

In traditional Western type design, a line of text is comprised of several parts: <\/p>\n\n\n\n

  • Baseline:<\/strong> This is the imaginary line on which the type sits. When you write in a ruled notebook, the baseline is the line on which you write.<\/li>
  • Descender:<\/strong> This line sits just below the baseline. It is the line that some characters \u2014 like lowercase g<\/code>, j<\/code>, q<\/code>, y<\/code> and p<\/code>  \u2014 touch below the baseline. <\/li>
  • X-height:<\/strong> This is (unsurprisingly) the height of a normal, lowercase x<\/code> in a line of text. Generally, this is the height of other lowercase letters, although some may have parts of their characters that will exceed the x-height. For all intents and purposes, it serves as the perceived height of lowercase letters.<\/li>
  • Cap-height:<\/strong> This is the height of most capital letters on a given line of text.<\/li>
  • Ascender:<\/strong> A line that oftentimes appears just above the cap height where some characters like a lowercase h<\/code> or b<\/code> might exceed the normal cap height.<\/li><\/ul>\n\n\n\n
    \"Illustrating<\/figure>\n\n\n\n

    Each of the parts of text described above are intrinsic to the font itself. A font is designed with each of these parts in mind; however, there are some parts of typography that are left up to the type setter (like you and me!) rather than the designer. One of these is leading.<\/p>\n\n\n\n

    Leading is defined as the distance between two baselines in a set of type.<\/p>\n\n\n\n

    \"Two<\/figure>\n\n\n\n

    A CSS developer might think, \u201cOK, leading is the line-height<\/code>, let\u2019s move on.\u201d While the two are related, they are also different in some very important ways.<\/p>\n\n\n\n

    Let\u2019s take a blank document and add a classic \u201cCSS reset\u201d<\/a> to it:<\/p>\n\n\n\n

    * {\n\u00a0 margin: 0;\n\u00a0 padding: 0;\n}<\/code><\/pre>\n\n\n\n
    This removes the margin and padding from every single element.<\/p>\n\n\n\n
    We\u2019ll also use Lato from Google Fonts<\/a> as our font-family<\/code>.<\/p>\n\n\n\n
    We will need some content, so let\u2019s an create an <h1><\/code> tag with some text and set the line-height<\/code> to something obnoxiously huge, like 300px. The result is a single line of text with a surprising amount of space both above and below the single line of text.<\/p>\n\n\n\n