Typography in Windows UI

Typography is a fundamental aspect of user interface design, influencing readability, hierarchy, and overall aesthetic. In Windows UI, we strive for clarity, consistency, and expressiveness through well-chosen typefaces and typographic scales.

Core Principles

Effective typography adheres to several key principles:

Readability: Content should be easy to read, even for extended periods. This involves choosing appropriate typefaces, font sizes, line heights, and line lengths.
Hierarchy: Type should guide the user's eye through the content, establishing a clear visual order of importance. Headings, subheadings, body text, and captions should be distinguishable.
Consistency: Use a consistent typographic system across your application to create a predictable and cohesive user experience.
Accessibility: Ensure your typography meets accessibility standards, including sufficient contrast and scalable font sizes for users with visual impairments.
Brand Alignment: Typography should reflect the personality and brand of your application or operating system.

Typeface: Segoe UI

The primary typeface for Windows UI is Segoe UI. It's a humanist sans-serif typeface designed for clarity and readability across various screen sizes and resolutions. Segoe UI offers a range of weights (Light, Semilight, Regular, Semibold, Bold, Black) to support typographic hierarchy.

Example: Segoe UI Weights

Segoe UI Light: This is light text.

Segoe UI Semilight: This is semilight text.

Segoe UI Regular: This is regular text.

Segoe UI Semibold: This is semibold text.

Segoe UI Bold: This is bold text.

Segoe UI Black: This is black text.

Type Scale

A well-defined type scale ensures that typographic elements maintain proportional relationships. This scale is typically based on a multiplier or an established system (like Fluent Design's typographic ramp).

Common Type Sizes and Uses:

Display (e.g., H1): For prominent titles and headings.
Title (e.g., H2): For section headings.
Subtitle (e.g., H3): For sub-sections or important callouts.
Body: The main content text.
Caption: For supplementary information, metadata, or labels.
Small: For fine print or very specific UI elements.

Example: Type Scale Application

Display Heading (H1)

This is an example of body text. It should be legible and provide sufficient information for the user. We use Segoe UI Regular for body text, with a typical font size of 16px and a line height of 24px for optimal readability on most screens.

Section Title (H2)

This is another paragraph of body text to illustrate spacing and flow. Notice how the visual hierarchy is established by the larger, bolder headings.

Subsection Title (H3)

This text is typically styled with a slightly smaller size and perhaps a different weight or color to differentiate it further. A common practice is to use Semibold for H3.

This is caption text. Used for metadata or secondary information.

Line Height and Spacing

Line height (leading) is crucial for readability. A common guideline is to set line height to approximately 1.5 times the font size. For example, if your body text is 16px, a line height of 24px is often suitable.

Generous spacing between paragraphs and sections prevents text from feeling cramped and improves scannability.

Code Typography

For code examples and technical terms, a monospaced font is essential for clear distinction and alignment. 'Consolas' or 'Monaco' are excellent choices.

Example: Code Snippets

Here's how you might define a style in CSS:

.button {
    background-color: #0078d4;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

The term <button> is an HTML element.

Best Practices

Avoid overly decorative fonts for body text.
Limit the number of font families used in an application (ideally one or two).
Ensure sufficient contrast between text and background colors.
Test your typography on different devices and screen sizes.
Use relative units (like rem or em) for font sizes to allow for user scaling.