Visual Design

Maintain Visual Hierarchy

For web pages to be usable, the visual design should guide the eye through the most important parts of the page. Users generally do not read every word on the page. Rather, they scan the page looking for information that is relevant for their goals.

Design large, visually distinct headings and subheadings to help users find their way. Generally, the title of the page should be the largest heading. Other headings and subheadings should have less visual weight according to their importance. Likewise, reserve more saturated, attention-grabbing colors for more important areas of the page.

Design Legible Text

To make text as easy-to-read as possible on the web, consider the following suggestions:

• Use generous font sizes for body text. Most browsers have a default font-size of 16px, and there is seldom reason to go below this size.
• Use generous line height / leading for paragraphs of text, to ensure that text is readable.
• Use left alignment for most text, and always for long blocks of text.
• Provide high color contrast between text and background. Consider using an accessibility color contrast checker to guarantee high contrast. Ensure that hover states also have high contrast.
• Consider limiting line lengths to no more than approximately 80 characters.
• Limit novelty fonts to small amounts of large headings; never use them for body text.

Designers often wonder whether to use serif or sans-serif fonts for readability. While older monitors could not render serifs well, current devices can display both kinds of fonts well.

Use Yale’s Identity

Yale units should use Yale colors, fonts, icons, and logo as part of their project. The University Printer maintains Yale’s Identity Website, which has these resourcse.