image representing the current explore topic

Typographic Styles

Typographic Samples

Below you'll find each of the font's we use, the first of which, Roboto, is treated as our Primary font (for which the sass var is $fontPrimary) and our secondary font is Nunito Sans (sass var: $fontSecondary).  When combined these two fonts cover a wide array of usages from small descriptive text, to large header styles.

nunito sans, sans-serif

Regular
Medium
Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
012456789

roboto

Regular
Medium
Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
012456789

Header Styles

These are our header styles, each of these is tied to one of the various <h1>, <h2>, etc. You will also find they are used independent of the header elements as well. Each of the below can be found under its name within the CKEditor in the styles dropdown.

 

Display Header Large

Header Medium

Title Medium Bold

Title Medium

Title Small Uppercase

Title Small

Paragraph Styles

These paragraph styles are used to provide consistency within our copy styles, the majority of pages/copy will be displayed in the Body Medium style, while the other styles such as Description Small or Caption Small are used to provide eye catching pieces of detail. When unsure which body style to use, pick Body Medium.

 

Body Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis dignissim dignissim. Aenean ac ante sit amet tortor hendrerit ultricies. Suspendisse facilisis, ipsum eu elementum dignissim, nulla nisl scelerisque est, quis vehicula est odio non mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lobortis viverra nulla dapibus rutrum. Proin faucibus sodales lectus quis viverra. Etiam id luctus quam. Nulla eu porttitor tortor. Vivamus nec ultricies purus.

 

Body Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis dignissim dignissim. Aenean ac ante sit amet tortor hendrerit ultricies. Suspendisse facilisis, ipsum eu elementum dignissim, nulla nisl scelerisque est, quis vehicula est odio non mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.

 

Description Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis dignissim dignissim. Aenean ac ante sit amet tortor hendrerit ultricies. Suspendisse facilisis, ipsum eu elementum dignissim, nulla nisl scelerisque est, quis vehicula est odio non mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lobortis viverra nulla dapibus rutrum. Proin faucibus sodales lectus quis viverra. Etiam id luctus quam. Nulla eu porttitor tortor. Vivamus nec ultricies purus.

 

Caption Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis dignissim dignissim. Aenean ac ante sit amet tortor hendrerit ultricies. Suspendisse facilisis, ipsum eu elementum dignissim, nulla nisl scelerisque est, quis vehicula est odio non mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lobortis viverra nulla dapibus rutrum. Proin faucibus sodales lectus quis viverra. Etiam id luctus quam. Nulla eu porttitor tortor. Vivamus nec ultricies purus.