Logical Breakpoints For Your Responsive Design

Classic typographic theory can help you determine the right breakpoints

There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no common screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks. This sounds much better. But it still leaves you with the question, How do you determine whether the layout is broken? One logical answer is to look at classic readability theory and to define our breakpoints based on that.

 

Vasilis van Gemert will start with the small screen. One theory of Oliver Reichenstein, a theory he really likes, is that font size doesn’t depend on screen size; it depends on the distance between your eyes and the device you’re using. Users tend to hold their phones closer to their head than the laptops, so this might warrant smaller fonts. The other theory of Robert Bringhurst, as explained above, is that an ideal measure should probably not be smaller than 45 characters. In Vasilis van Gemert case, where he uses a 16-pixel Georgia as the default font size, this would result in a slightly smaller font size.

Comments

Be the first to write a comment

You must me logged in to write a comment.