Split tabular numbers functionality out from the govuk-font mixin

[36degrees]

What

Introduce a new mixin that can be used to turn on typographic numbers without needing to call the govuk-font mixin.

Update any components that currently call govuk-font with $tabular: true to use the new mixin.

Update the govuk-font mixin to use the new mixin whilst maintaining the existing behaviour.

Optionally, we could also decide to deprecate (and in the future remove) the $tabular param on the govuk-font mixin and tell people to use the new mixin instead.

Why

The current implementation is an artefact of the way tabular numbers used to work when compatibility mode was enabled, when we had to switch out the font entirely rather than just switching some font variant settings:

govuk-frontend/packages/govuk-frontend/src/govuk/helpers/_typography.scss

Line 189 in 3f13765

@include govuk-typography-common($font-family: $govuk-font-family-tabular);

Because govuk-font includes govuk-typography-common, our current approach means that switching on tabular numbers also brings in all of the common typography declarations including the font-face, even when they are not required.

For example, the CSS for the govuk-table__cell--numeric modifier class currently looks like this:

.govuk-table__cell--numeric {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "tnum" 1;
    font-feature-settings: "tnum" 1;
    font-family: GDS Transport,arial,sans-serif;
    font-weight: 400
}

@media print {
    .govuk-table__cell--numeric {
        font-family: sans-serif
    }
}

@supports (font-variant-numeric: tabular-nums) {
    .govuk-table__cell--numeric {
        -webkit-font-feature-settings:normal;
        font-feature-settings: normal;
        font-variant-numeric: tabular-nums
    }
}

When it could just look like this:

.govuk-table__cell--numeric {
    -webkit-font-feature-settings: "tnum" 1;
    font-feature-settings: "tnum" 1;
}

@supports (font-variant-numeric: tabular-nums) {
    .govuk-table__cell--numeric {
        -webkit-font-feature-settings:normal;
        font-feature-settings: normal;
        font-variant-numeric: tabular-nums
    }
}

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• We've introduced a new mixin that can be used to turn on typographic numbers
• We've updated any components that currently call govuk-font with $tabular: true to use the new mixin
• We've updated the govuk-font mixin to use the new mixin whilst maintaining the existing behaviour
• We've decided whether to deprecate the $tabular param on the govuk-font mixin