body {
font-size: 12px;
font-family: Georgia, serif;
}
p {
font-size: 1em; /* 12px */
line-height: 1.5em; /* 18px */
margin: 0 0 1.5em 0;
}
/* 24px - The quick brown fox jumps over the lazy dog */
.class-for-24px {
font-size: 2em; /* 24px */
line-height: 1.5em; /* 36px */
margin-top: 0.75em;
margin-bottom: 0em;
}
/* 22px - The quick brown fox jumps over the lazy dog */
.class-for-22px {
font-size: 1.8333em; /* 22px */
line-height: 1.6364em; /* 36px */
margin-top: 0.8182em;
margin-bottom: 0em;
}
/* 20px - The quick brown fox jumps over the lazy dog */
.class-for-20px {
font-size: 1.6667em; /* 20px */
line-height: 1.8em; /* 36px */
margin-top: 0.9em;
margin-bottom: 0em;
}
/* 18px - The quick brown fox jumps over the lazy dog */
.class-for-18px {
font-size: 1.5em; /* 18px */
line-height: 1em; /* 18px */
margin-top: 1em;
margin-bottom: 0em;
}
/* 16px - The quick brown fox jumps over the lazy dog */
.class-for-16px {
font-size: 1.3333em; /* 16px */
line-height: 1.125em; /* 18px */
margin-top: 1.125em;
margin-bottom: 0em;
}
/* 14px - The quick brown fox jumps over the lazy dog */
.class-for-14px {
font-size: 1.1667em; /* 14px */
line-height: 1.2857em; /* 18px */
margin-top: 1.2857em;
margin-bottom: 0em;
}