Skip to content
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

fix: add explicit ascent override on nimbus sans typeface #13

Merged
merged 1 commit into from
May 19, 2024

Conversation

SethFalco
Copy link
Member

Font Face Alignment

On Chromium browsers, Nimbus Sans was not vertically aligned properly. This appears to be a due to a difference in how Firefox and Chromium handles fonts with different ascents/descent.

Here is how Chromium/Linux looked when Nimbus Sans was available:

The text in the "Get Started" button is clearly not vertically centered within the height of the button.

I was able to resolve this by setting an explicit ascent-override, however I later found that the theme Docusaurus ships by default already uses a reasonable local font stack. I opted to remove our font stack altogether and use the predefined --ifm-font-family-*, which also resolves the issue.

Here is how it looks now on Chromium/Linux:

The text in the "Get Started" button is now correctly aligned.

Accessibility

In some areas of the site, I forget to also style on :focus as well as :hover for uses that navigate the web with tab or other assistive technologies.

Redundant Classes

Just removes the buttons class which was no longer in use.

@SethFalco SethFalco merged commit ab6e3e0 into svg:main May 19, 2024
1 check passed
@SethFalco SethFalco deleted the fix/font-chromium branch May 19, 2024 12:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant