Segoe UI, tabular figures and DirectWrite

20 July 2024 • 1 min read

When using the normal weight of Segoe UI, the default Windows font, a column of numbers looks something like this:

I recently noticed, however, that when switching to a semi-light font weight, the column instead looks like this:

There’s suddenly less spacing around the digit 1, and the numbers no longer line up.

The reason? Some Segoe UI font weights default to tabular figures (numerals), while others default to proportional figures.

The good news is that it’s possible to switch between the two styles using the ‘tnum’ and ‘pnum’ OpenType features. When using CSS, tabular and proportional figures can be selected between (for supported fonts) by using the font-variant-numeric CSS property.

But what about when using DirectWrite in a Windows desktop app? Nothing much useful comes up when searching for ‘DirectWrite tabular figures’ on Google. However, with a bit of digging through the documentation, I found the answer:

void enable_tabular_figures(const wil::com_ptr_t<IDWriteFactory>& factory,
    const wil::com_ptr_t<IDWriteTextLayout>& text_layout, const DWRITE_TEXT_RANGE text_range)
{
    wil::com_ptr_t<IDWriteTypography> typography;
    THROW_IF_FAILED(factory->CreateTypography(&typography));

    THROW_IF_FAILED(typography->AddFontFeature({DWRITE_FONT_FEATURE_TAG_TABULAR_FIGURES, 1}));

    THROW_IF_FAILED(text_layout->SetTypography(typography.get(), text_range));
}

And here’s the result – Segoe UI with a semi-light font weight and tabular figures: