General Typography

h1. Main Heading

The first heading in the content area, below the site main navigation, is set as an h1 tag by entering the applicable text in the "Main Heading" field in the page edit window. The h1 tag content is set to display using "Georgia", an approved alternative to standard serif font "Chronicle", as defined by university graphic standards. Georgia is a widely used system font included on most all computers and devices.

h2. Page Subheading

Each section of content following the main heading (and main image, where applicable) should be set as an h2. All h2 tag content is set to display using "Georgia."

h3. Content Subheading

<h3> tags can be used to further segment or label parts of content within a larger section. All h3 tag content is set to display "Montserrat" typeface, an approved alternative to standard sans-serif font "Gotham", as defined by university graphic standards. Montserrat is a free web-font from Google Fonts.

h4. Content Subheading

<h4> tags can be used to further segment or label parts of content. All h4 tag ontent is set to display "Montserrat" typeface.

Other headings

h5. (occasionally used)
h6. (not frequently used)

General paragraphs

A typical sentence or paragraph is set as ontent is set to display "Montserrat" typeface, an approved alternative to standard sans-serif font "Gotham", as defined by university graphic standards. Montserrat is a free web-font from Google Fonts.

Words can be bolded or italicized for special emphasis, but should be done so with careful consideration (bolding "everying" on a page bolds nothing!)

How's this for emphasis!

small text

a section of text can be 'de-emphasized" by wrapping inside a <small></small> tag. They can be used independently, or nested inside another tag:

You can add the "lead" class to a paragraph that you would like to pull out with size and font-family, like a heading, but would work well as a heading

<p class="lead"> You can add the "lead" class to a paragraph that you would like to pull out with size and font-family, like a heading, but would work well as a heading</p>

This Heading is Great!
and not at all modest

<h2> This Heading is Great <br><small>and not at all modest</small></h2>

Contact Us

Web and Internal Communications
Holly Nicholson
Assistant Director of Web Communications
hnicholson@niu.edu

Back to top