Fonts for the web


 

Web browsers use the fonts installed on a visitor’s computer, so a list of commonly installed, similar-looking fonts should be specified in a web site’s CSS file in order for a website to display as it is designed. A font-family CSS statement should present fonts in order of preference.

Sometimes text can be presented as a graphic when a non-system font is needed, but this should be done sparingly and with thought. When text is presented as a graphic — as in a header, for example — the text graphic should utilize the ALT text attribute with the text for that content and the graphic should be optimized to be as small as possible in file size to allow for faster page loading.

UNCG WEB FONT USAGE

For headlines that express the “Why” core values of our “Why-How-What” Strategy, the sans-serif font Trade Gothic Bold Condensed No. 20 will be used selectively as a headline and display font in electronic media. Because it is not a standard system font, headlines and display treatments that use Trade Gothic Bold Condensed No. 20 must be created as a graphic and placed in your layout the way you would any image. Include the headline text in the ALT text for the image. Keep in mind that these additional graphics can increase load time on your web site or eNewsletter. Be judicious in their use and optimize the images to keep file sizes small.

“Why” headlines using the sans-serif font Trade Gothic Bold Condensed No. 20 should be in all caps and at least triple the size of any body copy in the layout.  Frequently, these headlines will be shown together with black and white photography. In these instances, use Trade Gothic Bold Condensed reversed to white. No special kerning is required. Read more about the use of Trade Gothic in the fonts section under Brand Elements.


If you do not have Trade Gothic Bold Condensed No. 20 on your computer, request it here.

Other headings, sub-headings and callouts

Georgia regular may also be used for headlines that use the “Why-How-What” Strategy, and Georgia regular, italic, bold or bold italic may be used for sub-headlines, headers, sub-headers and callouts.

Because Georgia is a common system font, it is the preferred font for headlines, sub-headlines, headers, sub-headers and callouts.

CSS font-family declaration for headlines and sub-headlines should be declared in the order as shown below. Georgia should always be the first font presented in this list.

font-family: Georgia, ‘Times New Roman’, sans-serif;

Georgia is installed on university work stations.

Navigation
Navigation on web sites and other electronic communications should be styled in the san-serif font Arial.

font-family: Arial, Helvetica, sans-serif;

Sidebars

Sidebar headings and sub-headings should utilize the serif font, Georgia. All other text and/or navigation elements in a sidebar should be displayed in the san-serif font Arial, with Helvetica and sans-serif listed as secondary options:

font-family: Arial, Helvetica, sans-serif;

Body copy

Body copy on web sites and other electronic communications should be styled in the san-serif font Arial, with Helvetica and sans-serif listed as substitute options. In most instances, body copy should be set as flush left. Font size for the content part of a web page is set at .75em in the UNCG global styles which will make content copy sized at 75 percent of the visitor’s default browser font size. The content copy line spacing (or line-height in CSS terminology) should be 1.7.

font-family: Arial, Helvetica, sans-serif;
font-size: .75em;
line-height: 1.7

In most cases, when web developers use the UNCG web assets including the global style sheet, body font styling should default to the above CSS. In situations where it is not possible to directly use the UNCG web assets, developers should approximate this font styling as closely as possible.