Typography
Primary typefaces
Typography is one of the most crucial brand touch points, as it is perhaps the aspect viewers interact with the most. Our typefaces work cohesively to clearly present data in a modern, accessible, open, and informative way, that aligns with our brand voice and values. The Source type family is Adobe’s first open source typeface, designed by Paul D. Hunt. It is intended to be extremely legible in both print and digital uses.
The Source type family was selected for three primary reasons: 1) Because it is fully open source and this aligns with our values as a company. 2) It provides a sans serif and a code typeface that is useful for showing code snippets on marketing web pages. 3) It refers back to the name of our own company—a perfect match.
Learn more about Source Sans through Adobe fonts, Google Fonts or on Paul D. Hunt’s GitHub. We prioritize different typefaces for our product interface. For the purposes of this guide we are only focusing on market-facing contexts.
Headlines
Extra Light and SemiBold
Headlines help readers locate the info they need, and facilitate scanning. We use the Extra Light weight at larger sizes. H1 should always be set in Extra Light. H2 should be set in Extra Light when by itself. When it operates as a sub-headline it should be set in SemiBold. Sub-headlines are situations where a second headline is placed in close proximity to the main headline. Using different weights supports contrast and hierarchy. Sub-headlines should not occur at levels below H3. We use SemiBold for the rest of the headline levels.
Relative sizing
The approximate point size of each headline level will change according to the format and size of each design, however, relative sizing should resemble the examples to the right.
Tone of voice
Headlines should be set in sentence case—never all caps. We do not want to be perceived as yelling at our audience. Initial caps create visual “speed bumps” for readers and should be avoided. Use punctuation sparingly; we recommend using em dashes over commas, avoiding exclamation points, and omitting periods in headlines unless preceded by other punctuation. Refer to the AP Style Guide if you are unsure of proper usage.
Headline 1 64 px
Sub Headline 2 48 px
Headline 2 48 px
Sub Headline 3
Headline 3 30 px
Headline 4 24 px
Headline 5 20 px
Body copy
Source Sans is used for all body copy.
To ensure that body copy is readable, we recommend the following settings for type size and leading/line-height:
We recommend setting body copy at 12/16pt. This is optimal for layouts with quick bursts of body copy. For documents with lengthier amounts of body copy we recommend 10/13pt or 9/12pt depending on how limited the space is.
Web
For web designs we recommend going slightly larger in type size at 16px and line-height at 1.5em. Larger type and looser line-height ensures readability.
Code
Use Source Code to show (not tell) snippets of code. It can be on its own, or interspersed into a body copy paragraph. Using this secondary font makes it easier for our audience to recognize code snippets or code examples at a glance, and easily copy and paste into their IDE if needed instead of using image files.
Text hierarchy
See PDF for illustration.
Information Hierarchy is crucial to efficient communication. The following principles will help you achieve hierarchy:
Contrast in size
Viewers should be able to discern from size alone: Headlines should be larger than subheads, subheads larger than body copy. All sizing is relative.
Contrast in weight
Bold Headlines help readers locate the info they need, and facilitate scanning. The regular weight of the body copy creates a visual rhythm that contributes to hierarchy.
Contrast in color
If you’re using a color other than a near- black or white, make sure it serves a purpose. Links are a good example of functional color use. Blue is a universal color for links, for example, so our Blurple (#5033E1) helps viewers quickly pick out links from paragraphs of black text.
Creating typographic layouts
See PDF for illustration.
Create Order
Layout is just as crucial as hierarchy to effective communication. Whether digital, or print, the way we lay out type is an important part of our brand impression. Type should never be hard to read, feel overwhelming, or be difficult to navigate.
Use a grid or columns
Layouts should use a grid or columns to help organize material and make information feel open and organized. An underlying structure with multiple columns can be used to delineate primary content from secondary content, as well as make sure line lengths don’t get too long.
Line length
Smaller amounts of copy are easier to digest in shorter line lengths (45–60 characters), and greater amounts of copy are best at slightly longer (60–75 characters). Determine what works best for your format and content. Keep in mind that longer line lengths are harder to read, and viewers can lose their place in the text.
Paragraph and character typesetting
See PDF for illustration.
Alignment
In most cases text should be left-aligned with a ragged right margin. Some layouts call for center alignment of the headline(s)—this is typical when a headline accompanies more graphic elements. Body copy within such layouts should be left-aligned.
Tracking and kerning
Our typefaces do not require tracking, and neither do we have any stylistic need for it. Our typefaces are also designed with kerning in mind, so for the most part you don’t have to worry about this. If your software allows—body copy should be set to metrics, and large headlines can be set to optical. In print, large headlines may require kerning on a case-by-case basis. There is less flexibility with this in digital cases—so don’t sweat it. Always use your best judgment to determine how to set the type to ensure legibility and visual consistency of word forms.
Widows and orphans
A ‘widow’ or ‘orphan’ is a very short line—usually one word—at the end or beginning of a paragraph or column. These should be avoided whenever possible.
Placement
See PDF for illustration.
When we consider placement we are considering where text appears in relation to other elements within the layout. For clarity, text should exist within its own space, and not overlap with other graphic elements or text. When combining text with graphic elements, such as color or gradients, ensure that there is adequate white space around the text. Do not crowd the text or interfere with legibility.
Typography misuse
See PDF for illustration.
Ensure proper brand representation and readability by following the guidelines stipulated in the former pages:
- Use only the brand typefaces.
- Use proper sizing and spacing for headlines and body copy according to your format.
- Make sure your layout has hierarchy and that it is easy to read and navigate.
- Make sure text has adequate contrast and is readable.
Accessibility
The Americans with Disabilities Act (ADA) requires a high visual contrast between typography and backgrounds. For more information see our page on ADA color accessibility and the full ADA guidelines for the US.