Build a small type scale which can be resized from one place.
What to build
Rules based on rem.
Requirements
- The
htmlelement has a font size of125%, which is 20px with the usual browser default. h1is2rem, which gives 40px.pis1rem, which gives 20px.smallis0.8rem, which gives 16px.
Constraints
No font size may use px.
Example
If the root works out at 10px, then 3rem is 30px.
Why it works
Each size is a multiple of the root, so changing one number rescales the page, and a reader's own text size setting still counts.
Hints
Hint 1
Change the root size on the html element.
Hint 2
rem values are multiples of that root size.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scale</title>
<style>
html { font-size: 125%; }
h1 { font-size: 2rem; }
p { font-size: 1rem; }
small { font-size: 0.8rem; }
</style>
</head>
<body>
<h1>Title</h1>
<p>Body text.</p>
<small>Fine print.</small>
</body>
</html>