Overview
Typography presets define properties such as font-family, font-weight and line-height, in one design token. In combination with other style presets and spacing they provide the visual attributes of a component.
Typeface: Inter
Inter is a variable font family carefully crafted & designed for computer screens.
Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
The Inter project is led by Rasmus Andersson, a Swedish maker–of–software living in San Francisco. To contribute, see github.com/rsms/inter
Title
Typography titles in the UI refer to the design and presentation of textual elements that serve as titles within a user interface. Typography plays a significant role in creating a visually appealing and user-friendly UI by conveying hierarchy, establishing a visual identity, and enhancing readability. These are some key considerations for typography titles in UI:
- Hierarchy and emphasis: Typography titles help establish a clear visual hierarchy within the interface. By using different font sizes, weights, or styles, designers can differentiate between primary titles, subheadings, and other levels of headings. This hierarchy guides the users' attention and indicates the relative importance of each title within the content structure.
- Readability: Titles should be easy to read and comprehend. Selecting legible fonts and maintaining appropriate font sizes are essential for readability. Consider the characteristics of the chosen typeface, such as its letterforms, x-height, and spacing, to ensure clear and crisp rendering on different devices and screen sizes.
- Contrast: Contrasting colors, font weights, or styles can help titles stand out from the rest of the text. However, it's important to strike a balance so that the contrast is noticeable without causing visual strain or distraction.
- Consistency: Consistency in typography titles promotes a cohesive and unified visual experience across the UI. Establishing a set of guidelines for font choices, sizes, and styles ensures a consistent visual identity. This consistency helps users navigate the interface, as they become familiar with the visual cues associated with different types of titles.
- Branding: Titles can contribute to the overall branding of the interface. By selecting fonts and styles that align with the brand's personality and visual identity, designers can reinforce the brand image. Consistent use of typography across different touchpoints enhances brand recognition and strengthens the user's connection to the interface.
- Accessibility: Designing typography with accessibility in mind is crucial. Ensure sufficient color contrast between text and backgrounds to accommodate users with visual impairments. Additionally, consider implementing proper heading structure using HTML tags (e.g., <h1>, <h2>, etc.) for screen readers to interpret and navigate content effectively.
Body
Body text in a design system refers to the main content text used throughout various components and screens. It is typically used for paragraphs, articles, descriptions, labels, and other textual elements that provide information to users. The usage of body text in a design system serves several important purposes:
- Readability and clarity: The primary objective of body text is to ensure the content is readable and clear. Selecting appropriate fonts, font sizes, line heights, and line lengths is crucial in making the text comfortable to read. The body text should be legible across different devices and screen sizes, considering factors such as resolution and viewing distance.
- Consistency: Consistency in body text styling contributes to a cohesive and unified visual experience. A design system typically defines specific typography guidelines for body text, including font choices, sizes, line spacing, and other attributes. Adhering to these guidelines ensures consistency across different components and screens, providing a sense of familiarity and coherence to users.
- Information hierarchy: Body text plays a role in establishing the information hierarchy within the UI. It is often used for presenting less prominent information or supporting content. By differentiating the body text from headings or titles, designers can guide the users' attention and help them understand the relative importance of different pieces of information.
- Scannability: Body text should be scannable, allowing users to quickly grasp the main points or extract the information they need. Proper formatting techniques such as the use of bullet points, numbered lists, paragraphs, and clear organization of content help users scan and digest information more efficiently.
- Accessibility: Considering accessibility is essential when using body text. Selecting fonts with good legibility, providing sufficient color contrast between text and background, and ensuring appropriate text size contribute to making the content accessible to users with visual impairments or reading difficulties. Additionally, providing options for text resizing or alternative text versions can enhance the accessibility of body text.
- Localization: Body text should be designed with localization in mind, allowing for text expansion or contraction when translating content into different languages. This ensures that the layout remains intact and readable even with varying text lengths.
- Branding: While body text is typically more neutral and standardized compared to other design elements, it still contributes to the overall branding of the interface. Design systems may define specific font families or styles that align with the brand's visual identity, providing a consistent and recognizable voice throughout the UI.
Body text in a design system serves as the main content carrier, ensuring readability, consistency, and hierarchy within the UI. By following these guidelines, designers can create a cohesive and user-friendly experience that effectively communicates information to users.
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.