[Meta] Font system rework

[madmalik]

Rework of the font system

Summery

There are numerous problems with the typography on the site. Imo, we should zoom a little bit out and rethink it in context rather than working on them separately. My goal with this issue is to summarise the problems, give a little bit of context and propose a direction forward.

Ideally this could lead to a high level discussion and explicit reasoning for the design choices. This could come in handy to have something to reference in case of drive-by change requests.

In Detail

The current font setup is Alfa Slab One for headlines and Fira Sans (in 6 variants) for body text. Current issues are:

• Alfa Sans One is missing characters for the turkish translation (issue Fix Alfa Sans One #858)
• Fira Sans is also missing characters, but this could be fixed with using the extended Fira Go typeface (issue Replace Fira with FiraGO #755). Potential problem is the increased font size.
• The rust in productions section could use some typographic love (issue Rework "Rust in Production" section #772)

To add some of my own

• the code blocks use font-family: Consolas,monaco,monospace. Both Consolas and Monaco are very different from fira sans, and on many linux boxes it will render as whatever is the standard monospace font, probably something courier-ish.
• For my eyes, the site is very busy. I really like the friendly, colourful and slightly whimsical concept and i'm not arguing changing that, but imo it could benefit from a calmer typography to balance it a little bit out.
• Also on the issue of color, some combinations of text color and background are problematic in terms of contrast. Again not arguing a change here, but we could some other measures to boost readability.

design review

I was not involved in the original design of the site, so i don't know the exact reasons for the particular choices. But i want to argue that the current state is a sound basis.

The headline font Alpha Slab One is a take on the classic egyptian slab serif font and mirrors the style of the rust logo. I really like that connection and its delightfully whimsical and bold.
The text font was probably inherited from the old site and is also used in rustdocs and other rust materials. Fira Sans is very closely related to the meta typeface which was created in the 80s, at first intended for a rebranding of the german postal service. Meta Sans is probably the most successful humanistic sans serif typeface overall. A lot of cooperations adopted it (or variants) to project an approachable image. It's kind of an antithesis to helvitica.

One of those cooperations is Mozilla, which explains their commission of a free variant for the now defunct Firefox OS.

Imo, the style of the typeface is very fitting for the rust project and the approachable, friendly image we want to project. Its a bit overused, but still a great design and extremely readable (plenty of space between the letters, open counters, the hooked "l", the serif on the i etc.).

What should we do to address the problems?

My proposal: We don't change the fonts choices itself. If we could use non-free fonts i would have some recommendations for great, but less overused humanistic sans serifs, but if we want to stay free this is as good as its gets.
But:

• We tighten up the usage. Get the line heights and font sizes more unified
• We use Fira Go to get i18n support. We probably have to review what we really need, since every variant is around 300kb big
• We get down to one base font plus a single variant. Currently we use three weights in both italic and bold. My proposal is to use a single weight consistency and use italics for emphasis and quotes. This should calm down the appearance of the text quite a bit and makes it feasible to use Fira Go. Also, the italic variant in fira is just really nice and i'd like to test the usage for subheads (that are currently bold).
• We use Fira Mono for the code examples
• We bump the text size up to 20px, at least on large screens
• We extend Alpha Slab One. It's license allows that and i have the tools and knowledge to do that, but we have to review how much is missing. I wouldn't propose that for a text font or a whole family, but with a single weight display font it should be doable

Alternatives

One possibility is to just use the system font instead of Fira (proposed and closed in issue ##506). In principal, i like that approach and it should be used for often in general. No loading time, people are already used to the font and we can be sure that i188n is no problem.

But: The site would lose a lot of character since its more or less only typography and color. In addition to that there is no user generated content, so we know what characters we need in our font.

An alternative to the extension of Alpha Slab One would be finding an alternative with similar design, but extended glyph set. I haven't looked around yet.

[skade]

I'd like to note that https://fonts.google.com/specimen/Alfa+Slab+One works fine with the turkish sentences that we use. Still, Alfa is not available for many scripts that might be upcoming, e.g. chinese characters, so we need an alternative there.

Fire GO could, to my reading, also be split into multiple files and loaded with the current system only on need.

[Manishearth]

I'm totally okay picking different fonts based on language, btw. CSS is pretty good at letting you do this.

[skade]

Right, that's what I wanted to imply, sorry for being unclear.

[madmalik]

Splitting Fira Go into multiple fonts and loading on demand is good idea i hadn't thought about :D

[skade]

There's infrastructure for that there in the css and @chriskrycho had built it, I just don't know what the whole toolchain behind it was (e.g. for splitting the fonts).

[chriskrycho]

IIRC we just subset them using FontSquirrel? The license should allow that, and I’ve done it with good success for other similar projects before. Downside is it’s not trivially automatable if adding new languages.

(Aside: I 100% affirm the direction outlined in the original post. I executed on the design as it existed when I came on to help with the launch late in the game but would have made very similar suggestions had I had more time; I’m delighted to see it getting some motion now!)

[skade]

@chriskrycho The license is not the problem. My question was more if there's some automated tooling to split into {font}.latin-ext and such.

[Manishearth]

Why do we need to split fonts? It's fine to ship a combined font that deals with all the Latin-based scripts -- just pick one that supports everything.

We will need to pick different fonts for languages that use entirely different scripts. Browsers are pretty good at loading only the parts of fonts that are needed for the page.

I feel like splitting fonts is a bit of overkill here.

[skade]

@Manishearth With Alfa, I'd agree, but Fira GO is Nokia Here's international extension of Fira and brings a lot of international glyphs for foreign scripts. It weights 300k+. I agree that latin vs. latin-ext is probably not the problem here (but currently exists), but it has a arabic and similar.

https://bboxtype.com/typefaces/FiraGO/#!layout=specimen