Review the Brand Toolkit
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