Download - Deep Dive into Line-Height
![Page 1: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/1.jpg)
LINE-HEIGHTINTODEEP DIVE
![Page 2: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/2.jpg)
Why should you care about
line-height?
![Page 3: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/3.jpg)
Because line-height is an integral part of CSS-based
layouts.
![Page 4: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/4.jpg)
It can help to make our content easier to read and
comprehend.
![Page 5: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/5.jpg)
It can be used to control the vertical rhythm of multiple
column layouts.
![Page 6: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/6.jpg)
It can be used to centre inline content vertically.
![Page 7: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/7.jpg)
But also because it is one of the fundamentals of CSS, like font-sizing, the cascade, inheritance
and selectors.
![Page 8: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/8.jpg)
But before we begin, let's go back in time and look at the term
“leading”.
![Page 9: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/9.jpg)
What is leading?
![Page 10: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/10.jpg)
Back in the “good old days” type was set by hand using printing
presses.
![Page 11: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/11.jpg)
Printed material was created by setting out letters in rows. Each
letter was created on anindividual block.
![Page 12: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/12.jpg)
![Page 13: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/13.jpg)
Leading, or lead strips were added between the lines of letters when additional vertical
space was required.
![Page 14: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/14.jpg)
The term “leading” is still used today in print typography, where it refers to the distance
between the baselines of successive lines of type.
![Page 15: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/15.jpg)
In CSS, the line-height property is used to control the vertical
space between lines.
![Page 16: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/16.jpg)
However, as we will soon see, “leading” is still used in
association with CSS line-height.
![Page 17: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/17.jpg)
Syntax
![Page 18: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/18.jpg)
The CSS line-height syntax looks like this:
https://www.w3.org/TR/CSS2/visudet.html#line-height
![Page 19: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/19.jpg)
<'line-height'> = normal | <number> | <length> | <percentage> | inherit
![Page 20: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/20.jpg)
This means that line-height can be specified using one of the
following methods:
![Page 21: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/21.jpg)
Option 1: Line-height can be specified as “normal” which is
the initial value. By default, browsers use between 1.0 - 1.2
line-height.
![Page 22: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/22.jpg)
body { line-height: normal; }
![Page 23: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/23.jpg)
Option 2: Line-height can be specified as “inherit” which will inherit the line-height from the
parent.
![Page 24: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/24.jpg)
body { line-height: inherit; }
![Page 25: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/25.jpg)
Option 3: Line-height can be specified using a percentage
value.
![Page 26: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/26.jpg)
body { line-height: 120%; }
![Page 27: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/27.jpg)
Option 4: Line-height can be specified using a length value.
![Page 28: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/28.jpg)
body { line-height: 20px; }
![Page 29: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/29.jpg)
A wide range of different types of length values can be
used such as:
![Page 30: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/30.jpg)
/* FONT RELATATIVE LENGTHS */
/* font size of the element */body { line-height: 1em; }/* x-height of the element’s font */body { line-height: 1ex; }/* width of the "0" in the element’s font */body { line-height: 1ch; }/* font size of the root element */body { line-height: 1rem; }
![Page 31: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/31.jpg)
/* VIEWPORT PERCENTAGE LENGTHS */
/* 1% of viewport’s width */body { line-height: 1vw; }/* 1% of viewport’s height */body { line-height: 1vh; }/* 1% of viewport’s smaller dimension */body { line-height: 1vmin; }/* 1% of viewport’s larger dimension */body { line-height: 1vmax; }
![Page 32: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/32.jpg)
/* ABSOLUTE LENGTHS */
/* pixels */body { line-height: 1px; }/* millimeters */body { line-height: 1mm; }/* quarter-millimeters */body { line-height: 1q; }/* centimeters */body { line-height: 1cm; }
![Page 33: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/33.jpg)
/* inches */body { line-height: 1in; }/* points */body { line-height: 1pt; }/* picas */body { line-height: 1pc; }
![Page 34: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/34.jpg)
Option 5: Line-height can be specified using a number value
(a unit-less value).
![Page 35: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/35.jpg)
body { line-height: 1; }
![Page 36: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/36.jpg)
Number values can be specified in a range of different ways, as
long as they are positive values.
![Page 37: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/37.jpg)
/* Valid number values for line-height */body { line-height: 3; }body { line-height: 3.01; }body { line-height: .30; }body { line-height: .3; }body { line-height: 0; }body { line-height: 0.0; }body { line-height: -0.0; }body { line-height: +0.0; }
![Page 38: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/38.jpg)
Shorthand
![Page 39: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/39.jpg)
These five line-height values can also be specified using the font shorthand property.
![Page 40: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/40.jpg)
The line-height value is written in conjunction with the font-size value - separated by a slash:<font-size>/<line-height>
https://www.w3.org/TR/CSS2/fonts.html#font-shorthand
![Page 41: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/41.jpg)
<'font'> = [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
![Page 42: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/42.jpg)
body { font: 1em/normal arial, helvetica, sans-serif;}
![Page 43: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/43.jpg)
body { font: 1em/inherit arial, helvetica, sans-serif;}
![Page 44: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/44.jpg)
body { font: 1em/20px arial, helvetica, sans-serif;}
![Page 45: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/45.jpg)
body { font: 1em/120% arial, helvetica, sans-serif;}
![Page 46: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/46.jpg)
body { font: 1em/1.2 arial, helvetica, sans-serif;}
![Page 47: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/47.jpg)
Inheritance
![Page 48: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/48.jpg)
Some CSS properties are inherited - which means that
their values are passed down to descendant elements.
![Page 49: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/49.jpg)
For the line-height property, inheritance is a little more
complicated than many other properties.
![Page 50: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/50.jpg)
To see how line-height inheritance works, we will use four examples where the line-
height is set on the body only.
![Page 51: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/51.jpg)
Percentage line-height
![Page 52: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/52.jpg)
In the following example, the line-height for the body element
has been set with a percentage value (120%).
![Page 53: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/53.jpg)
body { font-size: 16px; line-height: 120%;}
h1 { font-size: 32px; }p { font-size: 16px; }footer { font-size: 12px; }
![Page 54: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/54.jpg)
The percentage value and the body element’s font size are
used to create a calculated value (16px x 120% = 19.2px).
![Page 55: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/55.jpg)
This calculated value is inherited by descendant
elements.
![Page 56: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/56.jpg)
body 16px 120% 16 x 120% = 19.2pxh1 32px inherits calculated value 19.2pxp 16px inherits calculated value 19.2px
footer 12px inherits calculated value 19.2px
![Page 57: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/57.jpg)
This results in a line-height which is acceptable for paragraph content, but too tight for
headings and too open for the footer text.
![Page 58: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/58.jpg)
![Page 59: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/59.jpg)
Length line-height
![Page 60: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/60.jpg)
In the following example, the line-height for the body element
has been set with a length value (20px).
![Page 61: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/61.jpg)
body { font-size: 16px; line-height: 20px;}
h1 { font-size: 32px; }p { font-size: 16px; }footer { font-size: 12px; }
![Page 62: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/62.jpg)
The length value (20px) is inherited directly by descendant
elements.
![Page 63: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/63.jpg)
body 16px 20px 20pxh1 32px inherits 20px 20pxp 16px inherits 20px 20px
footer 12px inherits 20px 20px
![Page 64: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/64.jpg)
Again, this results in a line-height which is acceptable for
paragraph content, but too tight for headings and too open for
the footer text.
![Page 65: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/65.jpg)
![Page 66: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/66.jpg)
Normal line-height
![Page 67: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/67.jpg)
In the following example, the line-height for the body element
has been set with the “normal” value.
![Page 68: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/68.jpg)
body { font-size: 16px; line-height: normal;}
h1 { font-size: 32px; }p { font-size: 16px; }footer { font-size: 12px; }
![Page 69: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/69.jpg)
In this case, the normal value rather than a calculated value is
inherited by descendant elements. Browsers may
interpret the actual normal value in slightly different ways.
![Page 70: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/70.jpg)
body 16px normal 16 x 1.2 (approx.) = 19.2px (approx.)h1 32px normal 32 x 1.2 (approx.) = 38.4px (approx.)p 16px normal 16 x 1.2 (approx.) = 19.2px (approx.)
footer 12px normal 12 x 1.2 (approx.) = 14.4px (approx.)
![Page 71: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/71.jpg)
This method scales the line-height to suit each element. This results in a line-height which is acceptable for the paragraph,
heading and footer content.
![Page 72: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/72.jpg)
![Page 73: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/73.jpg)
Number line-height
![Page 74: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/74.jpg)
In the following example, the line-height for the body element has been set with a number
value (1.2).
![Page 75: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/75.jpg)
body { font-size: 16px; line-height: 1.2;}
h1 { font-size: 32px; }p { font-size: 16px; }footer { font-size: 12px; }
![Page 76: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/76.jpg)
In this case, the factor (1.2) rather than a calculated value is
inherited by descendant elements.
![Page 77: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/77.jpg)
body 16px 1.2 16 x 1.2 = 19.2pxh1 32px factor of 1.2 32 x 1.2 = 38.4pxp 16px factor of 1.2 16 x 1.2 = 19.2px
footer 12px factor of 1.2 12 x 1.2 = 14.4px
![Page 78: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/78.jpg)
Like the normal value, this method scales to suit each
element and results in a line-height which is acceptable for
the paragraph, heading and footer content.
![Page 79: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/79.jpg)
![Page 80: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/80.jpg)
Which method is best?
![Page 81: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/81.jpg)
Number values are the preferred method as they work
well when inherited.
![Page 82: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/82.jpg)
Unlike the “normal” keyword, number values allows us to set
specific line-heights for different types of elements.
![Page 83: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/83.jpg)
Inline boxes and line-height
![Page 84: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/84.jpg)
Types of boxes
![Page 85: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/85.jpg)
In order to understand line-height more fully, we need to
look at various types of CSS boxes.
![Page 86: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/86.jpg)
If we look at a simple paragraph of text, there are a range of possible boxes that are
relevant.
![Page 87: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/87.jpg)
The paragraph is referred to as a containing box in this case - as
it contains other boxes.
![Page 88: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/88.jpg)
The paragraph can also be referred to as a block box as it
displays as a block - with whitespace before and after.
![Page 89: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/89.jpg)
containing box or block box
![Page 90: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/90.jpg)
Inside the paragraph, there may be any number of inline boxes.
These are boxes that do not form new lines like block boxes.
![Page 91: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/91.jpg)
In our example, the italic element is an inline box.
![Page 92: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/92.jpg)
inline box
![Page 93: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/93.jpg)
Other inline boxes without specific markup are referred to as anonymous inline boxes.
![Page 94: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/94.jpg)
anonymous boxes
![Page 95: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/95.jpg)
Inline boxes sit side-by-side within the containing box,
forming line boxes.
![Page 96: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/96.jpg)
line boxes
![Page 97: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/97.jpg)
We’ll be looking at line boxes in more detail later.
![Page 98: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/98.jpg)
The content area is the invisible box that surrounds the text. Its
height is determined by the font-size.
![Page 99: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/99.jpg)
ÙAbcdefghijklcontent area
inline box
![Page 100: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/100.jpg)
How line-height affects inline boxes
![Page 101: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/101.jpg)
Line height is applied to inline boxes using a simple formula:
![Page 102: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/102.jpg)
Step 1. Find the difference between the
font-size and line-height. This will determine the leading.
![Page 103: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/103.jpg)
line-height - font-size = leading 20px - 16px = 4px
![Page 104: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/104.jpg)
Step 2. Divide the leading in half to
create a “half-leading” value.
![Page 105: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/105.jpg)
leading / 2 = half-leading 4px / 2 = 2px (half-leading)
![Page 106: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/106.jpg)
Step 3. Apply this half-leading value to
the top and bottom of the content area.
![Page 107: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/107.jpg)
Top half-leading: 2px Content area: 16px
Bottom half-leading: 2px Total height: 20px
![Page 108: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/108.jpg)
ÙAbcdefghijkl
inline box = 20px high
top half-leading = 2px high
bottom half-leading = 2px high
content area = 16px high
![Page 109: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/109.jpg)
However, if the line-height is smaller than the font size, the
inline box will be the height of the line height only.
![Page 110: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/110.jpg)
This means the content area will poke out the top and bottom
of the inline box.
![Page 111: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/111.jpg)
line-height - font-size = leading 12px - 16px = -4px (leading) -4px / 2 = -2px (half-leading)
Top half-leading: -2px Content area: 16px
Bottom half-leading: -2px Total height: 12px
![Page 112: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/112.jpg)
ÙAbcdefghijkl
inline box = 12px high
top half-leading = -2px high
bottom half-leading = -2px high
content area = 16px high
![Page 113: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/113.jpg)
Finally, you can also set the line-height to “0” which means
the inline element will have no height at all.
![Page 114: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/114.jpg)
line-height - font-size = leading 0 - 16px = -16px (leading)
-16px / 2 = -8px (half-leading)
Top half-leading: -8px Content area: 16px
Bottom half-leading: -8px Total height: 0
![Page 115: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/115.jpg)
ÙAbcdefghijklinline box = 0px high
content area = 16px high
![Page 116: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/116.jpg)
Using line-height to vertically align content
![Page 117: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/117.jpg)
Line-height can be used to vertically align content inside a
parent container as long as the content is one line only.
![Page 118: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/118.jpg)
For example:Let’s take a small piece of text
with font-size 16px and we want it to to be vertically aligned inside
a parent that is 200px high.
![Page 119: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/119.jpg)
We can set the line-height to 200px and this text will
automatically sit in the vertical centre of the parent.
![Page 120: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/120.jpg)
line-height - font-size = leading 200px - 16px = 184px (leading) 184px / 2 = 92px (half-leading)
Top half-leading: 92px Content area: 16px
Bottom half-leading: 92px Total height: 200px
![Page 121: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/121.jpg)
ÙAbcdefghijkl
inline box = 200px
top half-leading = 92px
bottom half-leading = 92px
content area = 16px
![Page 122: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/122.jpg)
Line boxes
![Page 123: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/123.jpg)
How inline boxes affect line boxes
![Page 124: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/124.jpg)
The height of line boxes is determined by the tallest inline box (or replaced element) inside
the line.
![Page 125: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/125.jpg)
The tallest inline box could be an anonymous inline box.
![Page 126: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/126.jpg)
Some text in a line
line boxanonymous inline box
top half-leading
bottom half-leading
![Page 127: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/127.jpg)
It could be an inline box with increased line-height (which makes this inline box taller than
other inline boxes).
![Page 128: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/128.jpg)
Some text
line box
X hereinline box with
increased line-height
![Page 129: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/129.jpg)
It could be an inline box with a larger font-size (which makes this inline box taller than other
inline boxes).
![Page 130: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/130.jpg)
Some text
line box
X hereinline box with
increased font-size
![Page 131: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/131.jpg)
Depending on the browser, it could be the presence of a superscript or subscript.
(Some browsers render superscript elements in a way
that affects line boxes)
![Page 132: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/132.jpg)
Some text
line box
2 heresuperscript inline box
![Page 133: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/133.jpg)
Side note: We can solve this by setting the sup and sub elements with line-
height set to “0”.
![Page 134: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/134.jpg)
sub,sup { line-height: 0;}
![Page 135: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/135.jpg)
Or even the presence of a replaced element that is larger than the text around it, such as
an image.
![Page 136: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/136.jpg)
Some text
line box
herereplaced element
anonymous inline box
![Page 137: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/137.jpg)
Inline boxes poking out of line boxes?
![Page 138: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/138.jpg)
Line boxes are laid out one after the other, spreading to
the width of the containing box.
![Page 139: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/139.jpg)
Some text that spreads over about
three different lines in a small set of
line boxes
![Page 140: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/140.jpg)
As we have seen, line boxes will grow to the height of inline
boxes inside.
![Page 141: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/141.jpg)
three different lines in a small set of
Some text that spreads over about
line boxes inline box with increased font-size
![Page 142: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/142.jpg)
However, there are times when aspects of inline boxes will
poke out of the top and/or bottom of line boxes.
![Page 143: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/143.jpg)
An example is an inline box with padding, margin or border.
![Page 144: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/144.jpg)
Because inline boxes cannot be given height, padding, margin and border can be
present above and below the element, but they do not affect
the line box.
![Page 145: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/145.jpg)
Some text here
inline box padding pokes out of line box
![Page 146: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/146.jpg)
Browsers will render the line boxes in document order. So, borders on subsequent lines
may paint over the borders and text of previous lines.
![Page 147: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/147.jpg)
Some text that spreads over about
three different lines in a small set of
line boxes in a paragraph.
paints over previous line
paints over previous line
![Page 148: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/148.jpg)
Ideal line-height?
![Page 149: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/149.jpg)
The concept of “ideal line-height” depends on a wide range of factors including the
element, the type of content, and the column width.
![Page 150: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/150.jpg)
For this reason, I’m only going to touch on suggested line-hight for
a small set of elements, in specific circumstances.
![Page 151: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/151.jpg)
Research has shown that line-height that is too small can
make content harder to read as users have to work harder to
move from line to line.
![Page 152: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/152.jpg)
Similarly, line-height that is too large can force users eyes
have to travel further to read content, which can become
tiring.
![Page 153: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/153.jpg)
The WCAG 2.0 guidelines state that: “line spacing is at least
space-and-a-half within paragraphs”.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
![Page 154: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/154.jpg)
This means that general content such as paragraphs should be
set to a line-height of 1.5.
![Page 155: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/155.jpg)
p { line-height: 1.5; }
![Page 156: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/156.jpg)
The same rules should apply to ordered and unordered lists
which have a lot of content inside each list item.
![Page 157: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/157.jpg)
li { line-height: 1.5; }
![Page 158: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/158.jpg)
However, content-heavy list items could then bleed into each other, so you might want to add
additional space after list items.
![Page 159: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/159.jpg)
li {line-height: 1.5;margin-botton: .5em;
}
![Page 160: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/160.jpg)
On the other hand, headings often look strange when there is too much line-height, so I generally set headings to 1.1 or
1.2 - much tighter than paragraphs.
![Page 161: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/161.jpg)
h1,h2,h3,h4,h5,h6 {line-height: 1.1;
}
![Page 162: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/162.jpg)
Responsive line-height?
![Page 163: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/163.jpg)
Several years ago, I was involved in user testing a content-heavy website where we wanted the
content to be “as readable as possible” at all screen sizes.
![Page 164: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/164.jpg)
We tested a range of different factors including font-family,
font-size, color and line-height.
![Page 165: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/165.jpg)
As well as testing specific tasks, and recording times for these tasks, we also asked users
directly about these factors after each test was concluded.
![Page 166: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/166.jpg)
It turned out that users were reasonably comfortable with
paragraphs and lists that were anywhere from 1.4 - 1.6 at
large and mid screen sizes.
![Page 167: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/167.jpg)
However, users were more comfortable with slightly less
line-height (between 1.3 - 1.5) at small screen size, as the
lines were much shorter.
![Page 168: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/168.jpg)
As long as line-height is set using number values, it is very
easy to tweak line-heights for the different screen sizes.
![Page 169: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/169.jpg)
p,li { line-height: 1.4; }
@media(min-width: 320px) {p,li { line-height: 1.5; }
}
![Page 170: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/170.jpg)
Baseline grids
![Page 171: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/171.jpg)
“Vertical rhythm” in multiple column layouts is where you to establish a baseline grid that aligns across multiple columns
![Page 172: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/172.jpg)
No numquam interpretaris duo. Ei pri nullam sanctus, sea ornatus probatus pertinax an. Saepe persius delectus cum eu, ea vim numquam electram aliquando. Et eos erat dolorem abhorreant, quem stet vidit te per. Inermis nonumes mei no, et has ornatus antiopam cotidieque.
Subheading
Ut sit paulo consulatu, mea nonumy appareat conceptam et. Dicat consulatu hendrerit duo at, ei sea tation antiopam accommodare. Eam ad perfecto imperdiet, novum solet eu mei. Eu eam aliquam consulatu instructior, vel vocibus oportere intellegebat ex.
Heading Level 1
Lorem ipsum dolor sit amet, has id discere platonem ocurreret, ut duo audire senserit maiestatis, per ex assum instructior. Quo assum facete deleniti ne. Ei pri nisl voluptatum.
Amet laboramus sententiae te usu. Et cum quis amet veniam, mel case omittam id, ei vis atqui.
Te munere audire sit, cu sea vidisse probatus, munere molestie voluptatibus id ius. Paulo intellegebat has id. Nam no graecis fastidii perfecto, nec ut atomorum salutatus. Usu at rebum zril principes, hinc esse id cum. Nam ridens ullamcorper et.
![Page 173: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/173.jpg)
Using Desktop Publishing software, this can easily be
achieved by simply checking a “snap to baseline grids”
button.
![Page 174: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/174.jpg)
However, it’s much harder using CSS. Here are some steps to achieve a simple
baseline grid.
![Page 175: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/175.jpg)
Step 1. Set a line-height which will become the baseline grid.
16px / 24px
![Page 176: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/176.jpg)
$baseline: 24px;
![Page 177: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/177.jpg)
Step 2. Set headings, paragraphs and
lists with this line-height.
![Page 178: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/178.jpg)
$baseline: 24px;
h1 { line-height: $basefont*2;}
p { line-height: $baseline;}
![Page 179: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/179.jpg)
Step 3. Turn off margin-top on all of these elements, and set the
margin-bottom to match the line-height. This will set consistent one full line gaps after each
element.
![Page 180: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/180.jpg)
No numquam interpretaris duo. Ei pri nullam sanctus, sea ornatus probatus pertinax an. Saepe persius delectus cum eu, ea vim numquam electram aliquando. Et eos erat dolorem abhorreant, quem stet vidit te per. Inermis nonumes mei no, et has ornatus antiopam cotidieque.
Subheading
Ut sit paulo consulatu, mea nonumy appareat conceptam et. Dicat consulatu hendrerit duo at, ei sea tation antiopam accommodare. Eam ad perfecto imperdiet, novum solet eu mei. Eu eam aliquam consulatu instructior, vel vocibus oportere intellegebat ex.
Heading Level 1
Lorem ipsum dolor sit amet, has id discere platonem ocurreret, ut duo audire senserit maiestatis, per ex assum instructior. Quo assum facete deleniti ne. Ei pri nisl voluptatum.
Amet laboramus sententiae te usu. Et cum quis amet veniam, mel case omittam id, ei vis atqui.
Te munere audire sit, cu sea vidisse probatus, munere molestie voluptatibus id ius. Paulo intellegebat has id. Nam no graecis fastidii perfecto, nec ut atomorum salutatus. Usu at rebum zril principes, hinc esse id cum. Nam ridens ullamcorper et.
![Page 181: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/181.jpg)
$baseline: 24px;
h1 { line-height: $basefont*2; margin-bottom: $baseline;}p { line-height: $baseline; margin-bottom: $baseline;}
![Page 182: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/182.jpg)
Step 4. You may need to set font-sizes
to the same ratios.
![Page 183: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/183.jpg)
$basefont: 16px;$baseline: 24px;
h1 { line-height: $basefont*2; margin-bottom: $baseline;}p { font-size: $basefont; line-height: $baseline; margin-bottom: $baseline;}
![Page 184: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/184.jpg)
However, nothing is ever that simple. As soon as you
introduce pull-quotes, different headings, special content and
images, things can quickly break down.
![Page 185: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/185.jpg)
https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414
http://alistapart.com/article/settingtypeontheweb
http://stephanecurzi.me/baselinecss.2009/grid.html
![Page 186: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/186.jpg)
Conclusion
![Page 187: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/187.jpg)
Line-height is everywhere in our layouts. It’s in our headings,
in our nav items, our form controls, our buttons.
![Page 188: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/188.jpg)
Understanding how line-height works will make your job a lot
easier.
![Page 189: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/189.jpg)
We’re done.
![Page 190: Deep Dive into Line-Height](https://reader034.vdocuments.site/reader034/viewer/2022050614/587c0de21a28ab03768b6057/html5/thumbnails/190.jpg)
Russ Weakley Max Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley