Scaling and responsivity

[adrientetar]

Since this ebook is about typography, it should make good use of modern screens:

• On large screens, point size should be raised, line width decreased
• On mobile, it should adopt a compact design focused on the text content

Bootstrap (@TBWS) breakpoints are 768px (mobile), 992px (tablets) and 1170px (widescreens) for use with media queries.

For a design reference, see 1910 or Matthew Butterick's take on the matter.

[clagnut]

I agree some responsiveness should be built in. The layout should adapt better for smaller screens and the type could be bumped up for larger screens (but not by much - remember you sit fairly close to large screens).

However Bootstrap's break points are fundamentally wrong. They are based on some arbitrary notion of devices, but do not take any account of the design. Breakpoints should be introduced at the points that the design breaks. In our case that means setting breakpoints in ems not pixels, and looking towards putting in breakpoints when line lengths become too long or too short.

[eliotsykes]

A measure of 45 (taken from the 45-75 CPL guideline) can result in small hard-to-read text for a 320px width screen. It'd be good to have a guideline range that advised what to do for narrow screens.

[eliotsykes]

I just re-read the guide, and sorry, I missed the 40-50 guideline for multi-column layouts. 40 seems more like it.

[bakert]

Do we know what we want here. Happy to implement but not that comfortable making the decision :D