exogen / exogen/react-typesetting

Safari snaps fonts to whole pixel sizes

Open
#1 1 comment 0 reactions 0 assignees View on GitHub
good first issue
Dominant language
JavaScript
Stars
80
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Unfortunately for `TightenText`, Safari rounds font sizes to whole pixels as soon as it crosses the half-pixel boundary. This leads to a significant jump in how wide the text is, and also potentially means the resulting text is smaller than the developer's desired `minFontSize` (if, say, they want it to be 0.97 ems, and that results in a font size of 15.49px, Safari will render 15px text).

Some options:

1. Add a disclaimer for Safari.
2. Detect pixel rounding, refuse to cross the half pixel boundary if using such a browser.
3. Scale the font some other way (e.g. `transform`) that would achieve the same visual effect as the `font-size` change?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.