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.