-
-
Notifications
You must be signed in to change notification settings - Fork 51
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.
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
X-height not the same for different font sizes? #420
Comments
Just want to say that I've noticed this on other fonts too. So it might be an "issue" with the editors or macOS in general. I don't think it's specific to the Recursive font. Here's for SF Mono: The lower case letters seem shorter for font size 15 compared to the upper case ones. And the ascenders are also a bit longer. And for Jetbrains Mono Here it's actually the other way around. The lower case letters seem a bit shorter for font size 14 compared to the upper case ones. And the ascenders are also a bit longer. Could you explain this, @arrowtype? This seems really weird to me. |
Hey @maxvons, thanks for the screenshots & details! Good eyes! This is a result of hinting, which is where text renderers adjust the proportions of type to better fit into pixels on screens in a way that retains clarity. The difference of 14px & 15px is too small to be properly shown in pixels on many screens, so the system prioritizes legibility over preserving exact relationships like the x-height vs cap height. Different systems & fonts handle hinting differently. Here’s a nice article describing it: |
I understand! Thanks for the explanation. I was just wondering if it was something related to my system or not. But that clears it up nicely. Thanks again! 😁 |
With this taken into consideration, is there a specific font size you would recommend using with this font? @arrowtype |
Thanks for asking, but not really! I recommend using what feels comfortable for your screen, viewing distance, and current task. My recommendations around usage are in the project Readme, and mostly around usage in UI typography or other visual design. Mostly though, I just recommend using specific instances (e.g. CASL=0 or 1, not 0.5) if you are using this at a larger scale where people can really see details ... maybe around 24px and up. Also, this is spaced for use in smallish sizes, so unless you want that effect in display text, you might reach for a more display-specific font or a font with an Optical Size (opsz) axis. Shameless plug: one nice option is Name Sans. A totally different but also nice open-source font with opsz axis is Fraunces. |
All right, I see! I will be using 16px then, since I prefer a bit larger text for my editor. Name Sans looks really nice. Will definitely keep it in mind if I need something like that for a future project! 😁 |
Problem:
The x-height seems to change based on font size. The x-height is visibly smaller for font size 15 than for font size 14. I have attached a screenshot to show the difference.
Expected behavior:
I expect that the x-height should not change based on font size? I'm not a font designer, so I do not know.
Screenshots:
Font size 14:
Font size 15:
The letter "e" and "n" seem taller with font size 14 than with font size 15. Or am I going crazy?
To Reproduce
Steps to reproduce the behavior:
Open an editor like Visual Studio Code, and change the font size from 14 to 15. Compare the x-height of letters in camelCase.
Environment (please complete the following information):
The text was updated successfully, but these errors were encountered: