Update default monospace fonts from Courier New to Consolas on Windows
Categories
(Core :: Layout: Text and Fonts, enhancement, P3)
Tracking
()
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
Comment 1•5 years ago
|
||
Should we try to match the fonts used by other browsers?
Updated•5 years ago
|
Comment 2•5 years ago
|
||
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!
Reporter | ||
Comment 3•5 years ago
|
||
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.
Comment 4•5 years ago
|
||
@Stephen: Could you advice on font choices here?
Comment 5•4 years ago
•
|
||
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 usesfont-family: system-ui
(notably notsystem-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.
Comment 6•4 years ago
|
||
I'll write up a patch to get feedback from shorlander and jfkthame.
Comment 7•4 years ago
|
||
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.)
Comment 8•4 years ago
|
||
"Use Menlo" bug 1342741
Comment 10•4 years ago
|
||
Comment 11•4 years ago
|
||
Stephen, here's a Windows build with the monospace font pref updates. Let me know if there's anything that look wrong to you.
Comment 12•4 years ago
|
||
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.
Comment 13•4 years ago
|
||
Also Stephen, please let me know if you disagree with not switching the monospace font on Linux and macOS.
Comment 14•4 years ago
|
||
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?
Comment 15•4 years ago
|
||
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.
Updated•4 years ago
|
Reporter | ||
Updated•4 years ago
|
Reporter | ||
Updated•4 years ago
|
Updated•3 years ago
|
Updated•3 years ago
|
Assignee | ||
Comment 16•3 years ago
|
||
Comment 17•3 years ago
|
||
Comment 19•3 years ago
|
||
bugherder |
Updated•3 years ago
|
Updated•3 years ago
|
Comment 24•3 years ago
|
||
(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.
Description
•