Typography Standards

Logo
The OSU logo is adapted from the font Bitstream™ Bell Gothic Black to create a unique arrangement of typographic forms. Always use the approved graphic for the OSU logo; do not recreate the logo using Bell Gothic or a similar font.

To maintain the unique look of the OSU logo, do not use Bitstream™ Bell Gothic Black for other applications, such as headline or body copy.

Text as an image
Graphical text is used selectively for content within a web page. Appropriate uses of graphical text include primary navigation links, site titles, and decorative headers. Graphical text allows you to precisely control the presentation of the text. This precision is important in some aspects of site design, but site developers should avoid overuse. Graphical text takes longer to download than HTML text. Users who cannot (or have chosen not to) view graphics on their browsers will see no content without the use of special alternative text (ALT tags).

Myriad Web is the recommended graphics font for primary navigation links and site titles on the OSU Web and is used throughout the OSU central pages. This font is highly legible in the web environment. The font family includes Myriad Regular Web, Myriad Italic Web, and Myriad Bold Web, and is available from Adobe (http://www.adobe.com/type/). Other fonts can be used sparingly for a specific communication purpose or to visually tie a website design to companion print publications.

View an example of text used as an image.

HTML text
HTML text should be the primary choice for most of your site's content. HTML text is fast-loading, easier to edit than graphical text, and fully accessible. Website developers do not have complete control over how HTML text displays. Instead, individual platforms, system software, browsers, screen resolution, and font preferences will determine how the HTML text will look. Thus, individual users can adjust the display to fit his or her needs.

However, the website developer can gain some control over the text by using style sheets to define relative sizes and weights. You can also specify preferences for a particular font. In the OSU Web Templates, sans serif fonts are preferred because they are more legible in the web environment than serif fonts. The sans serif font set used in the OSU style sheets (in order of preference) is: Verdana, Arial, Helvetica, sans-serif.

Links

• Embedded text links should always be underlined and appear in a color that contrasts with the rest of the text.
• Visited links should change color to alert users that they have selected that link previously.
• Primary links appearing in a distinct navigation zone do not need to be underlined or appear in a contrasting color.
• A bulleted list of links should appear in the link color, but do not need to be underlined (this can impede legibility, especially in long lists).

When text is black or dark on a light or white background, the following colors are recommended:

When text is light or white on a black or dark background, the following colors are recommended:

Best practices
Best practices in web typography include the following recommendations:

• Use relative font sizes for HTML text, rather than fixed font sizes. This allows users to adjust text size within the browser for maximum legibility, which is particularly helpful for users with impaired vision.
• Keep most text size close to the default size, avoiding very large or very small type. Changes in type size should be for a specific purpose, i.e., to provide contrast that reinforces meaning or importance. For example, breadcrumb navigation or footnotes can be smaller, to indicate that this information is secondary to the main content.
• Use boldface and italics sparingly, since they are not as legible as regular roman fonts.
• Text should have an appropriate amount of contrast with the background for maximum legibility. Avoid light-colored type or strong background images. Black or dark text on a white background is still the preferred combination for most content.
• Wide text columns are more difficult to read on the web, as in print. Because it is possible to expand web pages to fit a user's monitor, it is wise to build in elements that control line length. The ideal width of a text column is 60-70 characters. The OSU Web Templates include a content buffer feature to help limit line length.