Review the Brand Toolkit

TypographyColor Content

Typography

FreightText Pro, Trade Gothic, Brandon Grotesque and Calibre are licensed typefaces used within University branding.

Alternative web fonts inspired by and closely resembling the brand fonts are built into the latest Missouri State web template and require no setup or further action from the end user.

Users who wish to use the web fonts on mobile applications and sites outside of web strategy and development-managed templates will require additional licensing and setup. You may contact web strategy and development for more information. Otherwise, please substitute the general user fonts as outlined below:

Brand font Web alternative font General user font
Calibre Proxima Nova Arial
FreightText Pro Freight Text Pro Georgia
Trade Gothic Bold Condensed No. 20 Alternative Gothic No. 3 D Impact

 

Headings

What is the h1 tag and why is it important?

The h1 (or heading 1) tag is the main title of a web page. This tag essentially tells search engines and web users what your page is about. The h1 tag is automatically generated by the template and is not to be applied within the content of your page.

How do headings affect accessibility?

Headings help define the organization of content, in a hierarchal way, within your page for the website visitor. Using headings in the proper way allows assistive technologies to provide in-page navigation for the visually impaired. Learn more about structuring your page with headings for optimal accessibility.

Title or sentence case. How should headings be treated?

All h1 tags are title case. All h2-h6 tags are sentence case with the exception of proper nouns. Note: department names and position titles are not proper nouns unless qualifying the subject. 

 


FreightText pro

H1 (page title)

font-family: freight-text-pro, Georgia, ‘Times New Roman’, Times, serif

font-size: 2.98598rem

line-height: 1.2

color: #0a0a0a

 


All of the following headings use:

font-family: proxima-nova, Helvetica, Arial, sans-serif

font-weight: 700

line-height: 1.2

color: #0a0a0a

Proxima-nova

H2 (heading)

font-size: 2.0736rem

Proxima-nova

H3 (heading)

font-size: 1.728rem

Proxima-nova  

H4 (heading)

font-size: 1.44rem

Proxima-nova

H5 (heading)  

font-size: 1.2rem

Proxima-nova

H6 (heading)

font-size: 1rem


alternate-gothic-no-3-d

H2 (headline)

font-family: alternate-gothic-no-3-d, ‘Helvetica Neue Condensed’, ‘Arial Narrow’, Impact, sans-serif

font-size: 3.58318rem

line-height: 1.2

text-transform: uppercase


Eyebrow

font-family: proxima-nova, Helvetica, Arial, sans-serif

font-size: .83333rem

font-weight: 700

text-transform: uppercase

letter-spacing: .2rem


Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!

Intro

font-family: proxima-nova, Helvetica, Arial, sans-serif

font-size: 1.44rem

line-height: 1.5

color: #666


Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!

P (paragraph)

font-family: proxima-nova, Helvetica, Arial, sans-serif

font-size: 1rem

 


Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!

Blockquote

font-family: alternate-gothic-no-3-d, ‘Helvetica Neue Condensed’, ‘Arial Narrow’, Impact, sans-serif

font-size: 1.728rem

line-height: 1.2

color: #0a0a0a

text-transform: uppercase