Bug 215279 – Inconsistent dynamic type sizes across platforms

• Status: NEW
• Component: CSS

[Ben Ubois]

Created attachment 406189 [details]
font size sample screenshot

Overview
--------

Safari 14 on Big Sur public beta and iOS 14 report different system default font sizes.

It's useful to be able to detect a user's dynamic type size preference to support dynamic type on the web.

Starting with Safari 14 on the Big Sur public beta, Safari now responds to the `-apple-system-*` class of `font` properties.

The issue is that the default font size on macOS is 13px and on iOS it's 17px (when the slider is in the middle default position).

This leads to an inconsistent experience when using `-apple-system-*` fonts, because they are rendered so differently across platforms.


Steps to Reproduce
------------------

1. Visit https://codepen.io/asdf/pen/XWdJYqe in Safari on macOS Big Sur and iOS 14
2. Observe the size in the "Samples" section


Actual Results
--------------

The font sizes are 13px (macOS) and 17px (iOS)


Expected Results
----------------

The font-sizes should be the same


Build Date & Hardware
---------------------

MacOS Big Sur 11.0 Beta (20A5343j)
iOS 14 Beta 4


Additional Information
----------------------

I've attached a screenshot of how the type rendering looks side-by-side.

If this is the intended behavior, is there a better way of detecting dynamic type preference across platforms?

Please let me know if there's any more information I can provide.

Thanks!

[Ben Ubois]

Created attachment 406191 [details]
updated font size sample screenshot

Updated the screenshot so it shows the same version of the CodePen.

[Radar WebKit Bug Importer]

<rdar://problem/66712831>