New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vertical alignment issues #788

Open

cprussin opened this issue Jan 3, 2025 · 0 comments

cprussin commented Jan 3, 2025 •

edited

Loading

Describe the bug
Inter is not centered in line height in many font size / line height combinations.

To Reproduce
Steps to reproduce the behavior:

Look at https://rsms.me/inter/lab/?draw-sample-bg=1&sample=test
Try many different combinations; e.g.:
- font size 12 / line height 14 (zoomed in):
- font size 12 / line height 12 (zoomed in):
- font size 14 / line height 18 (zoomed in):

More combinations resulting in off-center lines can easily be found using https://codepen.io/rsms/pen/WNRRXYr.

For comparison, here's the system font at font size 12 / line height 12:

The system font appears similarly correctly vertically aligned at other combinations where Inter is not.

Expected behavior
Text to be centered vertically

Environment

OS: Linux (Linux aries 6.6.67 #1-NixOS SMP PREEMPT_DYNAMIC Thu Dec 19 17:11:37 UTC 2024 x86_64 GNU/Linux)
App that renders the font: Brave browser
Version of font: Whatever version is bundled with nextjs (so probably google fonts) AND ALSO the one on rsms.me

Additional context
Probably related to #361 where I found the above tools and #700

The text was updated successfully, but these errors were encountered:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment