1090466 - Open Sans's lack of serifs is a problem when reading API terms

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Eric Shepherd [:sheppy]]

What did you do?
================
Go to, for example, https://developer.mozilla.org/en-US/docs/tag/Interfaces.

What happened?
==============
Look at the first item in the bullet list. It looks like it says "callCalendarView", but it doesn't. That's actually "calICalendarView". This happens in many places. Usually we try to style API terms with <code>, which resolves this issue, but that doesn't always happen, especially in cases like this.

What should have happened?
==========================
We need to use a typeface that has at least a subtle serif on the upper-case "I", and probably we have the same issue with other letters, such as "O" vs "0".

Is there anything else we should know?
======================================
This could result in some significant problems for developers reading content on MDN.

Comment 1

[Eric Shepherd [:sheppy]]

Attachment: Articles_tagged__Interfaces___MDN.png

Comment 2

[Māris Fogels [:mars] (please needinfo)]

Marking as major, Sheppy's example in comment 1 is very hard to read, especially for a technical document.  :davidwalsh, :shobson, what are your thoughts on fixes for this?

Comment 3

[John Karahalis [:openjck]]

The writers are doing a great job using <code> elements to wrap these terms in body content. It's page titles (and listings that use page titles, like [1]) that we need to worry about.

Wikipedia uses a serif font for page titles [2]. What if we used a serif font for page titles wherever they appear? Stephanie, David: Do you think that would detract from the overall visual design?

[1] https://developer.mozilla.org/en-US/docs/tag/Interfaces
[2] http://en.wikipedia.org/wiki/Printf_%28Unix%29

Comment 4

[Eric Shepherd [:sheppy]]

(In reply to John Karahalis [:openjck] from comment #3)
> The writers are doing a great job using <code> elements to wrap these terms
> in body content. It's page titles (and listings that use page titles, like
> [1]) that we need to worry about.
> 
> Wikipedia uses a serif font for page titles [2]. What if we used a serif
> font for page titles wherever they appear? Stephanie, David: Do you think
> that would detract from the overall visual design?

We did that on MDN in the past, for what it's worth.

I personally have no problem with it, stylistically, for what that's worth.

The big question, though, is how to deal with it in other cases, such as in these generated lists.

Comment 5

[John Karahalis [:openjck]]

I was thinking we could use a serif font wherever titles appear, including <h1> elements and the links in automatically-generated listings.

Comment 6

[Eric Shepherd [:sheppy]]

(In reply to John Karahalis [:openjck] from comment #5)
> I was thinking we could use a serif font wherever titles appear, including
> <h1> elements and the links in automatically-generated listings.

I can't think of any way to do it in other cases, since usually these links are created by script code, not by the Kuma system itself. How would our scripts know which words need to be styled?

Comment 7

[John Karahalis [:openjck]]

We could in theory do something on our side that finds internal links to articles and gives them a certain class. Before we get there, though, I'm wondering if this makes sense stylistically. Any thoughts David?

Comment 8

[David Walsh :davidwalsh]

"In theory do something" seems scary.  We should:

(1)  See what Support does for text
(2)  Consult design about a recommendation, possibly a different text font

Comment 9

[John Karahalis [:openjck]]

I suggest we pause on this until Stephanie or Sean can comment. I agree that this issue deserves some attention, but I also want to be sure we don't create another by skipping design review.

Comment 10

[Eric Shepherd [:sheppy]]

Yeah, we should get comments from Stephanie and Sean. I bet Sean will be able to come up with a solution. My personal preference would be to switch from Open Sans as our body text font to something as similar as possible to that but with some very light serifs to differentiate "l", "I", and "1", and "0" and "O".

Comment 11

[Stephanie Hobson [:shobson]]

Would it be possible for us to include code tags in the page titles?

Comment 12

[Luke Crouch [:groovecoder]]

It's possible, but we shouldn't because we would either:

1. add a clean_title method using the same ALLOWED_* values as content [1] which sounds scary and would require an audit of everywhere we display the title of pages

or

2. add a 2nd set of ALLOWED_TITLE_TAGS values [2] which sounds like Yet Another Conditional To Maintain

[1] https://github.com/mozilla/kuma/blob/58093b04fbf56de7f679f400f4bb681f393cf76d/kuma/wiki/managers.py#L25-L42
[2] https://github.com/mozilla/kuma/blob/0f0dc79f553bdce75c7dde0582050d4f5e06e4a2/kuma/wiki/constants.py#L9-L34

Comment 13

[Stephanie Hobson [:shobson]]

The headings become really wide and ugly if we use our monospace font and I'm not crazy about attaching another webfont to the site just for headings. An ideal solution for me would be to replace OpenSans with something that differentiates between the problematic letters better.

I am annoyed that Fira is not a clear solution to this problem. It does at least have different characters for lI10 and O but when I see them in a line it's not clear which is which only that they're different.

We really need Sean's thoughts on this.

Comment 14

[Eric Shepherd [:sheppy]]

Agreed that we need someone from design to offer insight before we do anything; hopefully we can get that help sooner rather than later. :)

Comment 15

[Sean Martell]

Hey all!

Looking at the issue, Open Sans is soon going to be replaced across the board with Fira Sans, now that it is Mozilla's official font going forward.

It does not have the crossbars on the I, but it does have a unique lowercase l to compensate. http://cl.ly/image/2V2E191a0W0h

That said, we're looking into further funding for Fira Sans which includes a Serif line for the family. I'll be sure to mark this scenario as an example for the need.

Let's talk in Portland and we can perhaps look at some potential solutions together.

Comment 16

[Graham Perrin]

> Open Sans is soon going to be replaced across the board with Fira Sans, now that it is Mozilla's official font going forward.

Hurrah! And whilst we wait for the 2020s, count the exclamation marks in this Firefox rendering of lyrics to something lush from the 1970s: 

https://files.gitter.im/trueos/Random/bQxJ/Ooh_-love-to-hate-you-Open-Sans.png

Source: https://docs.google.com/document/d/1TOV6h3b5xPctNzwpyRFlIKGL0P_5iuB9H3kg9vIRLsI/

Comment 18

[Eric Shepherd [:sheppy]]

FWIW, this came up in today's triage (as it's referenced by another bug that was triaged today). It is still a problem even though we're using Verdana now. The same example mentioned in c#0 applies still.

Comment 19

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.