Typography is used to create a clear page flow and develop page hierarchy. Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/typography/, for further information regarding typography.
Use heading styles in a semantic structure, not just as a design element. See the Accessibility tab for more detailed information.
The web font used for English and English-like script is Roboto. If you haven't already, download the new Roboto brand font.
Certain devices may use their native fonts in place of Roboto when Roboto is not available. This is done to improve download speeds and to maintain a consistent user experience on a user's device.
Roboto is used in the following languages and countries. The system default font used as a fallback is Arial.
The web font used for non-English / non-Latin like script varies and uses a separate set of font sizes and font specs. Please see the Dell Technologies Brand Guidelines for additional information on these fonts.
Development teams that are not using bootstrap will need to follow the exact font ramp details found on this page with the following CSS at the core:
Proper semantic structure allows users to understand the organization of the content of the page. Standard HTML enables hierarchical structure by use of the heading elements (h1, h2 and so on). When used correctly, headings set up a parent/child relationship that orders content in an outline format which helps to organize material into relevant sections.
Display information in font size and color combinations that provide sufficient contrast. Note how some combinations are limited to large fonts only.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
* Rem values are for developer calculations.
* Rem values are for developer calculations. Note how the line-height for default paragraph is 1.5 x font-size, rather than a rem value, to meet accessibility requirements.
The A11Y Style Guide has excellent guidelines and markup examples for typography.
Font size, font color, and the background color used behind text needs to comply with accessibility standards and pass Level AA of WCAG 2.0 Accessibility Standards.
Color contrast is the ratio between the color of the text in the foreground vs. the color of the background. It is important to have enough visual separation to make the text readable for those who are color blind and people with vision impairments, such as the farsighted, or those with cataracts, or with other age related vision degradation. Color contrast can also benefit people reading in less than ideal conditions, such as glare on their screens.
Color contrast may be measured using the Web AIM Contrast Checker tool.
Dell adheres to the W3C Web Content Accessibility Guidelines (WCAG) 2.0, Level AA standard, which is:
Below are the minimum text sizes to pass AA standards.
"Normal" size text:
"Large" size text:
Do not place information in font sizes or color combinations that do not provide sufficient contrast!
Incidental Text: There is no contrast requirement for text, or images of text, that are part of an inactive user interface component, such as purely decorative background, or that are not visible to anyone, or that are part of a picture that contains significant other visual content.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Semantic structure refers to the way we use language to convey meaning. In the context of web design, it refers the way the content is laid out on the page through the proper use of heading elements.
Proper semantic structure allows users to understand the organization of the content of the page. Standard HTML enables hierarchical structure by use of the heading elements (h1, h2 and so on). When used correctly, headings set up a parent/child relationship that orders content in an outline format, which helps to organize material into relevant sections.
Sometimes headings are used differently than the way they were intended by the originators of HTML, who didn’t anticipate the graphic potential of the web. When headings are used solely for visual effect, either in isolation or outside of the outline structure, it can interrupt page hierarchy in a way that can cause confusion to non-sighted users who use keyboard navigation to tab through page sections by moving from header to header, effectively skimming the document to understand the overall subject of the page as well as the points covered section by section.
Heading elements are often referenced with the aria-labelledby attribute of the section for which they serve as a heading. If headings are organized into a logical outline, the aria-level attribute is used to indicate the nesting level.
Good page structure can and should be planned for and reinforced at every step of the design process.
UX architects can create wireframes that are organized hierarchically.
Content creators can ensure that the content is written so that it’s presented in logical page sections and that it has a clear progression.
Designers can make decisions about the presentation that include the appropriate HTML and CSS attributes, or make recommendations for updating the CSS when and if the need for a new style arises.
Keeping semantic structure in mind throughout the design process will make it easier for front-end developers to code to accessibility standards. The more thought given to page structure up front, the less the dev teams will need to come up with workarounds to implement accessible code (or even worse, be forced to ignore the guidelines altogether).