Typography for print

James Madison University’s primary type family is Artegra (sans and slab), both are contemporary and comprehensive typefaces consisting of over 200 total fonts. This versatile family has multiple weights and supports upwards of 100 languages. Both elegant and easy to read, Artegra is suited for display and text purposes and is a cornerstone of the JMU brand.

 typography.png

Because of a limited number of licenses, fonts are only available for JMU Faculty and Staff: Please email visualbrand@jmu.edu for access to download the Artegra fonts

Typographic elements for print

Brand typography has composition standards. Typefaces, font weights, point sizes and template grid shall be consistent throughout an article. Formatting headline and body text depends on the audience and message.

With formal typography, headlines may be centered and body text justified. With informal typography, headlines may be flush left and body text flush left/ragged right.

For formatting a headline, make sure it is adjacent to its body text and avoid all capital characters using a serif font in a long headline that has more than a few words on one line.

For formatting body text, the first paragraph is always flush left to the margin (no indent). For subsequent paragraphs, either indent the first line with no line space after the paragraph or make the first line flush left to the margin with a line space after the paragraph. Never combine both elements in an article.

Graphic heading style

This is a sample heading style for print that mimics the typography of the Being the Change mark. It can help to create our brand feel and be a subtle tie-in to the tagline. The “Doing the Thing” word pattern can be used, or the style can simply be applied to the heading of your choice.

btc-heading.png

Drop caps

cap

In editorial design, the drop cap signifies the first paragraph of a story. It either replaces the first letter of the paragraph with text running around it or the drop cap goes behind the opening lines of text. The drop cap character size should be a minimum of five lines deep and may extend well into the next paragraph. The font should either match the story font or contrast it. For example, a sans serif drop cap nicely contrasts serif text. Drop caps are often brand colors or may match a significant color from a photo or graphic within the story.

Bullets

bullets

Use distinctive dingbat graphics like squares or triangles in brand purple or gold colors. For bold graphics like squares, make the dingbat point size slightly smaller than the point size of the text. Avoid generic dot bullets associated with commonplace desktop publishing. Adobe ITC Zapf Dingbats is the preferred font.

Web urls

url

Display URLs at the end of a paragraph or the bottom of an ad. Set off using brand colors in a bold font, preferably sans serif, for quick recognition. When displaying websites that contain “www.” such as www. jmu.edu, delete the http:// from the beginning of the URL. Avoid breaking a URL to two lines. If this is necessary, make sure no hyphens are inserted and break the URL between whole words.

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 16px, line-height: 24px default paragraph typography 

The quick brown fox jumps over the lazy dog

H1: Arvo 32px 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 26px 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

*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 for web

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

Text formats for web

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 unecessary. But do include “https://” since this may impact functionality

x https://www.jmu.edu/visit/index.shtml
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 for web
Email typography

To build emails with approved typography, please use iModules templates and complex items.

Back to Top