Digital Experience Guidelines
The Digital Experience Guidelines provide the design specifications, standards and assets we use to effectively express the ADI brand through our digital products. By adhering to these guidelines, we’re able to provide a positive and cohesive customer experience across distinct ADI touchpoints.
Typography
Our typographic system was built to be easily readable and representative of the ADI brand - clean and minimal but still approachable in appearance, helping to balance the often complex subject matter in our digital experiences.
Barlow is our corporate typeface for titles.
Its slightly rounded, low-contrast design makes this a distinctive representation of our technically advanced and still human brand personality. Because of its high emphasis and medium readability, Barlow should be exclusively used for titles, not body copy.
Barlow is an Open Font typeface available on Google Fonts.
Inter is our highly functional typeface for smaller elements such as subtitles, body copy and tables.
This typeface is made up of a variable font family and was specifically selected for its readability on computer screens (enabled by a tall x-height that aids in readability of mixed-case and lower-case text). Additionally, several OpenType features are provided as well, like contextual alternates that adjust punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate “0” from “o,” and tabular numbers.
Inter is an Open Font typeface available on rsms.me/inter/ (Creator's website) and Google Fonts.
Noto is our international font family and reserved exclusively for use in non-Latin languages.
This collection of high-quality fonts includes options for nearly all of the world's writing systems, including Chinese, Arabic, Hebrew and all Indic Scripts. The true value of Noto lies in its high-quality design with multiple weights and widths that also offer typographically correct communication, preserving authentic flavors that make each script special.
Noto Sans is an Open Font typeface available on Google Fonts.
Titles
ADI titles use Barlow and are used to visually organize content and structure an effective typography hierarchy.
| Title extra large | Font | Barlow | Letter Spacing | 0 | Usage |
Paragraph headings |
|---|---|---|---|---|---|---|
| Size | 40/48 | Paragraph Spacing | 0px | |||
| Weight | Semibold |
| Title large | Font | Barlow | Letter Spacing | 0 | Usage |
Pararaph headings |
|---|---|---|---|---|---|---|
| Size | 32/40 | Paragraph Spacing | 0px | |||
| Weight | Semibold |
| Title medium | Font | Barlow | Letter Spacing | 0 | Usage |
Pararaph headings |
|---|---|---|---|---|---|---|
| Size | 28/36 | Paragraph Spacing | 0px | |||
| Weight | Semibold |
| Title small | Font | Barlow | Letter Spacing | 0 | Usage |
Pararaph headings |
|---|---|---|---|---|---|---|
| Size | 24/32 | Paragraph Spacing | 0px | |||
| Weight | Semibold |
| Title extra small | Font | Barlow | Letter Spacing | 0 | Usage |
Pararaph headings |
|---|---|---|---|---|---|---|
| Size | 20/28 | Paragraph Spacing | 0px | |||
| Weight | Semibold |
Subtitles
Subtitles are meant to support headlines, and should be reserved for shorter text.
| Subtitle medium | Font | Inter | Letter Spacing | 0 | Usage | Subtitles |
|---|---|---|---|---|---|---|
| Size | 16/24 | Paragraph Spacing | 0px | |||
| Weight | Bold |
| Subtitle small | Font | Inter | Letter Spacing | 0 | Usage | Subtitles |
|---|---|---|---|---|---|---|
| Size | 14/20 | Paragraph Spacing | 0px | |||
| Weight | Bold |
| Subtitle extra small | Font | Inter | Letter Spacing | 0 | Usage | Subtitles |
|---|---|---|---|---|---|---|
| Size | 12/16 | Paragraph Spacing | 0px | |||
| Weight | Bold |
Body
The body text, which will make up the bulk of most pages, should be 16 pixels in size. In less common cases, smaller sizes may be used.
| Body medium | Font | Inter | Letter Spacing | 0 | Usage | Body copy |
|---|---|---|---|---|---|---|
| Size | 16/26 | Paragraph Spacing | 0px | |||
| Weight | Regular |
| Body small | Font | Inter | Letter Spacing | 0 | Usage | Body copy, less common |
|---|---|---|---|---|---|---|
| Size | 14/20 | Paragraph Spacing | 0px | |||
| Weight | Regular |
| Body extra small | Font | Inter | Letter Spacing | 0 | Usage | Body copy, less common |
|---|---|---|---|---|---|---|
| Size | 12/18 | Paragraph Spacing | 0px | |||
| Weight | Regular |
Overline
Caption and overline text (text with a line above it) are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.
| Overline | Font | Inter | Letter Spacing | 1% | Usage | Eyebrow text and tags |
|---|---|---|---|---|---|---|
| Size | 20/28 | Paragraph Spacing | 0px | |||
| Weight | Medium |
| OVERLINE SMALL | Font | Inter | Letter Spacing | 1% | Usage | Tag text when inside tables |
|---|---|---|---|---|---|---|
| Size | 11/14 | Paragraph Spacing | 0px | |||
| Weight | Medium |
Text Links
Text links or hyperlinks can be clicked to navigate to a linked page or outside link. These can be as short descriptive phrases, or used in titles.
| Link medium | Font | Inter | Letter Spacing | 0 | Usage | Text links |
|---|---|---|---|---|---|---|
| Size | 16/24 | Paragraph Spacing | 0px | |||
| Weight | Medium |
| Link small | Font | Inter | Letter Spacing | 0 | Usage | Text links |
|---|---|---|---|---|---|---|
| Size | 14/20 | Paragraph Spacing | 0px | |||
| Weight | Medium |
| Link/Subtitle Small | Font | Inter | Letter Spacing | 0 | Usage | Text links in subtitle |
|---|---|---|---|---|---|---|
| Size | 14/20 | Paragraph Spacing | 0px | |||
| Weight | Bold |
| Link/Subtitle Medium | Font | Inter | Letter Spacing | 0 | Usage | Text links in subtitle |
|---|---|---|---|---|---|---|
| Size | 16/26 | Paragraph Spacing | 0px | |||
| Weight | Bold |
| Link/Title XSmall | Font | Inter | Letter Spacing | 0 | Usage | Text links in title |
|---|---|---|---|---|---|---|
| Size | 20/28 | Paragraph Spacing | 0px | |||
| Weight | Bold |
Examples
Here are some visual examples of title and body pairings for reference.
Things to Avoid
TITLES IN ALL CAPS IS HARD TO READ
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate. Amet ultricies vivamus lobortis pulvinar molestie dui orci quam. Sit arcu id mattis sit fames urna faucibus nisl
Don't use Titles in All Caps
Not a Title Treatment
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate. Amet ultricies vivamus lobortis pulvinar molestie dui orci quam. Sit arcu id mattis sit fames urna faucibus nisl
Don't use accent colors for title text
Pick a Side
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate. Amet ultricies vivamus lobortis pulvinar molestie dui orci quam. Sit arcu id mattis sit fames urnanis.
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate. Amet ultricies vivamus lobortis dui orci quam.
Don't vary alignment of text
Titles Should Be Kept Concise Which Means to Say the Most With the Least Amount of Words
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate
Don't use titles over 80 characters long
The is a Large Title
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate Semper in amet massa vitae malesuada. Amet ultricies vivamus lobortis pulvinar molestie dui orci quam. Sit arcu id mattis sit fames urna faucibus nisl
Do use the link style to show when text is linked
This is a Large Title
Lorem ipsum dolor sit amet consectetur. Quis sollicitudin integer est ultrices pretium lectus vulputate. Semper in amet massa vitae malesuada. Amet ultricies vivamus lobortis pulvinar molestie dui orci quam. Sit arcu id mattis sit fames urna faucibus nisl
Don't emphasize text with an underline