New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9

Obviously, there are natural boundaries for both line length and line
height. While we need to reduce line height at short line lengths, we
should be careful not to clash extenders in consecutive rows.
Line length can be easily controlled with min- and max-width in CSS,
but there is currently only one fixed value available for line height in CSS.
In spite of that, we can tweak font size, line height and bottom margin with
media queries, depending on the line length at any given breakpoint. The
paragraph code at different breakpoints would look something like this:

@media only screen and (min-width: 37.5em) {
p {
font-size: 1rem; / 16px /
line-height: 1.4;
margin-bottom: 1.4em; / = line-height /
}
}
@media only screen and (min-width: 50em) {
p {
font-size: 1.125rem; / 18px /
line-height: 1.45;
margin-bottom: 1.45em; / = line-height /
}
}

How tight is too tight? Test this with a row of letters q or p followed by a row

of bs or ds. For international audiences you might want to enter an upper-

case with a diacritic, for instance Š.