"Don't compose without a scale"
Our choices of font-sizes for the various headings and body text should reflect some pre-determined plan, rather than being done haphazardly. Over the last four hundred years there have developed some standard sizes that are a good starting point for most sites. For more information on this, I would suggest reading the appropriate sections in Elements of Typographic Style, the best book on the subject.
But let's say we want to figure out how to write this in CSS. How would we write the font-size definitions if we wanted the following?
body {
}
h1 {
/* 36 pt */
}
h2 {
/* 24 pt */
}
h3 {
/* 18 pt */
}
h4 {
/* 14 pt */
}
p {
/* 12 pt */
}
body {
font-size: 100%;
}
h1 {
font-size: 2.25em; /* 36 pt / 16 pt = 2.25em */
}
h2 {
font-size: 1.5em; /* 24 pt / 16pt = 1.5em */
}
h3 {
font-size: 1.125em; /* 18 pt / 16 pt = 1.125em */
}
h4 {
font-size: 0.875em; /* 14 pt / 16 pt = 0.875em */
}
p {
font-size: 0.75em; /* 12 pt / 16 pt = 0.75em */
}