Typography
VCU websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels and easy-to-use input fields.
Overview
- We have selected two open-source font families that may be used on VCU websites — Roboto and Merriweather — both of which are designed for legibility and can beautifully adapt to a variety of visual styles.
- New and/or re-designed sites should reflect these typography standards.
- Other font families should not be used on VCU websites (unless approved).
How do I use the typefaces?
- Roboto
The Roboto typeface is the default for Compass out of the box.
- Merriweather
To use the Merriweather typeface, you will need to set the root--cwf-font
custom CSS property tovar(--cwf-font--serif)
. If you're in T4, you can use the "Compass - Theme" content type in the Site-Head section of your website.
Roboto
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Roboto is a sans-serif font with a dual nature. It has a mechanical skeleton and the forms are largely geometric. The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of modern simplicity.
Roboto communicates legibility and cleanliness at both large and smaller font sizes.
You can download Roboto for free. Font weights included in this package:
- Roboto Thin 100
- Roboto Light 300
- Roboto Regular 400
- Roboto Medium 500
- Roboto Bold 700
- Roboto Black 900
Merriweather
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Merriweather is a serif font, ideal for text-dense design, with excellent readability across screen sizes. The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity.
Merriweather communicates warmth and credibility at both large and smaller font sizes.
You can download Merriweather for free. Font weights included in this package:
- Merriweather Light 300
- Merriweather Regular 400
- Merriweather Bold 700
- Merriweather Black 900