Stepping through typography

This is subject to change – and really, the idea is that you don’t have control of the article content. It’s coming from somewhere else. It’ll have some reasonable set of rules (not random custom HTML etc), but it’s not in your control.

This shows the website, and it’s styled with whatever default styles your browser has in place (the user-agent styles).

In the case of CodePen, we think (at the time of writing) they use the Meyer Reset meyerweb.com/eric/tools/css/reset .

Take a look at it and see if you can understand what it’s doing. Hint: it’s not really “resetting” anything – is it? It’s just setting some properties on some elements. What is the goal?

Feel free to read our article on “collapsing margins” if you don’t know what they are, but this reset will remove all margins, and we can choose to ignore that whole concept if we want.

What do you think? If you could only write a little CSS to get this readable, would this be a reasonable first step?

Play around with the line-height. Play around with the font-size.

And very importantly, go into your browser settings and change the default font size to really small or really bit – and come back and see what happened. We want users to be able to set their preferred body-copy reading size.

Before moving on, make sure you’re really comfortable with the rem, em, and no-unit units shown here.