Typography
Source Sans Pro
Source Sans is a sans serif typeface that is crisp, modern and has distinctive features adding a touch of personality. Designed by Paul D. Hunt, for Adobe, Source Sans is an open-source font family. Balancing well between being modern and humanist/classical, Source Sans has subtle geometric features and a large x-height, contrasting with traditional double story lower-case ‘a’ and ‘g’ letterforms. Source Sans was designed with user interfaces in mind.
The regular weight of Source Sans works well for body copy and extended passages of text. The light and heavy weights create expressive headlines that can be light and gentle or strong and authoritative, depending on the context.
Source Sans is free to own and use, and is available from multiple sources:
Font Size
Set type large enough to facilitate reading, and set headlines large enough to create contrast and hierarchy.
Recommended Sizes
For print purposes there are general guidelines for type size, however, depending on the application sizes may need to be adjusted. For example, a headline on a popup banner that measures six feet tall is much different than a headline for a brochure.
For web and screen use the rules are more concrete but again will have some subtle differences depending on screen sizes.
Body Copy
Body Text Large
Suspendisse sed nunc erat. Nulla volutpat laoreet iaculis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque bibendum semper purus eget iaculis. Aliquam laoreet ligula odio, eget porta odio imperdiet vel.
Use this typographic style for introductory paragraphs at the start of sections or as a way to bring emphasis to a body of text.
Body Text
Vestibulum at eros sagittis dui placerat convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla placerat fermentum mauris, at convallis urna feugiat et. Aenean id justo purus. Vestibulum in mi consequat, scelerisque ex ac, sollicitudin velit. Cras faucibus varius velit quis commodo. Suspendisse potenti. Nam sed congue ligula. Morbi vitae erat id ligula dictum cursus. Ut finibus laoreet cursus. Fusce eros magna, sagittis eu est quis, auctor malesuada lacus.
Nulla in dolor interdum, pharetra mauris vitae, pharetra risus. Quisque blandit risus nec dolor tempor molestie. Nam cursus velit volutpat enim eleifend pellentesque. Mauris in mauris luctus, gravida quam sed, lobortis quam. Donec hendrerit tortor vel diam tempor, ut bibendum nisl venenatis. Morbi enim metus, congue sit amet turpis ac, cursus pulvinar ligula. Vivamus in erat venenatis, mattis leo nec, dignissim ipsum. Nunc quis justo nulla.
Headings
Large headlines should be set in Source Sans Extra Light or Light. Using these lighter weights keeps the overall tone of the SFI brand soft and welcoming and not too bold and strong. In smaller uses, the heavier font weights are appropriate and can add texture to long passages of text and signal importance.
Large Headings
Heading Level 1
For Web: There should only be one Heading 1 per page, and in most cases, this is handled automatically by the theme.
For Print: This typographic style is ideal for document titles, and could be used for additional section titles.
Sub Headings
Heading Level 2
This typographic style is ideal for section titles within documents and on the web.
Sub Headings
Heading Level 3
This typographic style can be used for sub-section headings.