Recommended Elements: Typography Standards

For printed publications, the official UO fonts are Melior, a square-serif font, and Akzidenz Grotesk, a sans-serif font.

Not all users will have Melior and Akzidenz Grotesk installed on their computers, and browsers choose fonts in the order they are listed in the site’s stylesheet.

We recommend using browser-safe fonts and ending your font definitions list with either sans-serif or serif. The following are examples of common cross-platform fonts:

  • Serif fonts: Times New Roman, Times, Georgia, Palatino, Serif • Sans-serif fonts: Arial, Verdana, Helevetica, Sans-Serif A.
  • Minimize use of text graphics
  • Small text graphics such as titles and headlines are acceptable. Large blocks of text graphics are discouraged, because screen readers and search engines cannot interpret them without proper alt tags.
    Accessibility recommendation: Use header elements (H-tags) to convey document structure. Avoid creating a header look with bold or emphasis tags only.
  • Text resizing Most browsers allow users to resize screen text regardless of whether the site designer has chosen fixed or variable font sizes. Internet Explorer on Windows (IE/Win), however, will only allow text resizing with variable fonts specified. We recommend choosing variable font sizes over fixed sizes, using either percentages or em units.
  • Font sizes Variable font size examples: p { font-size: 100% } p { font-size: 1em } If you decide to use a fixed font size, pixel sizes (px) are preferred. Points (pt) are discouraged since there is no certain relationship between points and the pixels on a monitor. Fixed font size examples: p { font-size: 12px } p { font-size: 14pt }

« Prev | Table of Contents | Next »