Allow govuk-font mixin to bypass responsive typography

[owenatgov]

Proposal

Add an option to the govuk-font sass mixin to allow for bypassing of the design system responsive typography.

The desired outcome would be a way to use govuk-font in such a way that it includes all the desired helpers like anti-aliasing and print styles but doesn't produce additional media queries where the font size goes down at lower screen sizes. How this might look:

.my-element {
    @include govuk-font($size: 16, $responsive: false);
}

The above element would have a font size of 16px and the em equivalent at all screen sizes.

Context

On govuk, we've recently been doing some work to set a new design tone for govuk that provides a better experience on smaller devices. We'll be able to see this soon in the launch of the new homepage design. Something we've run into however is that there are instances where we want to maintain font size across screen sizes in order to both create a consistent experience for users and to adhere to good designs across screen sizes.

In order to meet our needs, we've had to bypass govuk-font and manually enter font values and associated extra attributes.

Examples of govuk components where we've done this:

• https://components.publishing.service.gov.uk/component-guide/layout_super_navigation_header
• https://components.publishing.service.gov.uk/component-guide/big_number

Pull requests that illustrate the problem:

• Remove use of govuk-font from the big number component govuk_publishing_components#2493
• Use the correct mixins for applying font in the big number component govuk_publishing_components#2494

We're conscious that there are mixins like govuk-typography-common that help with this approach, however the ideal would be to use govuk-font as it reduces risk of maintenance chain reactions in our code if govuk-font or any of it's settings ever change and means our code is cleaner.

There is also an accessibility concern as govuk-font encourages font size going below 16px on mobile if you want a small font size on desktop.

This issue is tangentially related #2418 but feels separate enough to this ask not to combine then, in my opinion.

[36degrees]

You can currently pass $size: false to govuk-font which will give you the basic font properties without any size declaration:

.app-my-class {
  @include govuk-font($size: false);
}

.app-my-class {
  font-family: "GDS Transport", arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400; }
  @media print {
    .app-my-class {
      font-family: sans-serif; } }

Possible improvements to this might include:

• adding an example to the Sass doc for the govuk-font mixin with $size: false

• adding a test for this behaviour to helpers/typography.test.js – there don't currently seem to be any tests for govuk-font! [EDIT: see Add tests for the govuk-font mixin #2474]

• providing an additional helper to output font-size properties with the appropriate rem declarations which could be used in combination with govuk-font($size: false) – and refactoring govuk-typography-responsive to use it

  @mixin govuk-font-size($size) {
    font-size: $size;
    @if $govuk-typography-use-rem {
      font-size: govuk-px-to-rem($size);
    }
  }

• allowing any(?) size to be passed to govuk-font with $responsive: false as suggested above

[owenatgov]

I'm going to close this as it's going to be superseded by work being done as part of alphagov/govuk-design-system#2289