Closed Bug 1607913 (Consolas) Opened 5 years ago Closed 3 years ago

Update default monospace fonts from Courier New to Consolas on Windows

Categories

(Core :: Layout: Text and Fonts, enhancement, P3)

Desktop
Windows
enhancement

Tracking

()

RESOLVED FIXED
99 Branch
Tracking Status
firefox99 --- fixed

People

(Reporter: spohl, Assigned: emilio)

References

(Blocks 1 open bug, Regressed 1 open bug)

Details

(Keywords: dev-doc-needed, Whiteboard: [mac:nonnativetheme], [wptsync upstream])

Attachments

(1 file)

Our monospace fonts default to Courier and Courier New, at least on macOS. We are switching to built-in themes for form controls in bug 1381938 and this results in our default monospace fonts to appear in form controls such as the date and time pickers (see left side of http://stephenhorlander.com/form-controls.html). During UX review of the new form controls, :shorlander suggested that we switch to something more modern. The suggestions were:

macOS:

  • Menlo has been in use since 10.6
  • SF Mono has been in use since 10.11

Windows:

  • Consolas has been in use since Vista

Should we try to match the fonts used by other browsers?

Priority: -- → P3

Hey Stephen, this conversation seems to have stalled.

Could some more detail be added on which fonts would should be used and the priority of this?

Thanks!

Flags: needinfo?(spohl.mozilla.bugs)

We do not have an ETA for shipping the non-native theme on macOS, but it's probably best to get this addressed ahead of time. The suggested fonts to switch to are mentioned in comment 0 and any questions about font choice (like comment 1) would need to be answered by UX.

Flags: needinfo?(spohl.mozilla.bugs)

@Stephen: Could you advice on font choices here?

Flags: needinfo?(shorlander)

Here's the current state of all browsers and platforms, tested only in English:

  • Firefox and Chrome on all platforms use font-family: monospace for <input type=date>, whereas Safari uses font-family: system-ui (notably not system-ui-monospace, which would yield SF Mono)
  • The monospace generic currently maps to
    • Courier on all macOS browsers
    • "monospace" (which fontconfig maps to DejaVu Sans Mono on my system) in Firefox and Chrome on Linux
    • Courier New in Firefox and Consolas in Chrome on Windows

We don't currently have a way to use SF Mono from CSS, since it's a hidden font. In theory the right way to expose that is through the system-ui-monospace generic, which we don't implement yet. (And I guess it's possible a macOS maps requests for the "system UI monospace font" to something other than SF Mono for other languages.)

I think the most important thing is to update Windows from using Courier New (which is exceptionally thin!) to something else. Consolas seems good for consistency with Chrome.

On macOS I lean towards sticking with Courier for the monospace font, again for consistency with other browsers. (And it's not nearly as ugly as Courier New.) Menlo is also ~17% taller than Courier. We could also consider using Menlo on <input type=date> specifically, and leaving monospace to map to Courier.

Another thing I discovered a few weeks ago is that many language-specific font prefs for the monospace generic do not specify a monospace font. As a result, documents like

<!DOCTYPE html>
<html lang=ko>
<pre>if (x > 10) {
  ...
}</pre>

at least on macOS, show the pre with a proportional font. So we might want to take the opportunity to fix these up at the same time.

I'll write up a patch to get feedback from shorlander and jfkthame.

Assignee: nobody → cam
Status: NEW → ASSIGNED
Component: Graphics: Text → Layout: Text and Fonts
See Also: → 713680

One thing I noticed while comparing Courier New and Consolas (looking at an up-to-date Windows 10) is that they have different character coverage, which may influence our choices. Specifically, Courier New supports Hebrew and Arabic and Consolas does not. (Consolas supports a couple of dingbat / decorative blocks that Courier New does not.)

Stephen, here's a Windows build with the monospace font pref updates. Let me know if there's anything that look wrong to you.

https://treeherder.mozilla.org/#/jobs?repo=try&revision=d1042a0cefda56e3591554fec983427f01b76d31&group_state=expanded&selectedTaskRun=H9Q3of3tQSSV_uto9s6oZA.0

Flags: needinfo?(shorlander)

For Hebrew and Arabic, keep Courier New in the list, since it has coverage of
these scripts that Consolas doesn't, and it seems preferable to stick with
a monospace font. (Although the pitch will be different, so it may not
be worth it.)

A number of tests (and expectations) are updated here to either avoid
accidentally relying on the size of Courier New on Windows, or to
explicitly use Courier New instead of monospace, where it's harder to
work out how to rewrite the test correctly.

Also Stephen, please let me know if you disagree with not switching the monospace font on Linux and macOS.

Mats, in Cameron's patch here he adds an explicit "Courier New" to a bunch of the tentative Masonry tests. It seems unfortunate if they're sensitive to the exact metrics of the monospace font used, which may not be consistent between platforms/browsers; can we try to ensure they work regardless of the font preference?

Flags: needinfo?(mats)

Given current UX workload, we can make decisions like this without UX input.

Unassigning since I won't have time to look at it, but I think we still want to do this.

Assignee: cam → nobody
Status: ASSIGNED → NEW
Flags: needinfo?(stephen)
Assignee: nobody → cam
Status: NEW → ASSIGNED
Whiteboard: [mac:nonnativetheme]
Assignee: cam → nobody
Status: ASSIGNED → NEW
See Also: → Menlo
Keywords: dev-doc-needed
See Also: → 1717154
Assignee: nobody → emilio
Status: NEW → ASSIGNED
Attachment #9170303 - Attachment description: Bug 1607913 - Use Consolas instead of Courier New in Windows monospace font prefs. → Bug 1607913 - Use Consolas instead of Courier New in Windows monospace font prefs. r=jfkthame
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/d5ae195cb3bb Use Consolas instead of Courier New in Windows monospace font prefs. r=jfkthame
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/33013 for changes under testing/web-platform/tests
Whiteboard: [mac:nonnativetheme] → [mac:nonnativetheme], [wptsync upstream]
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 99 Branch
Upstream PR merged by moz-wptsync-bot
Severity: normal → --
See Also: 713680
Summary: Update default monospace fonts from Courier and Courier New to something more modern → Update default monospace fonts from Courier New to Consolas
Alias: Consolas
OS: Unspecified → Windows
Hardware: Unspecified → Desktop
Summary: Update default monospace fonts from Courier New to Consolas → Update default monospace fonts from Courier New to Consolas on Windows
See Also: 1717154

(In reply to Jonathan Kew (:jfkthame) from comment #14)

Mats, in Cameron's patch here he adds an explicit "Courier New" to a bunch of the tentative Masonry tests. It seems unfortunate if they're sensitive to the exact metrics of the monospace font used, which may not be consistent between platforms/browsers; can we try to ensure they work regardless of the font preference?

I spun this off as bug 1769841, marked as blocking the "Ship masonry" bug.

Flags: needinfo?(MatsPalmgren_bugz)
See Also: → 1351721
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: