Typography

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.

Semantic Structure

Use heading styles in a semantic structure, not just as a design element. See the Accessibility tab for more detailed information.

  • Only one H1 per page.
  • Lay the page out in a hierarchical manner with H4 sections inside of H3, H3 sections inside of H2, and so on.
  • Design with requirements in mind.
  • Do not use headings for visual effect only.
  • Likewise, do not use text formatting such as font size or bolding to give the appearance of a heading.
  • If an existing heading style does not work for your design, update the CSS to include new styling that does, but do not substitute a different heading tag if it breaks the page hierarchy.

Roboto Font

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.

  • Android devices will continue to use Roboto
  • Windows devices may use Segoe UI in place of Roboto
  • Apple/IOS devices may use Helvetica Neue in place of Roboto

Roboto is used in the following languages and countries. The system default font used as a fallback is Arial.

  • EN – English – Bahrain, Egypt, Jordan, Kuwait, Middle East, Oman, Qatar, Saudi Arabia, United Arab Emirates, Yemen, Albania, Anguilla, Antigua, Barbuda, Aruba, Azerbaijan, Bahamas, Barbados, Belize, Bermuda, Boznia-Herzegovina, British Virgin Islands, Bulgaria, Cayman Islands, Croatia, Dominica, Estonia, Grenada, Guyana, Haiti, Iceland, Ireland, Ivory Coast, Jamaica, Latvia, Libya, Lithuania, Macedonia, Malaysia, Netherlandse Antilles / Curação, New Zealand, Nigeria, Serbia, Singapore, Slovenia, South Africa, St. Kitts, Nevis, St. Lucia, St. Vincent, Grenadines, Suriname, Thailand, Trinidad y Tobago, Turks & Caicos Islands, United Kingdom, United States, US Virgin Islands, Yemen, French Overseas Territories, Hong Kong, Taiwan, Angola, Benin, Burkina Faso, Burundi, Canada, Central African Republic, Lebanon, Botswana, Cameroon, Cape Verde, Chad, Comros, Cyprus, Djibouti, Ethiopa, French Guiana, French Polynesia, Gambia, Guadeloupe, Guinea, Kenya, Lesotho, Liberia, Madagascar, Malawi, Mali, Malta, Martinique, Mauritania, Mauritius, Mayotte, Montenegro, Montserrat, Mozambique, Namibia, New Caledonia, Niger, Reunion, Rwanda, Seychelles, Sierra Leone, Somalia, Swaziland, Tanzania, Togo, Zambia, Zimbabwe, Georgia, Uganada, Puerto Rico, Ghana, Israel, Australia, India, Vietnam
  • CS – Czech – Czech Republic
  • DA – Danish - Denmark
  • DE – German – Germany, Austria, Switzerland
  • FR – French – Algeria, Angola, Benin, Burkina Faso, Burundi, Canada, Central African Republic, Botswana, Cameroon, Cape Verde, Chad, Comros, Cyprus, Djibouti, Ethiopia, French Guiana, French Polynesia, Gambia, Guadeloupe, Guinea, Kenya, Lesotho, Liberia, Madagascar, Malawi, Mali, Malta, Martinique, Mauritania, Mauritius, Mayotte, Montenegro, Montserrat, Mozambique, Namibia, New Caledonia, Niger, Reunion, Rwanda, Seychelles, Sierra Leone, Somalia, Swaziland, Tanzania, Togo, Zambia, Zimbabwe, Uganada, Congo, Democratic Republic of Congo, France, Gabon, Luzembourg, Senegal, Ghana, Tunisia, Morocco, Switzerland
  • GR – Greek – Greece
  • ES – Spanish – Argentina, Armenia, Bolivia, Chile, Colombia, Costa Rica, Dominican Republic, Ecuador, El Salvador, Guatamala, Honduras, Mexico, Nicaragua, Panamá, Paraguay, Peru, Spain, Uruguay, Venezuela, Puerto Rico
  • FI – Finnish - Finland
  • HU – Hungarian – Hungary
  • IT – Italian - Italy
  • NL – Dutch – Belgium, Netherland
  • NO – Norwegian – Norway
  • PL – Polish – Poland
  • PT – Portuguese – Brazil, Portugal
  • RO – Romanian – Romania
  • RU – Cyrillic – Georgia, Belarus, CIS (Russian States), Kazakhstan, Kyrgyzstan, Moldova, Russia, Tajikistan, Turkmenistan, Ukraine, Uzbekistan
  • SK – Slovak – Slovakia
  • SV – Swedish - Sweden
  • TR – Turkish – Turkey
  • VIE – Vietnamese – Currently N/A

Non-English / Non-Latin Fonts

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.

Non-Bootstrap Implementation

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:

font-family: 'Roboto-Regular', 'Roboto-Light', 'Cordia New', 'Microsoft Sans Serif', 'Utsaah', 'Devanagari MT', 'Nirmala UI', 'Latha', 'InaiMathi', 'Gautami', 'Telugu Sangam MN', 'Tunga', 'Kannada Sangam MN', 'Kartika', 'Malayalam Sangam MN', 'Shruti', 'Nirmala UI', 'Gujarati MT', 'Gujarati Sangam MN', 'Vrinda', 'Bangla Sangam MN', 'Meiryo UI Reg', 'メイリオ Reg', 'MS UI Gothic Reg', 'Hiragino Kaku Gothic Reg', 'ヒラギノ角ゴ Pro W3 Reg', 'Microsoft YaHei', '微软雅黑', 'Hiragino Sans GB', 'Microsoft JhengHei', '微軟正黑體', 'Malgun Gothic', '맑은 고딕', 'Gulim', 'AppleGothic', 'Apple LiGothic', 'LiHei Pro', 'Osaka', 'STHeiti', '华文黑体', 'STXihei', '华文细黑', 'SimHei', '黑体', 'Arial Unicode MS', 'Arial', sans-serif;
font-weight: normal;
line-height: 1.1;
color: inherit;

Do's and Don'ts

Semantic Structure

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.

Contrast with White

Display information in font size and color combinations that provide sufficient contrast. Note how some combinations are limited to large fonts only.

Types

Variants

Common Button Labels and Usage

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.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Headings

h1 heading (dds__h1, Roboto-Light, Font-weight: 300)

<h1 class="dds__h1">h1 heading (dds__h1)</h1>

h2 heading (dds__h2, Roboto-Light, Font-weight: 300)

<h2 class="dds__h2">h2 heading (dds__h2)</h2>

h3 heading (dds__h3, Roboto-Light, Font-weight: 300)

<h3 class="dds__h3">h3 heading (dds__h3)</h3>

h4 heading (dds__h4, Roboto-Regular, Font-weight: 400)

<h4 class="dds__h4">h4 heading (dds__h4)</h4>

h5 heading (dds__h5, Roboto-Regular, Font-weight: 400)

<h5 class="dds__h5">h5 heading (dds__h5)</h5>

bold-16 (dds__bold-16, Roboto-Regular, Font-weight: 700)

<p class="dds__bold-16">bold-16 (dds__bold-16)</p>

bold-14 (dds__bold-14, Roboto-Regular, Font-weight: 700)

<p class="dds__bold-14">bold-14 (dds__bold-14)</p>

bold-12 (dds__bold-12, Roboto-Regular, Font-weight: 700)

<p class="dds__bold-12">bold-12 (dds__bold-12)</p>

Paragraphs

Default Paragraph (Roboto-Regular, Font-weight: 400)

<p>Default text should be used for paragraph copy in most instances. Default text should be used for paragraph copy in most instances. Default text should be used for paragraph copy in most instances.</p>

Helper Classes

Bold Text

<p class="dds__font-weight-bold">This is an example of bold text.</p>

Italic Text

<p class="dds__font-italic">This is an example of italic text.</p>

Left-Aligned Text

<p class="dds__text-left">This is an example of left-aligned text. This is an example of left-aligned text. This is an example of left-aligned text. This is an example of left-aligned text. This is an example of left-aligned text. This is an example of left-aligned text. </p>

Center-Aligned Text

<p class="dds__text-center">This is an example of center-aligned text. This is an example of center-aligned text. This is an example of center-aligned text. This is an example of center-aligned text. This is an example of center-aligned text. This is an example of center-aligned text. </p>

Right-Aligned Text

<p class="dds__text-right">This is an example of right-aligned text. This is an example of right-aligned text. This is an example of right-aligned text. This is an example of right-aligned text. This is an example of right-aligned text. This is an example of right-aligned text.</p>

No items found.

Headings

* Rem values are for developer calculations.

Other Classes

* 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.

Color Contrast

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.

Minimum Contrast Ratio

Dell adheres to the W3C Web Content Accessibility Guidelines (WCAG) 2.0, Level AA standard, which is:

  • 4.5:1 contrast ratio for normal sized fonts
  • 3:1 contrast ratio for large fonts

Normal & Large Font Sizes

Below are the minimum text sizes to pass AA standards.

"Normal" size text:

  • Regular (400 weight): 11px-24px
  • Bold (700 weight): 11px-19px

"Large" size text:

  • Regular (400 weight): 24px & up
  • Bold (700 weight): 19px & up

Color Combinations with Good Contrast

  • Black or Carbon text on White = always good
  • Dell Blue text on white = pass
  • Carbon text on Quartz = pass
  • Dell Blue text on Quartz = fails for normal sized fonts, passes for large fonts

Do not place information in font sizes or color combinations that do not provide sufficient contrast!

Contrast Exceptions

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.

References:

W3C Visual Color Contrast

Web AIM Contrast Checker

Semantic Structure

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.

Key Points:

  • Only one h1 per page.
  • Lay the page out in a hierarchical manner.
  • Design with user requirements in mind.
  • Do not use headings for visual effect only.
  • Likewise, do not use text formatting such as font size or bolding to give the appearance of a heading.
  • If an existing heading style does not work for your design, update the CSS to include new styling that does. Do not substitute a different heading tag if it breaks page hierarchy.

Example of proper heading structure

Example of improper heading structure

Design Process:

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).

References:

Web AIM Semantic Structure

W3C Headings

Video of non-sighted user navigating by headings