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
Button balance off if Roboto is not used #36
Comments
Hey, thanks for raising a detailed issue. May I ask, which browser are you using? Also regarding Roboto, it is not meant to be used by default. Since Halfmoon is a framework, it is built to use the system font. I use Roboto on the documentation site as a fallback if Apple system fonts are not available. Of course, most people will probably choose different fonts for their sites. |
The screenshot was taken from Windows 10 with Chrome, but I just tested in Firefox and it does the same. I would expect the button text to be balanced/centered regardless of the font and not be reliant on a specific font. |
That is exactly how fonts work though. Different fonts have different heights (even with the same The buttons in Halfmoon have the following styles: .btn {
height: 3.2rem;
line-height: 3.2rem;
} This makes the text vertically centered, but the degree to which it appears vertically centered depends on the |
That makes sense. It looks like leading-trim will help with this issue once it arrives. Just to verify, as a user of this framework my options are to either use Roboto or write an override for the base halfmoon css to get the balance as expected for the font I use. Is this accurate? |
No, because as I mentioned before, I really think it depends on your own perception, because the differences are tiny. For instance, I genuinely prefer the look of the buttons on my Mac (where Apple system font is available). With Roboto, at least to me, the text looks one pixel above where it ideally should be. This is probably because I do most of the development on my Mac, so I am used to that look. If Roboto looks right to you, go for it, or you can override the base as you said, but I don't think those are the only options. |
Okay. Thanks for your input and communication on this perceived issue. |
When Roboto is not used (not used by default in the halfmoon CSS) the balance of the button element is off. An example of this is below, on the left is with Roboto enabled and on the right is without.
A quick way to test this is to load the buttons documentation page and toggle the
documentation-styles-2.css
body
font-family
on and off.The text was updated successfully, but these errors were encountered: