Typography
CSS3 introduces a few new units, including the rem
unit, which stands for "root em". The rem
unit is relative to the font-size of the root element html
. That means that we can define a single font size on the root element, and define all rem
units to be a percentage of that. The typography has font-size
defined in 1.6rem (16px) and line-height
in 1.6 (24px). Milligram uses the font-family
Roboto, created by Christian Robertson, and provided by Google.
Heading h1
4.6rem (46px)
Heading h2
3.6rem (36px)
Heading h3
2.8rem (28px)
Heading h4
2.2rem (22px)
Heading h5
1.8rem (18px)
Heading h6
1.6rem (16px)
/* Base font-size and line-height */
The base type is 1.6rem (16px) over 1.6 line height (24px)
/* Other elements to text markup */
Anchor
Emphasis
Small
Strong
Underline
/* Default Headings */
Heading
Heading
Heading
Heading
Heading
Heading
/* The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. */
Examples
You can view more examples of using Milligram.
Contributing
Want to contribute? Follow these recommendations.
Subscribe to our newsletter
The latest news and resources sent straight to your inbox.