[v10] Add code and monospace font utilities

[edwardhorsford]

Description

My service displays NHS number and something called an accession number, and I wanted to display these in a fixed width font. We tried using .nhsuk-input--code but this is meant for text inputs and excessively spaces letters, especially spaces.

Chatting with @colinrotherham it felt like it could be helpful to have a general purpose modifier for this.

I've set it to to:

• use monospace font (like the .nhsuk-input--code)
• slightly increase default letter spacing
• slightly reduce word spacing (width of spaces)

Screenshot:

I also took the opportunity to update the example NHS numbers in the frontend app to the same example from the design system, and one explicitly starting with 9, which is a reserved range.

At the suggestion of @colinrotherham I've made an internal @mixin nhsuk-font-monospace() mixin and used it in this new modifier and .nhsuk-input--code.

Update: We've split out two new sets of utilities:

• Utility class nhsuk-u-font-code with Sass mixin nhsuk-font-code
• Utility class nhsuk-u-font-monospace with Sass mixin nhsuk-font-monospace

With changes to the nhsuk-input--code modifier limited to tighter letter and word spacing

---

Sass deprecations

I've updated this PR to include Sass deprecations to prefer nhsuk-typography-* nhsuk-font-*

We've renamed Sass mixins for font weights. You can still use the previous names but we'll remove them in a future breaking release.

If you use Sass and you've used the following Sass mixins:

• replace nhsuk-typography-weight-normal with nhsuk-font-weight-normal
• replace nhsuk-typography-weight-bold with nhsuk-font-weight-bold

  .app-component {
    display: block;
-   @include nhsuk-typography-weight-bold;
+   @include nhsuk-font-weight-bold;
    @include nhsuk-responsive-margin(4, "bottom");
  }

[colinrotherham]

Looks great, thanks Ed

I'd forgotten GOV use govuk-!-font-tabular-numbers

i.e. There's no -family- in there

Wondering whether "monospace" fits better in terms of fonts?

- .nhsuk-u-font-family-code {
+ .nhsuk-u-font-monospace {

[edwardhorsford]

Amusingly I'm the one who first added tabular numbers on GOV.UK.

Happy to try a different name and would prefer something shorter anyway. I guess for us to decide whether to frame it about monospace fonts, or to frame it about the end usage - for codes.

[anandamaryon1]

Thanks for opening this @edwardhorsford

I did the input-code spacing and I think I went with the increased spacing as a balance – on different devices the monospace font renders with different fonts.

But I need to check this. Agree on my Mac that it looks OK with less spacing.

In terms of a modifier and/or input-code styling: I think it'd be useful to have both. The input-code having extra letter spacing and the general-purpose monospace having default spacing.

[anandamaryon1]

Windows

Before (current):

After (this PR):

So, it looks a bit tighter due to the font, but maybe OK still?

[edwardhorsford]

@anandamaryon1 we don't have to reduce the letter-spacing like I've done - or indeed could pick a number half way between. But I'd be very keen on reducing the word-spacing so that spaces are not so large / the groups of digits aren't so separated.

[anandamaryon1]

@edwardhorsford I've pushed an update to meet in the middle with the nhsuk-input--code letter spacing and reduce the word-spacing. I've removed these from the basic nhsuk-u-font-monospace helper as when used on non-number content the reduced spacing makes it harder to read.

For example (letter-spacing: 0.075em; word-spacing: -0.5ch;):

[colinrotherham]

I'm going to rebase this against support/10.x then we can get it released

[colinrotherham]

@anandamaryon1 I'll make one tiny tweak though

Let's keep the font mixin API the same and only support $important

i.e. We can set the custom spacing like GOV.UK Frontend, only where necessary

.nhsuk-input--code {
- @include nhsuk-font-monospace($letter-spacing: 0.075em, $word-spacing: -0.5ch);
+ @include nhsuk-font-monospace;
+ letter-spacing: 0.075em;
+ word-spacing: -0.5ch;
}

[edwardhorsford]

@anandamaryon1 Sounds good, happy with this compromise.

[colinrotherham]

@anandamaryon1 @edwardhorsford Can you check the new changelog edit please?

Noting that "monospace" text should have spaces and characters at the same width I've split out:

• HTML class nhsuk-u-font-code with Sass mixin nhsuk-font-code
• HTML class nhsuk-u-font-monospace with Sass mixin nhsuk-font-monospace

Aligning "code" with <code>

You'll also notice that nhsuk-input--code has font-size-adjust: 0.5 applied matching <code> etc

[anandamaryon1]

Aligning "code" with <code>

You'll also notice that nhsuk-input--code has font-size-adjust: 0.5 applied matching <code> etc

Ah, I was expecting the font-size-adjust: 0.5 to be on nhsuk-u-font-monospace but not nhsuk-input--code. On the input it can't be mixed with other text so if anything bigger is better, for legibility

[colinrotherham]

Updated the PR (see description) to include some Sass deprecations

We'll get this released in v10.5.2