Typography is used to create a clear page flow and develop page hierarchy.
The web font used for English and English-like script is Roboto. A complete list of Languages and Regions using Roboto can be found in the Additional Notes section. A separate typography ramp is used for non-English like/non-Latin script. Please see the Dell Technologies Public Guidelines for additional information on these fonts.
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.
Development teams that are not using bootstrap will need to follow the exact font ramp details found on this page and the non-English like/non-Latin script 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;
If you are not using bootstrap, please use this repository to obtain the Roboto font, and note that the system default fonts will not be included: Link coming soon.
lg: 32px/40px, md: 32px/40px, sm: 30px/36px, xs: 24px/28px
Font-family: Roboto-Light | Font-weight: 300
lg: 28px/32px, md: 28px/32px, sm: 28px/32px, xs: 20px/24px
Font-family: Roboto-Light | Font-weight: 300
lg: 20px/24px, md: 20px/24px, sm: 20px/24px, xs: 17px/20px
Font-family: Roboto-Light | Font-weight: 300
lg: 24px/28px, md: 24px/28px, sm: 24px/28px, xs: 18px/22px
Font-family: Roboto-Light | Font-weight: 300
lg: 18px/22px, md: 18px/22px, sm: 18px/22px, xs: 16px/20px
Font-family: Roboto-Regular | Font-weight: 400
lg: 16px/20px, md: 16px/20px, sm: 16px/20px, xs: 14px/20px
Font-family: Roboto-Regular | Font-weight: 400
16px/20px
Font-family: Roboto-Regular | Font-weight: 700
14px/20px
Font-family: Roboto-Regular | Font-weight: 700
12px/15px
Font-family: Roboto-Regular | Font-weight: 700
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
14px/20px
Font-family: Roboto-Regular | Font-weight: 400
Default text should be used for paragraph copy in most instances.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
12px/15px
Font-family: Roboto-Regular | Font-weight: 400
Small paragraph text is reserved for areas that require smaller copy. For example, pricing in product stacks, legal etc. Small should not be used for standard body text.
