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.
Coded Components
Helper classes: Looking for a complete list of helper classes for these components?View helper classes
Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.
h1 heading (dds__h1, Roboto-Light, Font-weight: 300)
h2 heading (dds__h2, Roboto-Light, Font-weight: 300)
h3 heading (dds__h3, Roboto-Light, Font-weight: 300)
h4 heading (dds__h4, Roboto-Regular, Font-weight: 400)
h5 heading (dds__h5, Roboto-Regular, Font-weight: 400)
bold-16 (dds__bold-16, Roboto-Regular, Font-weight: 700)
bold-14 (dds__bold-14, Roboto-Regular, Font-weight: 700)
bold-12 (dds__bold-12, Roboto-Regular, Font-weight: 700)
Default Paragraph (Roboto-Regular, Font-weight: 400)
Bold Text
Italic Text
Left-Aligned Text
Center-Aligned Text
Right-Aligned Text
No items found.
Heading
No items found.
Usage
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.
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.
Font Ramp Details
Development teams must 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', 'メイリオ', '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.
Do.
Apply proper parent-child relationships to heading to create a semantic structure.
Don't.
Don't use headings solely for visual effect, either in isolation or outside of the outline structure.
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.
Do.
Use white text on these background colors, or use these as text colors on a white background.
Don't.
Don't use these colors combined with white.
Do.
Don't.
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
Accessibility
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:
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.
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:
Video of non-sighted user navigating by headings