CHAPTER 9 The Next Steps for Web Typography
Content-based Media Query Breakpoints
To determine where to introduce breakpoints, we can refer to a quote by
Jeremy Keith^59 , co-founder and technical director at Clearleft:Breakpoints should not be dictated by devices, but by content. Let the content
decide when to expand and then adjust your designs.In practice, this means that we can start with the default media query-less,
100%-wide column of text, with or without an aforementioned max-width
limit. This way the content will fill up the screen on sizes smaller than the
max-width limit and leave more room for additional columns on screens
wider than the max-width value. When it hits the max-width mark, we have
two options. First, we can start increasing the white space (for instance,
with the margin: auto; rule) until there’s enough room to comfortably fit
in a new column. Second, we can introduce a new breakpoint right away,
shrinking the original column to an acceptable minimum, while fitting a
new column into the remaining space.
There is an important trade-off when selecting between these two
options. With more controlled layouts, the information density is much
lower, which might be counter-effective, especially in Web applications or
anything else that is supposed to provide plenty of information quickly. On
the other hand, it’s much harder to keep the line length within optimal lim-
its with fully flexible layouts, and it usually results in many more break-
points and tweakpoints being set. As always, your project’s needs should
influence this decision.
Calculating the ideal line length is not the easiest of things to do. That’s
why Trent Walton proposes adding asterisks after the 45th and 75th char-
acters in a paragraph^60 , which makes life easier when observing content
that reflows at different breakpoints.59 http://www.lukew.com/ff/entry.asp?1393
60 http://trentwalton.com/2012/06/19/fluid-type/