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.

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