Skip to content

Rebuild the base font-family (Lato) to include all weights #14490

@oboc-sts

Description

@oboc-sts

The problem

The Lato version we’re currently using in our production env seems to be the one from Google Fonts. Which means that the list of supported font-weights is really slim:

  • Thin (100)
  • Light (300)
  • Regular (400)
  • Bold (700)
  • Black (900).

In other words, it doesn't include the extra light (200) variant and it skips the mid-range weights between regular and bold = medium (500) and semi-bold (600).

This causes quite a few problems when it comes down to designing and implementing efficient interfaces simply because the gap between 400 and 700 is too steep:

  • poor typography;
  • limited ways to achieve proper visual hierarchy - for example, one golden rule for applying proper weights is to skip 1 level in the same context (e.g. use 400 with 600 or 500 with 700) when emphasizing elements;
  • rendering and handover mismatch between design and engineering - our design tools are making use of the full weights spectrum, which breaks the implementation if we don't use the same values.

Potential solution

Some time ago, we ran into a similar problem with a particular version of Roboto we were using in SUSE Observability. We solved it by rebuilding the font family with the right variants, containing all the weights, and opting for a self-hosted solution instead of using the googleapis.

Maybe we can do the same for Rancher by using this version of Lato: https://github.com/googlefonts/LatoGFVersion/tree/main/fonts

Metadata

Metadata

Assignees

No fields configured for Feature.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions