Typography

Examples

Promotional

Promotional typography should grab attention and draw viewers in. Favor an exaggerated type scale with a clear call to action.

1. Logo: 

   Over hang the logo by the width of 1 ring-width.

2. Title:
   Use to introduce the main topic and grab the reader's attention.

   Heading 1, Gray 100
3. Subheading: 

   Use to provide additional context or details to elaborate on the main heading.
   Heading 2, Gray 100
4. Text: 

   Use as body copy to provide additional information or context.
   Body Copy 1, Gray 100

Articles

When arranging typography for a long-form document, prioritize rhythm by considering hierarchy, spacing, font size, and contrast. Maintain consistent styles for improved readability and aesthetics.

1. Pre-title/ Category: 

   Use to provide additional context to the main title.
   Heading 4, violet 400
2. Title:
   Use to introduce the main topic and grab the reader's attention.
   Heading 1, Gray 100
3. Date / Meta: 

   Use for additional details like dates, authors, etc.

   Body copy 3, Gray 100
4. Link: 

   Use to reference external content or direct readers to additional resources.
   Body copy 2, Accent
5. Block quote: 

   Use to highlight an important or notable section of text, often from another source.
   Block quote, Gray 0
6. Citation: 

   Use to give credit to sources and provide credibility to the information presented in the content.
   Citation, Gray 400

Website

When laying out website typography, prioritize user engagement by leveraging hierarchy, size, spacing, and contrast for readability.

1. VP Statement: 

   Use to provide a compelling reason for visitors to engage with the website.
   Heading 1, violet 400
2. Supporting Statement:
   Used to reinforce the value proposition and provide additional information or clarification to visitors.
   Heading 2, Gray 100
3. Button: 

   Use to trigger an action,  link to another page or reference external content.
   Body copy 1, Gray 100