Titillium Web font

[normanrz]

Adds Titillium Web as new font for webKnossos which is the same as on the new landing page. In my testing I didn't notice any breaking layouts due to the new font. Fwiw the new font may be more narrow, which could be used for a more dense UI.

URL of deployed dev instance (used for testing):

• https://titillium.webknossos.xyz

Steps to test:

• Browse around to see if the font breaks any layouts

Issues:

• fixes Switch font to Titillium Web #5068

---

• Updated (unreleased) changelog
• Ready for review

[normanrz]

I had to change μ to µ, because the former is unfortunately part of the Titillium Web glyph set.

[fm3]

I have mixed feelings about this change. I can see that a single font across systems has benefits over using the system default fonts, i.e. the UI elements do not have to be tested on all platforms, and there is a recognizability/branding benefit.

However, the default UI fonts tend to be pretty good at their job. Segoe UI, San Francisco and Roboto are all reasonably similar to Frutiger or Helvetica to have readable and familiar metrics, while also being optimized for small display sizes and low pixel densities (Segoe UI is very good at the latter).

Titillium places significantly more emphasis on recognizability. This comes at the cost of both readability at small display sizes and compatibility with low pixel densities. Numerals are especially tiny and some letter shapes are very similar to each other, and letter spacing is small, while the glyphs themselves are a little bulkier.

Another example where a recognizable font was chosen over system fonts after a long time is the Google suite, where Google Sans replaced the system fonts. There, instead of readability, they sacrificed (at least to my subjective eye), the pleasing shapes a font can have. Also compatibility with low pixel densities, but that is somewhat compensated by the generous metrics.

That said, I don’t think Titillium is the worst choice if recognizability is super important now.

Some concrete problems we may encounter:

• We use font-weights titillium (or at least the included bundle) doesn’t have (e.g. 300 in welcome header). We should select other font weights and see if they still look well enough together

• The different metrics will require some small adjustments of surrounding layouts:

  • It is not visually as tall as e.g. Segoe, css places it differently, see button screenshot:
    

  • It is narrower and harder to read at the same size. We might want to increase size of some elements (but maybe we had some to spare before now. And users can use browser zoom if necessary)

• The glyph set is limited, scientists may want to use greek letters in descriptions, for example.

• Using a webfont always results in slower load times, but that is probably eclipsed by Can we reduce the bundled js size? #5054

[philippotto]

I don't have a strong opinion on this change and don't want to make the decision here. In general, I agree with @fm3's points and also think that the legibility is noticeably worse (even though, I'm not a font-aficionado who pays attention to this). However, I don't think that these concerns are blocking. Therefore, merging the change to make the transition from landing page to the actual instance smoother would be fine by me.

As @fm3 suggests, making a few small tweaks could already soften the drawbacks. For example, the webKnossos caption in the navbar might look more readable with a slightly larger font size?