By Marko Dugonjić CHAPTER 9The first thing that’s always recommended is to reset margins and
padding. Whether you prefer to use Eric Meyer’s reset.css^50 or a more radical
asterisk reset, the goal is to take full control over the document. It might
seem like overkill at first, but it forces us to revisit all of the elements and to
take care of the tiniest of details.
- { margin: 0; padding: 0 }
html { font-size: 100%; line-height: 1.5em; }
Since the ideal line length is somewhere around 66 characters^51 , we
can limit the maximum width of the basic block of text to 33em, given that
an average character width is around half an em. To keep things relatively
safe and simple, the bottom margin on block level elements can be set to
the same value as the line height, which in this case is 1.5em. This way, we
preserve the vertical rhythm — a repeating pattern our brains are used to
— helping our eyes to jump double the line height and not some arbitrary
length, that’s off-rhythm.
article { max-width: 33em; }
p, ul, ol, dl, table { margin-bottom: 1.5em; }
We can also extend the max-width rule a little more for international
audiences. Based on Vasilis van Gemert’s article “Logical Breakpoints For Your
Responsive Design”^52 , Jordan Moore came up with the idea of language-based
line lengths^53. Since the ideal line length might vary from language to lan-
guage, we can apply language-specific line length maximum values:
article { max-width: 33em; }
:lang(de) article { max-width: 40em; }
50 http://meyerweb.com/eric/tools/css/reset/
51 http://smashed.by/66char
52 http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
53 http://www.jordanm.co.uk/post/44359705696/responding-to-language