Lessons · HTML and CSS · fonts and sizes
Fonts and sizes
font-family is a list of fallbacks ending in a generic family; font-size in rem scales with the reader's settings; line-height without a unit is a multiple of the font size.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Type is most of a page. Sizes in rem respect people who enlarge their text; a line-height of about 1.5 is the difference between readable and cramped.
How to think about it
One stack on the body, sizes in rem for headings, a unitless line-height on the body. Then leave it alone.
Worked example
body { font-family: Georgia, "Times New Roman", serif; }A stack: the first installed font wins; the generic serif at the end means there is always something.h1 { font-size: 2rem; }Relative to the root size, 16px by default: 32px, and it grows if the reader enlarges text.p { line-height: 1.5; }Unitless: one and a half times the font size, whatever the size becomes.<h1>Title</h1><p>Body text.</p>Something to set.
Your turn
Set the body text size relative to the root.
body { font-size: 1.125; }Write a page and watch it render
The trap
Sizes in px everywhere. They ignore the reader's chosen text size, so the person who needs bigger text gets the smallest page.