Introduction
Welcome to the Typography Hierarchy and Pairing design system documentation. This guide aims to provide a comprehensive overview of the principles, guidelines, and best practices for creating a harmonious and effective typography system for your digital projects.
Effective typography hierarchy and pairing play a crucial role in enhancing readability, establishing visual hierarchy, and conveying your brand's personality. By following these guidelines, you'll ensure a consistent and visually appealing experience for your users across different platforms and devices.
Using Title
Headings serve as key elements for structuring content and guiding users through your design. Ensure that your headings maintain consistent visual weight and style across different sections of your project.
- Title L (H1): The largest and boldest font size. Use sparingly for page titles or major sections.
Emaple: Page Title
- Title M (H2): Slightly smaller than Title L, used for section titles or subheadings.
Example: Table Titel
- Title S (H3): Smaller than Title M, used for sub-section titles.
Example: Group Title
Title hierarchy
The following examples demonstrate the utilization of our Title Styles to establish a clear hierarchy across various navigation levels.
Using Body
Body Strong
Styles: Body L Strong, Body M Strong & Body S Strong
Default: Body M Strong
- Font Weight: Medium
- Usage: Use Body Strong to emphasize important points, key concepts, or to create visual contrast within a paragraph. It draws attention and reinforces the significance of specific text.
Body
Styles: Body L, Body M & Body S
Default: Body M
- Font Weight: Regular
- Usage: Body is your default text style for paragraphs. It provides a balanced and easily readable presentation of content. Use this style for standard text that doesn't require special emphasis.
To establish hierarchy within paragraphs, follow these guidelines:
- Use Body Strong Sparingly: Reserve Body Strong for the most important information within a paragraph. Overusing it can diminish its impact and disrupt the flow of text.
- Emphasize Key Points: Utilize Body Strong to highlight key takeaways, data points, or any information you want readers to notice immediately.
- Maintain Consistency: Stick to the Body style for standard text. Consistency ensures a smooth reading experience and prevents distractions.
- Organize Information: Structure your paragraphs logically, using Body Strong to guide readers through the main ideas and Body for supporting details.
- Avoid Clutter: Limit the use of both styles within a single paragraph. Mixing them excessively can lead to clutter and confusion.
- Consider Context: Adapt the use of Body Strong and Body to the context of your content. Longer paragraphs might benefit from occasional Body Strong emphasis, while shorter paragraphs may rely more on Body for clarity.
Body Hierarchy
Using Highlight
The Highlight Text style plays a vital role in drawing attention, conveying importance, and enhancing user engagement. By following these guidelines, you'll ensure a consistent and impactful use of the Highlight Text style across various contexts.
Understanding the Highlight Text Style
The Highlight Text style is designed to grab users' attention and emphasize specific information. It is commonly used for elements such as data points, marketing messaging, pricings, offers, and other noteworthy content.
Characteristics of the Highlight Text Style:
- Color: The Highlight Text is typically rendered in a distinct color that contrasts with the surrounding text, making it stand out.
- Font Weight: The text may have a slightly increased font weight to enhance visibility and prominence.
- Usage: The Highlight Text style is intended for short phrases, keywords, or brief segments of text that require immediate attention and emphasis.
Applying the Highlight Text Style
To effectively apply the Highlight Text style, follow these guidelines:
- Use Sparingly: Reserve the Highlight Text style for content that genuinely warrants emphasis. Overuse can dilute its impact and reduce its effectiveness.
- Emphasize Key Information: Utilize the Highlight Text style to highlight data points, key figures, important statistics, marketing messaging, pricing details, discounts, or any content that holds significant value.
- Maintain Contrast: Ensure that the color of the Highlight Text provides a clear contrast with the surrounding text to ensure legibility and visibility.
- Consistency: Establish consistency in the application of the Highlight Text style across your design system to maintain a cohesive and unified visual language.
- Avoid Distractions: Limit the use of the Highlight Text style within a single piece of content to prevent visual clutter and maintain a clean design.
- Responsive Design: Ensure that the Highlight Text style remains effective and legible across various devices and screen sizes.
