Contents
Overview
Typography is communication design, which is a significant element of UI design. Typography is the technique of arranging type, symbols, numbers and whitespace to make written language legible and appealing when displayed. In the Oracle Alta UI, only the attributes of font, font size, font color, and line length are discussed within the broader scope of typography.
Font Face
The Oracle Alta UI relies on a set of sans-serif system fonts. The following table lists the system font recommended for each targeted OS.
| OS | Font |
|---|---|
| Windows | Segoe UI |
| Pre-OS9 - OS X v10.10 (Yosemite) | Helvetica Neue |
| OS X v10.11 (El Capitan) and OS9 for Mobile | SF UI |
| Android | Roboto |
By relying on an available OS system font, the typography of the Oracle Alta UI can take advantage of a broader range of font weights. When executed properly, the broader range of weights allows for cleaner page structure and functional groupings of UI controls and user data. The following represents the general use of font weight by font size across the system font families.
If the specified default system font is not available or unspecified for an OS, the CSS rule is to cascade to a sans-serif font available on the client. This ensures the choice of a font that displays well and provides a level of visual consistency throughout the UI.
Font Size
The Oracle Alta UI default body font size is 14px, differing from the typical 16px browser default. However, depending on the use cases of the application, the Oracle Alta UI also allows for a body font size of either 12px or 16px.
As a practice, the Oracle Alta UI specifies font size in rem. With rem, smaller fonts, such as those in the footer, and larger fonts, like those in the header, are given relative to the body font size.
When the Oracle Alta UI body font size is 14px (0.875em), the following rem values are used:
- 1 rem: body font size
- 0.857 rem: smallest font size
- 5.143 rem: largest font size
If the default body font size for the Oracle Alta UI is changed, for example to the browser default, then HTML elements based on specific rem values become larger. For example, H1 is set to 34px when the body font size is 14px. H1 is 39px when the body font size is the browser default of 16px.
Sizes between the smallest and largest font are chosen to fit the use case. For convenience, an illustration of each style is provided along with a recommended usage for each font size.
Font Color
The Oracle Alta UI provides a set of default font colors for body text, prompts, headers, labels, links, and so forth. There are specific cases where the Oracle Alta UI allows for a custom text color. These are limited to header and body text. In the selection of a font color for those two limited cases, the following guidance is given.
- Verify that the contrast ratio of the color choice meets accessibility requirements for body size and header sizes.
The following image is an example use of header sizes and available custom colors to construct a presentation that draws the user's attention in order of the importance of each element.
The flexibility of header size and color is applicable to any portion of a page layout.
The following image shows different header sizes and colors used to draw attention to different objects on the page.
Length and Spacing
Text lengths that exceed 40 to 60 characters across multiple lines can present an unpleasant reading experience. This might occur in situations with lengthy help text, or in long social media posts. Sometimes it is necessary to present lengthy text, for example, to provide sufficient user assistance.
- As a general rule, use a text wrap at 60 characters to provide a comfortable reading length.
The Oracle Alta UI uses ample spacing around text and other components as a hallmark of its design. Padding and margins provide the spacing between components. Using a fixed value for padding and margins works to maintain vertical rhythm, so that elements appear to have a consistent vertical spacing and horizontal alignment.
- Standard values for padding and margins are 5px, 10px, and 20px. This flexibility, along with font size, color, and line length can provide an experience most suited to the application use case and device display.
Headers Pairs
Headers often appear alone. However, there are occasions when the design calls for an immediate subheader. The broad range of header sizes in the Oracle Alta UI (20px - 72px) may prove a challenge when deciding which header and subheader to pair. The challenge of meeting accessibility requirements when using headers in a colored container can make header pair choices even more difficult. To meet that challenge and for the best results, the following guidance is given.
No pair is recommended for a 72px header size.
Note that when a header is paired with a subheader that is less than 24px, a colored container must yield a higher color contrast ratio than when a header greater than 24px is used alone.
Header Values
There are occasions where a value is appended to a static header to provide a clearer context to the user. For example, on a page that references employees, the page header, "Employee," is appended at run time with the name of each specific employee. The specific name of the employee is the header value. When this approach is used, the Oracle Alta UI recommends a specific typographical treatment. Specifically, the header value, preceded by a colon (:), is of a lighter weight than the static header.
Additional Resources
OS system font and weights
See illustration of the Oracle Alta UI typography for each OS
Accessible Font Colors on white or light gray backgrounds
Some use cases call for the use of a custom font color. In the Oracle Alta UI, the background colors of a page that can take a font color option are as shown in the image below.
On those backgrounds the following font colors meet accessibility.
Each cell contains the color contrast ratio and the 6-digit color hex value, respectively.
Accessible Color Regions For Large White Font
There are use cases for colored regions in which a large font size is used— common examples are Hero banners at the top of the page or colored header containers. Care is required in the choice of background when using a white (#FFFFFF) font color. That is, the color contrast ratio between the font color and its background is sufficiently high to meet accessibility criteria. Generally, the larger the font, the lower the contrast ratio needed.
When the font size is larger than 24px, typically for page headers and hero banners, the following colors are recommended.
Each cell contains the color contrast ratio and 6-digit color hex value, respectively.
Accessible Color Regions for Small Default Font Colors
There are use cases for colored regions in which the font size is small. Once such example is in the Ancillary Area. When the font size is smaller than 24px, a higher color contract ratio is needed than with font sizes larger than 24px. There is a small set of background colors that work well with the default Oracle Alta UI font colors for body text, links, and so forth.
Accessible Color Regions for Small White Font
However, when a wider range of background colors are needed for smaller font sizes, the Oracle Alta UI recommends a white (#FFFFFF) font color with any of the following background colors.
Each cell contains the color contrast ratio and 6-digit color hex value, respectively. Because the font color is limited to white, the application of colored regions for small text is limited to a few UI elements, for example, hint text, headers, read-only text values.