Fonts

[robredpath]

The original brand guidance for fonts says "Pragmatica for headings and Chalet London Sixty for the body copy"

Pragmatica is, as far as I know, fine.

We know that Chalet London Sixty is unavailable and therefore we should choose an alternative.

We might also want to choose a font for tiny text such as is common in d-portal:

(that's Ariel, with text-rendering: optimizeLegibility)

...as I suspect that the font that we choose to look good in as a replacement for body text might not look great when crammed into a 20px high axis label or a 10px codelist description.

[robredpath]

After extensive discussion (and giving several team members headaches trying to compare very similar fonts!) we have a decision!

We are switching to Hanken Grotesk for titles and Nunito Sans for body text. These are both openly licensed and available via the Google Fonts CDN.

There is, of course, the question of weights and so on which we can work out as we go, but we've made our first step.

For tiny text, we want to give it some further consideration, but I think we're clear on some principles;

• Consistency across devices is important (so prefer web fonts to system fonts)
• Consistency across the web estate is desirable, so following what's done elsewhere - either using the same fonts or visually similar ones
• Avoid any potential licensing weirdness is important (so either making sure that we use fonts that we have an appropriate license for the distribution/inclusion of, or that are licensed using an open license)

I think we'll take another run at how we handle tiny text with some guidance from @notshi (and others) and give some thought to the various applications, including the Dashboard (@Bjwebb @chrisarridge )

[robredpath]

@tillywoodfield could you update the relevant bits of the Storybook to reflect ^^ ?

[notshi]

Thanks for the progress on this.

We don't use any specific typeface on d-portal - we leave it to the browser that the user has chosen to view the website in. There's a preference for Arial, Helvetica but ultimately, it's whatever 'sans-serif' typeface the user, OS or browser is rendering.

For example, mine is showing the following in Chrome.

This means the browser looked but couldn't find Arial or Helvetica so used a generic sans-serif font, in this case, Liberation Sans.

This is all fine because browsers on different devices will never render things the same way.

What is probably good to look at is keeping consistency in how we deal with whitespaces and wrapping in words and due to different rendering rules in browsers, leave enough space for fonts to shrink and grow without affecting layout.

As for legibility, because data can be quite wordy, we've compromised with legibility in certain cases in SAVi; ie. the tiny text example you've provided. This is because the data provided is repeated many times over the length of the page so in this instance, we prioritised layout over legibility.

Technically, the smallest you should probably go is 12px but again, fonts render differently so it's completely font-dependant; ie. condensed typefaces are easier to read at tiny sizes, italics can be bigger, bold fonts can be hard to read at tiny sizes etc.

Ultimately, we chose the font sizes based on legibility and layout, making sure the pages look ok on different devices and browsers/operating systems; ie. results, not rules.