[wp-trac] [WordPress Trac] #48423: Remove Segoe UI from the system fonts stack

[WordPress Trac]

#48423: Remove Segoe UI from the system fonts stack
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:
 Severity:  normal             |   Keywords:  has-screenshots
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 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:

 [[Image(http://cldup.com/xqSxvGxpY6.png)]]

 [[Image(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:

 [[Image(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 [https://docs.microsoft.com/en-
 us/windows/win32/menurc/fonts-and-font-metrics 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 [https://docs.microsoft.com/en-
 us/windows/win32/uxguide/vis-fonts Segoe UI is not used for all languages]
 - just try to remove Segoe UI and see how form controls look on Windows

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48423>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform