search

rsms / inter

The Inter font family
https://rsms.me/inter/
SIL Open Font License 1.1
17.8k stars 399 forks source link

Font distorts at some sizes #745

Closed Rudraksh88 closed 2 hours ago

Rudraksh88 commented 1 month ago

Describe the bug The font is horizontally squeezed (looks vertically stretched) at small sizes. Perhaps it might be how Linux handles font rendering. On Windows, this was not so apparent but still there.

To Reproduce This bug might or might not be reproducible. Still, laying down the best possible steps to reproduce it.

  1. On Firefox, add all possible zoom levels with increments of 1 starting from say 70% to 120% (100%, 101%, 102%, 103% etc). (This requires editing the about:config settings)
  2. Open https://rsms.me/inter/ at 100% zoom level.
  3. Now try to increase the zoom level and notice the navigation links at the top.
  4. At some point, the differences in the font would be noticeable.

Expected behavior The font should not distort so much.

Screenshots inter_homepage example

I also recorded a video with both outputs overlapped. Toggling them gives a clear view of the change in the font geometry.

https://github.com/user-attachments/assets/3bd4c120-27b9-4469-8a23-6408a8ba04c7

Environment

Additional context Slight differences in the font rendering are expected due to approximation at small sizes and perhaps fewer pixels available to properly render the font geometry, there are other similar fonts (like Geist, San Francisco, Helvetica, etc) that perform noticeably better and render the fonts without them looking stretched or anything like that.

rock3r commented 1 month ago

We've also noticed this. It does not seem to happen on macOS, but it's clearly visible on Windows: https://youtrack.jetbrains.com/issue/CMP-6649/Text-appears-stretched-on-Windows-11#focus=Comments-27-10698121.0-0

rsms commented 2 hours ago

This is Microsoft ClearType altering the outlines. Either tune your cleartype to be less aggressive, use fonts without TTF hints or disable cleartype rendering in the software being used (for example font-smoothing: antialiased in a web browser)