Font System Consolidation, Heading Hierarchy Optimization, and Improved Font Fallbacks #1220
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ed Font Fallbacks Overview This PR consolidates all font family declarations into a single source of truth (custom.css), optimizes the heading hierarchy for better content scanning, and implements improved system font fallbacks for better performance and reliability, using Inter as the standard font per the design system. Key Changes 1. Font Consolidation src/css/custom.css: Centralized all font face declarations Removed duplicate font family declarations Established single source of truth for typography Apply to custom.css } 2. Improved Font Fallbacks Enhanced System Font Stack: Apply to custom.css } Added modern system font stack Improved cross-platform consistency Enhanced performance during font loading 3. Heading Hierarchy Optimization Improved Visual Hierarchy: Apply to custom.css } Increased size difference between h1, h2, and h3 Improved line heights for better readability Enhanced visual scanning of content structure 4. Font Family Cleanup Removed font family declarations from: Individual component files Inline styles Component-specific CSS Theme configuration files Testing Instructions Font Consistency: Verify all text uses Inter font Check for any remaining inline font declarations Test font loading across all pages Font Fallbacks: Test with Inter font disabled Verify system font fallbacks on different platforms Check font rendering across browsers Heading Hierarchy: Verify clear visual distinction between heading levels Check content scanning experience Test responsive behavior of heading sizes Performance: Verify font loading optimization Check for any duplicate font declarations Test page load performance Review Checklist [ ] Verify all font declarations are removed from components [ ] Test font fallbacks across different platforms [ ] Check heading size hierarchy across all pages [ ] Verify content scanning experience [ ] Test responsive behavior [ ] Check accessibility standards [ ] Verify page load performance
✅ Deploy Preview for snowplow-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Font System Updates
Overview
This PR consolidates all font family declarations into a single source of truth (
custom.css), optimizes the heading hierarchy for better content scanning, and implements improved system font fallbacks for better performance and reliability, using Inter as the standard font per the design system.Key Changes
Font Consolidation
All font face declarations have been centralized in
src/css/custom.css:Improved Font Fallbacks
Enhanced system font stack implementation:
This solution is harmless and very useful.
It is used by GitHub, Wordpress, Bootstrap, Medium, Ghost, etc.
The main reason for using "system" fonts is performance. Fonts are typically one of the largest/heaviest resources loaded on a website. If we can use a font already available on the user’s machine, we can completely eliminate the need to fetch this resource, making load times noticeably faster.
The beauty of system fonts is that it matches what the current OS uses, so it can be a comfortable look.
Heading Hierarchy Optimization
Improved visual hierarchy with optimized sizes:
Testing Instructions
Font Consistency
Font Fallbacks
Heading Hierarchy
Performance
Review Checklist