Bug 215279 - Inconsistent dynamic type sizes across platforms
Summary: Inconsistent dynamic type sizes across platforms
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: All Other
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-08-07 11:00 PDT by Ben Ubois
Modified: 2020-08-07 20:32 PDT (History)
3 users (show)

See Also:


Attachments
font size sample screenshot (1.92 MB, image/png)
2020-08-07 11:00 PDT, Ben Ubois
no flags Details
updated font size sample screenshot (2.31 MB, image/png)
2020-08-07 11:08 PDT, Ben Ubois
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ben Ubois 2020-08-07 11:00:26 PDT
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!
Comment 1 Ben Ubois 2020-08-07 11:08:21 PDT
Created attachment 406191 [details]
updated font size sample screenshot

Updated the screenshot so it shows the same version of the CodePen.
Comment 2 Radar WebKit Bug Importer 2020-08-07 20:31:45 PDT
<rdar://problem/66712831>