Typography

Font Families

These are imported for you from Google Web Fonts in _system-core.scss however if you are not using system-core or the built css stylesheet, this is the @import statement you should use to import the font families with the needed weight variations:

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,500,700");

Font Weights

Not all font weights are available for each font family. Roboto is available in regular, medium, and bold. Roboto Condensed is available in light, regular, and bold.

Font Sizes

Font sizes are available in the following CSS utility classes:

.u-h{1-6}
.u-small
.u-tiny

For example, if you wanted an element to have $font-size-h3, you would use the class u-h3. If you wanted an element to have $font-size-small, you would use the class u-small.