Default to an OS-specific font stack that responds to the user’s corporate aesthetic of choice (Apple, Google, Microsoft).
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Helvetica, sans-serif;
Build global and local type scales in augmented fourth intervals.
Set global line-height of 1.414 to all elements with the exception of headings, which should default to 1.25. With the following CSS snippet, reset global margins for every block-level element:
body * + * {
margin-top: 1em;
}
Here is a sample type scale set in augmented fourth intervals with additional styling:
-
Level one heading
font-size: 2.827em; -
Level two heading
font-size: 2em; -
Level three heading
font-size: 1.414em; -
This is a paragraph.
font-size: 1em; -
This is small text.
font-size: 0.707em;