Typography
The CMS for UNC's website uses various weights and sizes from the Google Font Open Sans. Below is a list of the styles used. You can change between them in the CMS in the WYSIWYG toolbar. The color and sizes are predetermined and should not be changed in any instance.
Headline One (H1)
A header one will only be used one time on a page and is the first headline on the page.
Headline Two (H2)
A header two can be used multiple times on a page, once per row, but not multiple times within the same row.
Headline Three (H3)
A header three should be used after a header two, and can be used multiple times within a section.
Headline Four (H4)
A header four should be used after a header three, and can be used multiple times within a section.
Headline Five (H5)
A header five should be used after a header four, and can be used multiple times within a section.
Headline Six (H6)
A header six should be used after a header five, and can be used multiple times within a section.
Paragraph Text
Anytime you place a lot of copy on a page, it should be in the paragraph style.
Link Styles
Inline links, those that appear in body copy, are easily distinguishable from body copy by being styled a bit different.
The link style is bold and on hover, changes to gold to indicate to the user there is an action to be had by clicking the link.
Inline links should be contextual links, setting the context for where it will take you. Try to avoid text links like "Click Here," "browse this section to...," "for more information click here" or "on this page you will find." Instead, insert the link in the natural sentence structure and let the bold, blue styling indicate the link action.
Examples:
Do This:
The University of Northern Colorado commits to the success of its students by providing a solid liberal arts foundation, relevant professional coursework and real-world experiences in an environment where faculty and staff value personal attention as a key to learning.
Don't Do This:
to see how The University of Northern Colorado commits to the success of its students by providing a solid liberal arts foundation, relevant professional coursework and real-world experiences in an environment where faculty and staff value personal attention as a key to learning.
Styling Text to Help Break Up Your Page
Adding some subheads and inline styling to your page will help visually break up the content for the reader. Below is a sample of a page that uses the various styles of headings to help take a reader down a page that would have been pretty text heavy if not styled.
