Typography Guidelines

Effective typography is crucial for creating a clear, readable, and aesthetically pleasing user interface. This section outlines the principles and best practices for using typography in Windows applications.

Core Principles

Typography in Windows emphasizes:

  • Readability: Ensuring text is easy to read at various sizes and contexts.
  • Hierarchy: Using font styles, sizes, and weights to guide the user's attention.
  • Consistency: Maintaining a uniform typographic language across the application.
  • Accessibility: Providing sufficient contrast and legibility for all users.

Typeface: Segoe UI

Segoe UI is the system font for Windows and is recommended for use in all applications. It is designed for screen legibility, with clear letterforms and generous spacing.

Sample Text (Segoe UI)

This is a sample paragraph demonstrating the default readability of Segoe UI. It works well for both short labels and longer blocks of text.

This text is bold and this text is italicized to show different styles.

Font Sizes and Weights

A well-defined typographic scale helps establish a clear visual hierarchy. Here are common usages:

Headings

Use headings to structure content and indicate sections. Larger font sizes and bolder weights denote higher importance.

Headings Example

Heading 1: Major Section Title

Heading 2: Subsection Title

Heading 3: Sub-subsection Title

Body Text

Standard paragraphs for general content. Ensure sufficient line spacing for comfortable reading.

Body Text Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Labels and Controls

Used for buttons, input fields, and other UI elements. Typically uses a smaller font size and regular or medium weight.

Labels and Controls Example

Username:

Code Snippets

For displaying code or technical terms, use a monospace font and distinct styling.

Code Example

The following C# code snippet demonstrates how to set the text of a label:

public void SetLabelText(string text)
{
    myLabel.Text = text;
}

Use the <span> tag with the appropriate class for inline code.

Best Practices

  • Limit the number of different font sizes and weights used within a single view.
  • Ensure adequate contrast between text color and background color.
  • Test typography at various screen resolutions and zoom levels.
  • Avoid using all caps for body text.
  • Use dynamic type for responsive design, allowing users to adjust font sizes.