Body Text

Font Families

Using custom fonts on the web is standard practice now. It is still best practice to be conscious of the number of fonts and font variants used. The more fonts and variants used, the longer it will take for the page to render for a first time visitor. We can embed web fonts directly from several online sources, including fonts.com (paid subscription), Google Fonts (free), and we can generally use downloaded fonts from a variety of other services, assuming they are properly licensed for use on the web. The discussion about which fonts are used on a project and whether they can be used on the web should happen early in a project.

Developers: The primary font family is set in the $font-family-base variable in the _vars.scss partial.

Font Size

The default font size is 16px, and is often referenced as 1rem. The default font size is inherited by all non-heading elements, including unordered and ordered lists. It is not recommended to use font smaller than this default for anything other than the items mentioned below.

Line Height

The default line-height is 1.5, which 1.5 x the font size of any given element. A paragraph with the default font size of 16px would have a line-height of 24px.

Small Copy

Meta copy, footnotes, and captions are used for styling ancillary content which represents additional details about the “main”content and not the main content itself and should be declared using <small> element.