Last updated: September 8, 2015 at 17:39 pm

Typography refers to the fonts, colors, sizes, weights, and styles approved for the site.

Visual example of the element:

What problem does this element or pattern solve?
Consistent typography contributes to brand cohesion across the site, while maintaining a clean appearance across all pages. ADA compliance is also crucial, therefore typography needs to be standardized in such a manner that visitors have no trouble reading the content.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • If possible, design your entire Style Framework using the same font standards defined on this page. This include fonts, sizes, weights, colors, alignment and line spacing.
  • In the Detailed Specifications section, work with your development owner to include the actual CSS and use the same class names that your developers will use. This not only ensures everyone is using the same vocabulary, it provides a fail-safe check for your QA department.
  • In addition to providing the CSS specs for each font class, provide information on when each of the classes should be used in context. Provide links to existing pages as additional examples.
  • Be sure to include the server location of both desktop fonts and web fonts in your links area so designers and developers can locate and download them.
  • It is generally considered good practice to specify a base font size, and then specify all other font sizes as a percentage of that base size. Therefore, be sure to present your base font size first, and clearly identify it as such.
  • In addition to the regular body text and subheadings, don’t forget to specify special font treatments such as bullet points, numbered lists, captions, pull quotes, and table headings.
  • If you use a web font for icons (such as FontAwesome), you should mention that here. However, you should also include those specs on a stand-alone icon page.

Sample Content

  • Corporate Font: FontInOurLogo Regular
  • Headings: SansSerif Bold
  • Body copy and other small text: SerifFont Regular, SerifFont Italic
/* h1 {
font-family: Typefacename, serif, sans-serif, etc;
text-size: 36pt;
color: #000000;
} */
/* body {
font-family: Typefacename, serif, sans-serif, etc;
text-size: 14pt;
color: #333333;
line-height: 1.85em;
} */

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
fonts, text, type, typefaces, typesetting, type-setting
Related elements within this Style Framework:

Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply