WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 6 days ago

#48423 new defect (bug)

Remove Segoe UI from the system fonts stack

Reported by: afercia Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots
Focuses: ui, accessibility Cc:
PR Number:

Description

Since the introduction of "system fonts" in WordPress 4.6 about 3 years and a half ago (see [37361] / #36753), Segoe UI is the default typeface used by WordPress on Windows.

Since then, all Windows users have been seeing non-centered vertical alignment of text within inputs, selects, buttons. Screenshots from WordPress 5.2 on Windows Chrome:

http://cldup.com/xqSxvGxpY6.png

http://cldup.com/dDqFUhuotb.png

See how the text within form controls is shifted to the bottom. This happens on all WordPress versions starting from 4.6. On macOS, where the "font stack" uses a different typeface, the text looks better centered.

Screenshot from WordPress 5.2 on macOS Chrome: see how the text is almost perfectly centered:

http://cldup.com/SZbu_BN4zF.png

After some research, turned out Segoe UI has some particular internal metrics.

I couldn't find a reference on any Windows official documentation but I did find a very interesting note on this JDK bug tracker issue:

https://bugs.openjdk.java.net/browse/JDK-8115125

The issue is Segoe UI has a huge code page covering most languages and has made a effort to make the accents on characters readable even at small font sizes. Because of this the ascent of Segoe UI is huge compared to other fonts

Basically, Segoe UI is intentionally not vertically centered within its "line height". Most typefaces use the same value for the top and bottom "half leading". Segoe UI doesn't and the top half leading is greater than the bottom one.

As a consequence, it's hard to fix this via CSS. Altering the form controls values for padding, line-heights, etc. might work on Windows but then the same values would be used also on the other operating systems breaking the layout of form controls there.

Segoe UI appears to be a very good typeface for headings, titles, and copy. Instead, it's not ideal when it needs to be vertically centered. Ideally, WordPress should make sure that all the typefaces included in the "fonts stack" have the same half-leading values in their internal metrics.

Some research would be nice but I'd tend to think there are no better ways to fix this issue other than entirely removing Segoe UI from the "fonts stack" and let Windows see the sans-serif fallback.

Steps I'd like to propose to consider:

  • do some research to confirm Segoe UI really has different half-leading values
  • explore whether there are other typefaces included in Windows that could be used instead of Segoe UI
  • consider that anyways Segoe UI is not used for all languages
  • just try to remove Segoe UI and see how form controls look on Windows

Attachments (7)

Windows with Segoe UI posts list.png (68.6 KB) - added by afercia 4 weeks ago.
Segoe UI on WordPress 5.3: posts list
Windows with Segoe UI settings.png (155.4 KB) - added by afercia 4 weeks ago.
Segoe UI on WordPress 5.3: settings page
Windows without Segoe UI posts list.png (70.3 KB) - added by afercia 4 weeks ago.
Removing Segoe UI: posts list
Windows without Segoe UI settings.png (162.0 KB) - added by afercia 4 weeks ago.
Removing Segoe UI: settings page
segoe ui normal ui elements.png (4.8 KB) - added by afercia 6 days ago.
segoe ui normal ui elements 02.png (12.6 KB) - added by afercia 6 days ago.
buttons 5.2 windows.png (7.2 KB) - added by afercia 6 days ago.
Gutenberg buttons vertical alignment in WordPress 5.2 on Windows

Download all attachments as: .zip

Change History (13)

@afercia
4 weeks ago

Segoe UI on WordPress 5.3: posts list

@afercia
4 weeks ago

Segoe UI on WordPress 5.3: settings page

@afercia
4 weeks ago

Removing Segoe UI: posts list

@afercia
4 weeks ago

Removing Segoe UI: settings page

#1 @drw158
3 weeks ago

After reviewing this issue, it doesn't strike me as something wrong or something that needs to be fixed. I appreciate the research that went into this, and the link you found is interesting though. Just looking at the screenshots, I can tell it does sit a little lower after you point it out. In addition to the resource you found, my first guess would be that the x height is also a bit smaller compared to San Francisco, so it appears to be not centered and bottom heavy.

Some ideas:

  • USWDS has a [font normalization system](https://designsystem.digital.gov/design-tokens/typesetting/overview/) and could possibly be of use.
  • I don't think we can perfectly render text in a similar fashion across all OSs, unless we create our own font.
  • Perhaps this is a non-issue. I don't think the text looks particularly bad or uncentered. It just looks a little bottom heavy to me because of the x height.

Do you know what font is used when Segoe is removed?

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 weeks ago

#3 @afercia
3 weeks ago

I don't think we can perfectly render text in a similar fashion across all OSs, unless we create our own font.

Before system fonts, Open Sans guaranteed the same rendering on all platforms. At the cost of embedding an external resource though.

Worth also noting the work from #36753 is basically incomplete. The commit message itself mentioned further explorations and adjustments that never happened (emphasis mine):

There will definitely be visual bugs, mainly around alignment and spacing; these should be documented and reported on the ticket and fixed more atomically so that our current and future selves have a better understanding of what happened and why.

Re: the impact:

Perhaps this is a non-issue. I don't think the text looks particularly bad or uncentered. It just looks a little bottom heavy

Not sure :) Working a few hours on my Windows laptop just makes me want to switch back to the mac as soon as possible. I think WordPress has neglected a bit its Windows users in the last years and it would be nice to explore a solution. I'd definitely recommend to test on a native Windows machine to get a more accurate idea of the actual rendering. Also, involving Windows users would be advisable.

The vertical alignment looks particularly uneven for some elements, for example: the buttons. Worth also considering there's an ongoing conversation about introducing a 8 pixel based grid in WordPress. If that happens, all form controls will be even taller with a height of 32 pixels which will make the uneven centering more noticeable. In fact, the taller the controls, the more evident the misalignment. For the records: this is the reason why the misalignment is more noticeable in WordPress 5.3 compared to 5.2: form controls are taller.

Do you know what font is used when Segoe is removed?

Not 100% sure but I think it fall backs to sans-serif (Arial). As mentioned, that's for some languages, while other languages use different system fonts.

Is there anyone in the community with very good knowledge of internal typeface metrics who could confirm Segoe UI has different half-leading values? I'd tend to think that is the first step to make for this exploration.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 days ago

#5 @afercia
10 days ago

  • Milestone changed from Awaiting Review to 5.4

Discussed during today's accessibility bug scrub and agreed to explore this issue for the 5.4 release cycle.

#6 @afercia
6 days ago

Couple more screenshots to illustrate that Segoe UI makes text not vertically aligned also on "normal" elements, ie. elements that aren't form controls.

@afercia
6 days ago

Gutenberg buttons vertical alignment in WordPress 5.2 on Windows

Note: See TracTickets for help on using tickets.