CHAPTER 9 The Next Steps for Web Typography
@media only screen and (min-width: 62.5em) {
p {
font-size: 1.312rem; /* 21px */
line-height: 1.5;
margin-bottom: 1.5em; /* = line-height */
}
}Still, this is not the best solution and it greatly depends on the number of
breakpoints. The more breakpoints we introduce, the better the experience
is. But wouldn’t it be easier if such mathematically simple rules were
applied automagically?Molten leading
In “Molten leading (or, fluid line-height)^65 ”, Tim Brown proposed range
rules for line height in CSS, which would enable designers to specify line
height limits and let the browser reflow the text following the changes of
the fluid width of the container. He suggested a new pair of CSS properties
min- and max-line-height, which would behave similarly to min- and
max-width. As we will see later in the chapter, the CSS3 Working Draft
introduced another approach for dealing with range values.
Based on Brown’s idea, Mat Marquis made Molten Leading^66 , a jQuery
plugin that solves that problem. The syntax is as easy as:$('p').moltenLeading({
minline: 1.4,
maxline: 1.7
});Paragraph Styles
If the text is straightforward and linear, and thoughts are tightly connected,
we can use an alternative more intimate way to divide paragraphs.65 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
66 https://github.com/Wilto/Molten-Leading