Fluent Design – Typography

Overview

The Fluent Design System adopts a modern typographic language that balances readability, hierarchy, and visual elegance across devices. The core typeface is Segoe UI Variable, a variable font that offers a wide range of optical sizes, weights, and widths.

Font Families

Weight & Scale

Fluent Design uses a systematic scale for text sizes and corresponding weights to create visual hierarchy.

Accessibility

Ensure contrast ratios meet WCAG AA standards. Use the SystemTypography resources for dynamic scaling based on user settings.

TextBlock
{
    FontFamily = "Segoe UI Variable";
    FontSize   = 16;
    FontWeight = FontWeights.Normal;
}

Sample Code (UWP)

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

public sealed partial class TypographyDemo : Page
{
    public TypographyDemo()
    {
        this.InitializeComponent();

        var title = new TextBlock
        {
            Text = "Fluent Design Typography",
            FontSize = 32,
            FontWeight = FontWeights.SemiBold,
            Margin = new Thickness(0,0,0,12)
        };

        var body = new TextBlock
        {
            Text = "Use Segoe UI Variable for a fluid typographic experience across devices.",
            FontSize = 16,
            TextWrapping = TextWrapping.Wrap
        };

        ContentStack.Children.Add(title);
        ContentStack.Children.Add(body);
    }
}