Web Typography

Typography

  • Use Arial as the standard typeface for Oracle on the web
  • Design text with large, readable point size
  • Ensure headings use semantic HTML and are styled with sufficient differentiation
  • Pay attention to accessibility basics like contrast


Publishing on Oracle.com (VPN Access Only)
Web Standards Style Guide (VPN Access Only)


Font Size

Body Copy Default

For “desktop” (full-width) layout, standard size for body copy on Oracle websites is 18px. This can be adjusted based on project needs, just ensure the size is large enough to read without strain. 14px is the minimum for body copy. (12px is occasionally used for captions and other minor points of content.)

Variations for Responsive Breakpoints

The default global breakpoints for Oracle websites are 770px and 500px.

Desktop = 770px and up
Tablet = 770px to 500px
Mobile = 500px and below

These breakpoints represent changes in base font size. By default, fonts are reduced to 75% of desktop size for tablet, and 70% of desktop size for mobile.

 
Desktop
(770px and up)
Tablet
(770px to 500px)
Mobile
(500px and below)
 
14px
10.5px
9.8px
Base Font Size
18px
15px
14px
 
24px
18px
16.8px
 
46px
34.5px
32.2px

Line Height

Standard line height for body copy is 1.2em, where 1em is equal to the current font size in use. For example, one em in 18px body copy is equal to 18px. To determine the proper line height in pixels, just multiply the current font size by 1.2.

For the rare layout demanding a wide galley of text, line height and font size should be increased proportionately to aid in readability. The Golden Ratio Typography Calculator is a classy reference.


Headlines and Subheads

Use standard HTML header elements: H1, H2, H3, and H4 (and H5 and H6 if you must). Semantic HTML is a good thing! Design clear distinction between headers and bolded/emphasized body copy using scale, color, and other typographic dressing. (For visual accessibility, please note color cannot be the sole distinction between styles.)


Color and Contrast

To ensure the readability of text, especially for people with moderately low vision and those who perceive color differently, there must be sufficient contrast between text and its background.

Text should maintain a minimum contrast ratio of 4.5:1 for normal text, and at least 3:1 for large text. Large text is defined as 18.66px and bold or larger, or 24px or larger. A contrast ratio of 7:1 for normal text and 4.5:1 for large text is preferred.