Cover Photo Image
Web typography

Sans-serif: Arial, Helvetica, sans-serif

Arial

Serif: Arvo, Georgia, serif

Arvo

Type sizes for web

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog

Arial 14px, line-height: 20px default paragraph typography 

The quick brown fox jumps over the lazy dog

H1: Arvo 24px used in page title

The quick brown fox jumps over the lazy dog

H2: Arvo 28px used in content headings*

The quick brown fox jumps over the lazy dog

H3 Arial 28px used for content heading* 

The quick brown fox jumps over the lazy dog H4 Arial 22px

H4 Arial 22px used in action link

The quick brown fox jumps over the lazy dog H5 Arvo 18px

H5 Arvo 18px used in link list 

The quick brown fox jumps over the lazy dog 

H6 Arial 12px, all caps, letter-spacing: .75px used in link list pre-heading

*Use H3 when the content heading is directly below the page title (in the gold below navigation); H2 can be used below an image banner or when there is content separating the H2 from the page title.

h2 and h3 usage

Text styles

In line links:
Color: #450084, border bottom.
Hover action: Color: #AA232B, border bottom.

In line link example:
This is a sample paragraph with a link ipsande llabore es id utatempor magnis audaeprerum nes ut officiis odignam saecabore cus maioremquid quatem tecae.

Basic list: 
Arial 14px Line-height: 24px

  • This is a list example
  • Aximi, secuptis sam que adicaborem comnis est
  • Porerspicius reptior itibere perspelesto ex etur

"read more" link:
font-size:12px;
text-transform: uppercase;
color: #450084;
border-bottom

Read more example:
This is a sample paragraph with a link ipsande llabore es id utatempor magnis audaeprerum nes ut officiis... READ MORE

Pullquote:
font-family: Arvo, Georgia, serif;
color: #450084;
font-size: 18px;
line-height: 22px;

Pullquote-attribution:
text-align: right;
font-style: italic;
padding: 0px;
margin-top:-12px;

Pullquote example:

"This is something cool that was said at some point in time"

—by Mr. So and so

Formats

Phone numbers: 
appear in this format

(XXX) XXX-XXXX

Web urls: 
Try not to display “ugly” urls, but instead have a word that is hyperlinked. If you must display a complete url, do not include “http://” or “www” as it is uneces - sary. But do include “https://” since this may impact functionality

x http://www.jmu.edu/visit/index.html
visit
jmu.edu/visit

Headlines:
Only capitalize the first word, unless a proper noun follows. 

x Research Opens Doors For Freshman
✓ Research opens doors for freshman
✓ Honors for Dean Smith announced 

Text and color combos

Back to Top