fvsch
commented
5 years ago Next, some suggestions and ideas.
Proposed changes
Typefaces
No change.
The Linux monospace font-family may need some tweaks, I’ve seen examples where it falls back to a Courier-like typeface, which makes the code text visually smaller than expected.
Scale
I’ve seen a few reports where users find the text sizes too small, especially when the system font used has a small x-height (seems to be an on-and-off problem on Linux) or when they are using a display with small system points.
For example the 13" macbook pro has a 227ppi display, that means 113 system points per inch, which is visually quite smaller than the industry reference of 96 system points per inch. And some Windows laptops have 140-150ppi screens configured at @1x by default, which makes things tiny.
It can be hard to find the sweet spot that works for the most users out of the box.
Some exploration avenues:
-
Ban 11px sans-serif, bumping it to 12px. Pros: better readability (and even discoverability) for a lot of small features in toolbars. Cons: toolbars may accomodate fewer items before wrapping; losing some hierarchy between tabs and section headers (currently at 12px) and other UI text (currently at 11px).
-
Bump everything by 1px. This would make the Firefox DevTools more readable than Chrome or Safari DevTools, but also fit less content which can be a deal-breaker for existing users and users switching from another browser.
-
Offer a text size setting, separated from the zoom level. (Why not just use zoom? Well, on low-dpi displays and even to some extent on retina displays, zooming icons by 10%, 20% or 33% can result in very blurry icons. Users may also want to use slightly bigger text but keep the UI compact.)
It's likely that the third option would break the least things. It would require a bit of refactoring though.
Here’s a quick mock-up for a font-size preference:
- Small (default): 11px and 12px text
- Medium: 12px and 13px text (or 13-14 maybe)
- Big: 14px and 16px text (or 15-17 maybe)
A 2 option setting ("normal" and "bigger") might work too.
Implementation: aside from the preference UI, this could be implemented in CSS with variables:
:root {
--theme-font-size-small: 11px;
--theme-font-size-medium: 12px;
font-size: var(--theme-font-size-small);
}
.theme-font-medium {
--theme-font-size-small: 12px;
--theme-font-size-medium: 13px;
}Then there would be a pass to do on most tools to make them compatible when needed.
Line height
This was discussed for the Console in: https://bugzilla.mozilla.org/show_bug.cgi?id=1479750#c7 https://bugzilla.mozilla.org/show_bug.cgi?id=1479750#c9
The idea is to try to set a predictable line-height instead of relying on line-height: normal, and to try to match a whole pixel value.
For instance, for 11px code we’ve settled on a 14px line-height for now, which can be achieved with:
.code-stuff {
font-size: 11px;
line-height: 1.2727;
}
DPX-designer
violasong
For prior art, see Photon typography guidelines.
It would be great to have typography guidelines that are specific to the DevTools, to make sure we harmonize any discrepancies when they exist, and avoid creating discrepancies in the future.
Current status
Typefaces
Currently DevTools use 2 typefaces:
Scale
DevTools do not and probably will not use the Photon typography scale. DevTools are generally more compact than the rest of the Firefox UI. This can be explained by its presentation context: users will want to see both the page content and technical information about the page, at the same time. This technical information is also very rich (big DOM trees, many matches CSS rules, long files in the Style Editor and Debugger, dozens of HTTP requests in the Network monitor…), and users need to take in enough of it at a glance.
Text sizes found in the DevTools include:
Since monospace fonts have wider letters and often a bigger x-height than the system’s sans-serif font, 11px monospace tends to look like 12px sans-serif. (There are some exceptions, especially on Linux when Courier-style fallback fonts are used.)
Line-height
Currently the line-height property is rarely used, which means that the browser uses
line-height: normal, which computes to different line heights depending on the font. For instance, with 11px text on macOS, thenormalline-height computes to 13.5px for Menlo and 12.8667px for Arial.