• Text Resize A A A
  • Print Print
  • Share Share on facebook Share on twitter Share

Typography

Creating readable text helps people focus on the information presented. Clean, adaptable fonts increase the readability of content.

Helvetica font is the web safe, sans serif font used throughout HHS.gov. Helvetica is easily legible and neutral by design, not providing an influence or meaning by itself. It is a versatile font that feels classic and modern, as well as elegant and comfortable.

Sans serif fonts have been proven to be easier to read on-screen and are adaptable when resized and displayed across different platforms and browsers.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!?#%&$@*{(/|\)}

Heading 1 (28px)

Heading 2 (26px)

Heading 3 (20px)

Heading 4 (16px)

Heading 5 (14px)

Heading 2

Pellentesque imperdiet odio euismod imperdiet consecteur. Praesent risus neque, mollis vitae arcu sed, imperdiet, vulputate uma. Proin accumsan odio ipsum. Alliquam blandit arcu nec risus dapibus vulputate. Sed quis mollis nunc. Cras viverra tincidunt diam in sodales. Aliquam luctus efficitur risus, et imperdiet velit rhoncus eget. Curabitur eget mi enim. Sed purus quam, placerat id facilisis ut, luctus at est. Phasellus auctor eget diam non rutrum. Vestibulum congue interdum omare. Cras ullamcorper tellus risus, vel consectetur elit malesuanda sit amet.


Alignment

Text alignment is left justified, providing a comfortable and natural starting point for content in languages that read from left to right.


Use of White Space

White space or negative space is used throughout the user interface design to help people focus on the primary content. This helps people concentrate on accomplishing their tasks, without distractions.

White space is key in making it easier to scan and read content. Spacing between headers and body copy, as well as other page elements, is enough to clearly establish relationships between elements while maintaining a clean, open layout. Note that too much white space between a heading and body text can make them appear disconnected. Additionally, incorporating more white space in between touch target areas also helps to prevent mis-taps on mobile and touch screen devices. Properly incorporating white space between content and in the margins has also been proven to increase comprehension.

 

Content created by Digital Communications Division (DCD)
Content last reviewed on July 20, 2017